Cara Membuat Tampilan Partner Blog Keren dan Menarik
Halo kawan ID-Libra, kali ini saya akan berbagi script untuk membuat Tampilan Partner Blog Keren dan menarik. Sudah lama sekali saya gak share tentang coding, saya lagi semangat sekali untuk share tentang tutorial coding. Yaps, partner, siapasih yang ga tau partner ? Partner adalah Partners adalah orang (badan usaha dan sebagainya) dari dua pihak yang berbeda yang saling bekerja sama karena saling membutuhkan atau melengkapi.
Apa fungsi partner ? Partner berfungsi untuk memperbanyak backlink blog sehingga hal itu dapat merampingkan alexa dan negara agar blog atau website Anda mudah untuk masuk ke page one mesin pencarian. Nah, waktu dulu mimin sering kali masuk page one setiap buat artikel. Karena page rank di indonesia saya waktu itu mencapai 19 ribuan. Waaa ... keren kan bahkan page view saya perhari mencapai 15 ribuan. Tapi karena ada masalah dengan akun adsense hosted, saya memutuskan untuk upgrade akun adsense ke non-hosted dengan cara mengganti domain saya. Alhasil traffik saya turun drastis dan alexa balik ke 7 jutaan.
Di page rank alexa yang 7 jutaan sebenarnya tidak terlalu buruk. Tapi alexa saya dulu masuk 1 jutaan. Ingat ! semakin kecil alexa anda, maka semakin baik page rank anda. Untuk itu, agar saya dapat mengembalikan page rank saya, saya membutuhkan beberapa partner. Lalu saya mencoba - coba membuat bagaimana tampilan partner yang keren dan menarik visitor. Akhirnya saya mencoba merecode ulang script tersebut dan mengubah sedikit tampilannya. Untuk contoh tampilannya yang lebih lengkap bisa cek di Partner Blog ID-Libra. Jika ada yang ingin mendaftar jadi admin ID-Libra bisa contact Facebook saya.
Berikut adalah script untuk membuat tampilan Partner Blog yang Keren dan Menarik Visitor :
<style type="text/css">
/* CSS Reset style */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
align-content: center;
color: black;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Start CSS property */
hr {
width: 80%;
text-align: center;
margin-top: 20px;
}
.front > hr {
margin-top: 38px;
}
h1, h2 {
font-size:22px;
color:black;
margin-bottom: 10;
text-align: center;
}
h1 {
margin-top:75px;
}
h2 {
margin-top:35px;
margin-bottom: 25px;
}
p {
font-size: 16px;
color: black;
margin-bottom: 28px;
}
blockquote {
text-align: center;
margin: 35px 30px 20px 30px;
}
blockquote > p {
color: #96721f;
}
.front > .zawod {
text-align: center;
}
#container {
width:auto;
height: 500px;
background-color: #efefef;
margin: 0 auto;
}
.card1, .card2 {
width: 285px;
height: 420px;
float:left;
margin-top:20px;
margin-left:35px;
}
.front {
display: block;
align:center;
}
.back {
}
.card1 > .front, .card2 > .front {
position:absolute;
transform: perspective(500px) rotateY(0deg);
backface-visibility: hidden;
width: 285px;
height: 420px;
background-color: #fff;
transition: transform .5s linear 0s;
border: 1px solid #e9e9e9;
border-radius: 5px;
}
.card1 > .back, .card2 > .back {
position:absolute;
transform: perspective(500px) rotateY(180deg);
backface-visibility: hidden;
width: 285px;
height: 420px;
background-color: #fff;
transition: transform .5s linear 0s;
border: 1px solid #f3f3f3;
border-radius: 5px;
}
.card1:hover > .front, .card2:hover > .front {
transform: perspective(500px) rotateY(-180deg);
}
.card1:hover > .back, .card2:hover > .back {
transform: perspective(500px) rotateY(0deg);
}
.card1 .backgroundImage {
background-image: url("https://akphoto2.ask.fm/548/541/759/-239996999-1t3ojtr-kp02gb49j26b9hf/original/free_space_galaxy_texture_by_lyshastrad77gh54.jpg");
background-repeat: no-repeat;
max-height: 65px;
padding-top: 55px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card2 .backgroundImage {
background-image: url("https://akphoto2.ask.fm/548/541/759/-239996999-1t3ojtr-kp02gb49j26b9hf/original/free_space_galaxy_texture_by_lyshastrad77gh54.jpg");
background-repeat: no-repeat;
max-height: 65px;
display: block;
padding-top: 55px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.backgroundImage .person {
background-image: url("http://www.ric.gop.pk/images/tree/1.jpg");
background-position: -40px;
background-size: 110px;
background-repeat: no-repeat;
background-position: center;
width:110px;
height:110px;
border-radius: 50%;
border: 4px solid #144686;
margin: auto;
}
.opis {
padding: 0 35px;
text-align: justify;
color: black;
}
.img {
margin: 40px 41px 23px 41px;
}
</style>
</head>
<body>
<div id="container">
<div class="card1">
<!-- Karta pierwsza front -->
<div class="front">
<div class="backgroundImage">
<div class="person">
</div>
</div>
<h1>Farda Alan</h1>
<p class="zawod">Blogger Indonesia</p>
<p class="opis">Kumpulan Tutorial, Belajar Komputer, Blogging dan Adsense.</p>
<hr>
</div>
<!-- Karta pierwsza back -->
<div class="back">
<blockquote><p>Membaca adalah Jendela ilmu</p></blockquote>
<hr>
<h2><a href="http://www.idlibra.com">ID-Libra</a></h2>
<p class="opis">Belajar tentang berbagai tutorial, blogging, coding, adsense, tips dan trik lainnya.</p>
<div class="img">
<img src="http://www.winiar.pl/projects/flippingCards/images/email.jpg" alt="adres email" />
<img src="http://www.winiar.pl/projects/flippingCards/images/phone.jpg" alt="kontakt telefoniczny" />
<img src="http://www.winiar.pl/projects/flippingCards/images/web.jpg" alt="strona intetnetowa" />
</div>
<hr>
</div>
</div>
<div class="card2">
<!-- Karta druga front -->
<div class="front">
<div class="backgroundImage">
<div class="person">
</div>
</div>
<h1>Farda Alan</h1>
<p class="zawod">Blogger Indonesia</p>
<p class="opis">Kumpulan Tutorial, Belajar Komputer, Blogging dan Adsense.</p>
<hr>
</div>
<!-- Karta pierwsza back -->
<div class="back">
<blockquote><p>Membaca adalah Jendela ilmu</p></blockquote>
<hr>
<h2><a href="http://www.idlibra.com">ID-Libra</a></h2>
<p class="opis">Belajar tentang berbagai tutorial, blogging, coding, adsense, tips dan trik lainnya.</p>
<div class="img">
<img src="http://www.winiar.pl/projects/flippingCards/images/email.jpg" alt="adres email" />
<img src="http://www.winiar.pl/projects/flippingCards/images/phone.jpg" alt="kontakt telefoniczny" />
<img src="http://www.winiar.pl/projects/flippingCards/images/web.jpg" alt="strona intetnetowa" />
</div>
<hr>
</div>
</div>
<div id="container">
<div class="card1">
<!-- Karta pierwsza front -->
<div class="front">
<div class="backgroundImage">
<div class="person">
</div>
</div>
<h1>Farda Alan</h1>
<p class="zawod">Blogger Indonesia</p>
<p class="opis">Kumpulan Tutorial, Belajar Komputer, Blogging dan Adsense.</p>
<hr>
</div>
<!-- Karta pierwsza back -->
<div class="back">
<blockquote><p>Membaca adalah Jendela ilmu</p></blockquote>
<hr>
<h2><a href="http://www.idlibra.com">ID-Libra</a></h2>
<p class="opis">Belajar tentang berbagai tutorial, blogging, coding, adsense, tips dan trik lainnya.</p>
<div class="img">
<img src="http://www.winiar.pl/projects/flippingCards/images/email.jpg" alt="adres email" />
<img src="http://www.winiar.pl/projects/flippingCards/images/phone.jpg" alt="kontakt telefoniczny" />
<img src="http://www.winiar.pl/projects/flippingCards/images/web.jpg" alt="strona intetnetowa" />
</div>
<hr>
</div>
</div>
<div class="card2">
<!-- Karta druga front -->
<div class="front">
<div class="backgroundImage">
<div class="person">
</div>
</div>
<h1>Farda Alan</h1>
<p class="zawod">Blogger Indonesia</p>
<p class="opis">Kumpulan Tutorial, Belajar Komputer, Blogging dan Adsense.</p>
<hr>
</div>
<!-- Karta pierwsza back -->
<div class="back">
<blockquote><p>Membaca adalah Jendela ilmu</p></blockquote>
<hr>
<h2><a href="http://www.idlibra.com">ID-Libra</a></h2>
<p class="opis">Belajar tentang berbagai tutorial, blogging, coding, adsense, tips dan trik lainnya.</p>
<div class="img">
<img src="http://www.winiar.pl/projects/flippingCards/images/email.jpg" alt="adres email" />
<img src="http://www.winiar.pl/projects/flippingCards/images/phone.jpg" alt="kontakt telefoniczny" />
<img src="http://www.winiar.pl/projects/flippingCards/images/web.jpg" alt="strona intetnetowa" />
</div>
<hr>
</div>
</div>Oke, sekian yang dapat saya sampaikan tentang Cara Membuat tampilan Partner Blog Keren. Semoga bermanfaat. Saya meminta maaf jika ada salah - salah kata. Jika ada yang ingin di tanyakan silahkan bertanya di kolom komentar yang telah saya sediakan.
1 komentar so far
http://www.otakkami.com/2017/02/cara-membuat-syntakcode-dan-scrip.html
Komentar kalian sangat bermanfaat bagi kemajuan blog saya nantinya. Harap menggunakan bahasa yang sopan untuk bertanya dan berkomentar. Menggunakan "LINK" saat berkomentar sama dengan "SPAM"
EmoticonEmoticon