Cara Mempercantik Tampilan Related Posts Linkwithin

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

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


Comments

  1. Makasih mas..udah saya terapin,dan hasilnya keren mas..

    fpnya juga sudah saya like :D

    ReplyDelete
    Replies
    1. silakan di kustomisasi sendiri gan :D
      mission completed..

      Delete
  2. Replies
    1. iyalah saya emg keren B), wkwkw
      makasih ya udah berkunjung :D

      Delete
  3. gan klo pengen meratakan pinggir2 antara widget2 dan header biar sejajar gmn ya ? biar rapi gitu ? thanks b4.

    ReplyDelete
  4. Wah mantap gan ... apa tidak memberatkan blog dan mempengaruhi serp ya gan kalau pake linkwithin

    ReplyDelete
  5. gan kok ada background ijonya

    ReplyDelete
  6. Terimakasih gan atas informasinya...
    mas saya kan udh follow blog kamu... nanti followback blog saya ya ._.

    ReplyDelete
  7. artikelnya bagus banget gan ,, suda saya terapkan keren banget ,,
    kalau bisa kunjung balik ya gan ke blog saya yang masih baru ,,

    http://blogharun26.blogspot.com/

    ...SALAM BLOGGER...

    ReplyDelete
  8. lha widget ini gan yg saya cari..matur nuwunnnnnnnnnnnnnnnnn...sangat bermanfaat....
    salam blogkosutho

    ReplyDelete
    Replies
    1. sama sama gan, terima kasih juga udh mau maen kesini :D

      Delete
  9. manteppp gan..
    tp kok linkwithin sya gk seperti di atas'a..???

    jgn lupa dateng ke gubuk ane http://cybervirburg32.blogspot.com/

    ReplyDelete
  10. mau nanya gan.. klo mau nambah jumlah related post di linkwithin biar lebih dari 5 caranya gimna?

    kunjungi juga http://wajahilmu.blogspot.com/

    ReplyDelete

Post a Comment

Silakan berkomentar dengan sopan sesuai dengan topik bahasan.
Komentar dengan menyertakan tautan hidup akan otomatis terhapus.