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 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
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/AVvXsEgvjC6zrP5u0sJ2IV_XfJaoMNr4zp3M1tYzcLyh95fLwVacOXWe_QQ5qcRGaYd35Agzs1D-EPlT4rJNiTuJVrjaxhazkP_SvwKDO9Qw3gGLkeAAoViuVCKkjwMR_HDpwTuNym2NGc3sH8M/") 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
Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?
