Cara Membuat Related Post di Blogger Dengan Style CSS

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 :

• 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>

• 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgItvnry6Kc0z-hlM2kcgA4el_52AQxF6YifGpMHZpusPmkoZhiKvTEEqtsgAmVgGhyMvNWOZYVLLstvY42xpty0nF3g5sSh_-x2vv1gEzzkimNVWCWbbcukYLLSCo5j63dgNr5fPRxPQ/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.