.jpg "Cara Membuat Related Post / Artikel Terkait di Blog")
TULISKAN.com - Dari namanya, tentu anda sudah bisa menebak bukan apa widget ini, yap widget ini adalah widget related post atau yang biasa dikenal artikel terkait, widget ini akan menampilkan beberapa artikel yang berhubungan atau dalam blogspot satu "label" antara postingan dengan postingan yang lainya, jadi misalnya anda mempunyai label "tutorial blog", maka pada post yang diberi label tutorial blog itu akan menampilkan post-post lainya yang berlabel tutorial blog secara random atau acak.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.
.jpg)
.jpg "Cara Membuat Iklan/Banner Melayang (Popup) di Blog")
.jpg "Free Download Template Terbaru dan Cara Memasangnya")
.jpg)
.jpg)
.jpg "Cara Memasang Widget Statistik Visitor Histats di Blog")
.jpg "Cara Membuat Widget User Online di Sisi Kiri atau Kanan Blog")
.jpg "Memasang Widget Google Translate dengan Bendera di Blog")
.jpg "Cara Membuat Burung Twitter Terbang di Blog")
.jpg "Cara Membuat Widget Recent Posts Slider di Blog")
.jpg "Preview Cursor Mouse Bertabur Bintang di Blog")
.jpg "Cara Membuat Widget Melayang/Popup di Blog")
.jpg)
.jpg)
.jpg "Cara Membuat Kode Warna dan Box Parse di Blog")
.jpg "5 Tips Membuat Blog yang Berkualitas")
.jpg)