Top Ad unit 728 × 90

Cara Membuat Related Post di Blogger Dengan Style CSS



related-posts



Jika Anda ingin meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing blog bisa dengan menampilkan postingan yang terkait dibawah posting dengan thumbnail atau disebut juga Related Post. Misalnya jika pengunjung Anda selesai membaca artikel dan mereka tertarik dengan artikel yang terkait, ini akan menjadi nilai plus buat blog Anda dengan keterlibatan mereka dalam membaca postingan Anda lebih lama dan berada lebih lama di blog Anda sehingga hal ini berpengaruh pada mesin pencarian. Disini kita akan melalui dua tahap untuk membuat Related Post di blog Anda, untuk lebih jelasnya ikuti langkah di bawah ini :
Tambahkan LinkWithin Di Blogger Anda :
  • Masuk ke Halaman LInkWithin
  • Masukan beberapa informasi dan klik Get Widget!, lihat gambar dibawah ini :
related-posts

  • Selanjutnya akan terbuka halaman baru dan klik pada Install widget pada pilihan no.1
  • Selanjutnya klik pada Edit Template dan ganti kode yang ada didalam kotak dengan kode di bawah ini :

<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>

related-posts


  • Sekarang klik tombol Menambah Widget dan otomatis tersimpan di blog Anda, masih di halaman Tata Letak dan drug/tarik LinkWithin di bawah post body.
  • Dan klik Simpan setelan.

     

Sampai disini Anda telah berhasil menambahkan Related Posts di blog Anda, namun hasilnya tampilannya masih sangat sederhana. Pada tahap kedua saya akan menambahkan style sehingga kita harus menambahkan beberapa kode CSS ke dalam template. Ikuti lankah selanjutnya...

 

Mengubah Style Related Posts LinkWithin :
  • Login ke Blogger Anda
  • Masuk ke halaman Template
  • Cadangkan/backup template sebelum Anda melakukan perubahan pada template
  • klik Edit HTML, baca artikel: Cara Menggunakan Template Editor Blogger versi baru
  • Setelah klik Edit HTML, tekan Ctrl+F dan cari kode :

]]> </ b: skin>

  •  Setelah Anda menemukan kode di atas tambahkan kode di bawah ini tepat di atasnya

/*---Related Posts by www.satu-delapan.blogspot.com ---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer {
margin: 1px 0px !important;
background:url("https://lh6.googleusercontent.com/-HfwIBuhpaJg/UYlLaOtwZcI/AAAAAAAAApg/DIZ92gO89g4/w323-h306-p-o/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
height: 260px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
.linkwithin_inner {
width:590px!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;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}
.linkwithin_posts a {
border-right:0px!important;
margin: 10px 0px 10px 20px !important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
margin: 10px 0px 10px 20px !important; background:none!important;
}
#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 70px !important;
margin-right: 20px !important;
overflow: hidden;
background:#666!important;
}
.linkwithin_img_0:hover {
border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
width: 100px !important;
height: 70px !important;
}
.linkwithin_title {
color: rgb(255, 255, 255) !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 {
text-decoration:underline!important;
}
/*****************************************
http://satu-delapan.blogspot.com/
******************************************/

  • Langkah terakhir klik Simpan Template
  • Selesai !

Akhirnya selesai juga dan pastinya Anda telah berhasil menambahkan Related Posts di blog Anda. Tapi jika ada dari Anda yang mendapatkan kesalahan dari mengikuti cara diatas silahkan tinggalkan komentar Anda dan dengan senang hati saya akan membantu.

Tambahan :

Jika Anda ingin Related post seperti yang saya miliki silahkan tinggalkan komentar Anda.




Cara Membuat Related Post di Blogger Dengan Style CSS Reviewed by burhan sanusi on May 07, 2013 Rating: 5

4 comments:

  1. Matur thank you sanget gan :D
    sukses nh d blog ane, thanks bnget gan.
    thanks udah sharing :)

    ReplyDelete
  2. Sama-sama mas bro...thanks juga udah berkunjung di blog saya.

    ReplyDelete
  3. makasih infonya ya gan :) sangat membantu

    ReplyDelete
  4. thanks tutorialnya gan, sangat membantu....

    ReplyDelete

All Rights Reserved by BSD © 2014 - 2015
Powered by Themes24x7

Contact Form

Name

Email *

Message *

Powered by Blogger.