Berbeda dengan widget related post dengan thumbnail sebelumnya, widget artikel terkait kali ini menggunakan bullets atau list sebagai penanda artikel yang terkait, selain tampilanya yang lebih friendly kepada pengunjung, widget artikel terkait ini juga lebih easy loading, karena tidak menggunakan gambar melainkan menggunakan bullets, dan juga di hosting pada yourjavascript, yakni merupakan salah satu free hosting untuk javascript terkemuka di dunia.
Cara Membuat Related Post / Artikel Terkait di Blog
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.
<style> #tuliskancom-related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #tuliskancom-related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #tuliskancom-related-posts .widget h2, #tuliskancom-related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #tuliskancom-related-posts a { text-decoration : none; } #tuliskancom-related-posts a:hover { text-decoration : none; } #tuliskancom-related-posts ul { border : medium none; margin : 10px; padding : 0; } #tuliskancom-related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZugrgMwn1-lkzYkGLbr9qas_qWfM6MVL2usB_PeRmADzrdrPR542uzqbpdTWkXDrxxT0MutHjIBOdyWjrc3IPnqDe4Tq4rj7F0ZE-u9cVNla-aEjlQ6gDR2V0zQZcp-kTkIhaT9E8Kbr2/s1600/rss.png") 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://yourjavascript.com/7139471330/artikel-terkait-tuliskancom.js' type='text/javascript'/>
5. Masih di Edit HTML, selanjutnya cari kode <data:post.body/>, lalu letakkan kode berikut ini tepat dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div id="tuliskancom-related-posts">
<font face='Arial' size='3'><b>Artikel Terkait Lainya: </b></font><font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><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>
Keterangan: Kata-kata yang berwarna merah dapat anda ganti dengan "Related Post", "Related Posts to this article", dsb.
6. Klik "Save/Simpan", dan selesai.
Demikian informasi terbaru seputar tutorial dan tips trik blogging tentang Cara Membuat Related Post / Artikel Terkait di Blog, semoga bermanfaat, dan selamat mencoba.
EmoticonEmoticon