Macam-macam Related Post Widget Untuk Blogger Keren abis ~ BLOG Tips dan trick

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Teknik ini menggunakan javascript dari http://theblogtemplates.com/scripts/Related_posts_hack.js,lihat sumbernya.
Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

Contoh gambarnya sobat bisa lihat dibawah ini:

Related Post Widget Untuk Blogger (Keren Abis!)

Lihat Gambar Besar

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1
Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3

Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:


<style>
 #related-posts { float : left; width : 540px; margin-top:20px; 
margin-left : 5px; margin-bottom:20px; font : 11px Verdana; 
margin-bottom:10px; } #related-posts .widget { list-style-type : none; 
margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, 
#related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px
 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; }
 #related-posts a:hover { text-decoration : none; } #related-posts ul { 
border : medium none; margin : 10px; padding : 0; } #related-posts ul li
 { display : block; background : 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4SwJnrFwqe9WcCWfV2ccamBkEqFdhGDtjWAb-1tqsXKCLev_KLHLvzkLyd-ysdQpIwarYkL1wqpxqQoRcqk3-Cqjzmr93Vjr5SevSa-cYbNRBlzQtoR5xoFZVqDuaDipvUm1gS2C9pPk/")
 no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; 
padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; 
line-height : 2em; border-bottom:1px dotted #cccccc; } </style> 
<script 
src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js'
 type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Setelah itu simpan,selesai.