Cara Mempercantik Tampilan Related Posts Linkwithin

Cara mempercantik related post linkwithin - linkwithin memang sudah menjadi banyak bahasan para blogger dalam hal pemberian jasa related post secara gratis dan perlu sobat ketahui related post yang menggunankan gambar sudah teruji ampuh agar pengunjung menklik post yang terdapat pada related post.  related post merupakan salah satu SEO tips untuk meningkatkan jumlah pageview blog dan sudah terbukti ampuh untuk mengurangi bounce rate . jika pada artikel saya yang sebelumnnya cara membuat related post dari linkwithin yang saya kali ini saya bahas adalah trik untuk mempercantik tampilan related post agar lebih menarik dan terlihat cantik di mata pengunjung

• Kumpulan tips SEO blog

NOTE: Sebelum melakukan langkah ini harap membaca part 1 cara membuat related post linkwithin

Related Posts Linkwithin Series

Part1: Cara membuat Related Post Linkwithin

Part2: Cara Memeprcantik tampilan related post linkwithin

Memasang css untuk mempercantik related post linkwithin

mungkin sobat sudah tahu bahwa tampilan related post bawaan dari linkwithin tidak terlihat menarik dan elegan. pada tahap dibawah ini saya akan memberikan sentuhan CSS untuk lebih mempercantik tampilan related post dari yang biasa.

Related post linkwithin dengan efek gambar berputar 

1. login blogger

2. template >> edit Html

3. cari kode ]]></b:skin>

4. copy css dibawah ini dan paste tepat diatas ]]></b:skin>

/*---Related Posts by depermana12---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer {
margin: 1px 0px !important;
height: 260px;
width:598px!important;
padding-top: 10px !important;
}
.linkwithin_inner {
width:598px!important;
}
.linkwithin_text {
margin: 0px !important;
padding: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif;
font-size: 1.35em;
color: rgb(255, 255, 255);
font-weight: 700;
line-height: 1.35em;
background-color: #242729;
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
box-shadow: 0px 2px 4px #666;
}
.linkwithin_posts a {
border-right:0px!important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
background:none!important;
}
#linkwithin_logo_0 {display:none;
}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 100px !important;
margin-right: 10px !important;
overflow: hidden;
background:#000!important;
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.linkwithin_img_0:hover {
cursor:pointer;
border: 1px solid #666!important;
-moz-transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);
-o-transform:scale(1.2) rotate(360deg);
-ms-transform:scale(1) rotate(-360deg);
transform:scale(1.2) rotate(360deg);
-moz-box-shadow:4px 4px 4px #1eff25;
-webkit-box-shadow:4px 4px 4px #1eff25;
box-shadow:41px 4px 4px #1eff25;
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
}
.linkwithin_img_0 div {
width: 100px !important;
height: 100px !important;
}
.linkwithin_title {
color: #666 !important;
font-size: 1.1em !important;
display: block;
padding:0px 10px 0px 0px !important;
font-weight: 700 !important;
line-height: 1.45em !important;
margin-top: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
text-decoration:none!important;
width:120px!important;
}
.linkwithin_title:hover{
color:#333;
}

Note : 

• tulisan yang berwarna biru adalah lebar keseluruhan dari related posts

Help

Silakan tanyakan apa yang menjadi kendala sobat pada artikel saya kali ini pada kotak komentar dibawah ini dan dengan senang hati saya akan menjawab pertanyaan sobat,,,Tolong ya sedikit bantuan untuk blog ini dengan cara menklik Like Facebook Fan Page dibawah ini, dan untuk memngetahui balasan tercepat silakan berlangganan gratis dengan cara mensubscribe email sobat dibawah ini :D