Cara Membuat Artikel Terkait atau Related Post dengan Icon

Cara Membuat Artikel Terkait atau Related Post dengan Icon - Huh, akhirnya bisa ganti template juga walaupun masih berantakan, mohon di maklumi ya pengunjung. Malam ini saya akan memberikan tutorial cara Membuat Artikel Terkait atau Related Post dengan Icon, tutorial ini saya ambil 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/AVvXsEjvJvXN_AGaPKnfFNJ5UvX-o_T_2vaaEwfnXGkGNizj-WWjLVT_RuecskYHD0B-66QtgVnC3rU76QSimwu6TcKMKDkp52YqW84S69hKleB8wRoSlZPcmbn2ajWou_ARlAu4oQlzR9x0qZk/&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.

Oke cukup sekian tutorial Cara Membuat Artikel Terkait atau Related Post dengan Icon, jika ada pertanyaan silahkan berkomentar :)