Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Tweet

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.



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

Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

Contoh gambarnya sobat bisa lihat dibawah ini:

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/AVvXsEi8atIwnEso3-bKmdMy9u3lLTxmzqRBVwfEJGp7oQfHrixZISw4TnzhyYa2SATkZVTsxGAckuUZsoLtgxCN7tZkGfomq6kj01vDgcUlgnxyUdbCOBPQogLOejLnVM-Jeek1zBPCw9YOCF4/") 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='http://relatedpostkuansung.googlecode.com/files/kuansing.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.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:


Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini