Related Post With Icon

Related Post With Icon - Bersabar membuat posting menunggu sampai berjam-jam untuk mencari signal yang baik, sangking moderennya zaman sekarang modem sudah tahu cari masalah...
Lupain masalah modem sekarang berinjak ke tutorial, tutorial kali ini ada yang mesen katanya minta dibuatin tutornya, jika menunggu tutorial ini agak lama maaf karena problem seperti di atas tidak bisa diajak kompromi, karena males merancang kode-kode ini maka saya tidak mau ambil pusing dan hanya mengambil tutorial ini dari Kang Salman.

Hal yang perlu diperhatikan dalam membuat tutorial ini adalah berhati-hati dan utamakanlah membaca Basmallah...

Langsung saja kita mulai

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up Template anda untuk berjaga-jaga apabila terjadi kesalahan
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl F untuk mencari kode </head> kemudian kode ini letakkan dibawahnya

<style type='text/css'> #related-posts { float : left; width : 100%; 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzw7t7yFrGH9pakDzd-KsSgLM326Cqzmc-7vzyqMDDN8ybS1A8cEiKpW1f2Y1Oje0VafQ3OMZ5bZ_vqX24xSl5g49fLsCfe_AeH252B8zaF6xd1lC2mNQ5HpCbxbZfOpJDRjYMsOj4-eY/&quot;) 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://koderator.googlecode.com/files/relatedpost.js' type='text/javascript'/>

Langkah 3
Jika sudah lalu cari kode <data:post.body/> biasanya ada 2 kode serupa lalu tempatkan dibawahnya kode yang ke 2

<b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">

<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#222222'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div></b:if>

Jangan kaget kalau hasilnya beda, karena related post yang saya gunakan sudah dimodif
Langkah Terakhir klik simpan dan lihat hasilnya...
Semoga bermanfaat dan jangan bosan-bosan berkunjung di blog ini, sekian dan terimakasih.