Add me on Google+
Add me on Facebook

Cara Mempercantik Tampilan Related Posts Linkwithin

Diposting oleh Label: di
tips seo blog

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




NOTE: Sebelum melakukan langkah ini harap membaca part 1 cara membuat related post linkwithin
Related Posts Linkwithin Series
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

Posting Komentar

Back to Top