Trik Membuat Related Post Widget Untuk Blogger
UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%
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 bloggershare,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:
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/AVvXsEiTRxNT0wfILdpBHiMRNSqDVKxZDCDnVghX1VLNLLOkqSulBAwoLUJY6dKRLhXI1715vUPzeyNjRXgq8pTdeIs0TsUYG0eVRVLgGVcqyY3JLTIgDSuGD6ei9If8f_elsQiULRzHzrBadlg/") 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.
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
Trik Membuat Related Post Widget Untuk Blogger
