Related Post | Membuat Artikel Terkait Dengan Gambar

Related post atau artikel terkait sudah pernah saya bahas dulu nah ini saya bahas lagi trapi dengan tampilan yang berbeda. Baca disini jika anda ingin membaca postingan versi lama

bb

Tampilan artikel terkait yang saya bahas disini ada di bawah posting ini. Langsung gan

1) Login Blogger -> Rancangan -> Edit Html
2) Check "Expand Widget Templates"
3) Letakkan kode diwah ini diatas tag </head>, cari menggunakan CTRL+F biar cepet.

<style>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Tm-lkV_VJAAVIj2FKHMe61RAO11HI_CrWKqUtn3tcmrB5qrjx-58uVSnBaevTdIQvcgXoosCqWvVZTXK8ux1mNuLaKMTI5NkkqC9Kh3JrzV3rNsO9fVK7oVr8IGzimuB2LZ-d6lVItcv/s800/rss_icon_glass_green16.PNG { 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObAAOao2tHavz_bFGSdORuUt_tywjsoHk9ZxiGEvXvoqiNR-fZ6mVU1PfP0GHOU7IRySlAaMOHk8692WD1I09m2oOG2jY-764UrzmNoke-7fZty3ZlNjQmLa1ONVC0HogTJOKiwr0TxBe/s800/rss_icon_glass_green16.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://b3lajarbareng.googlecode.com/files/Related_posts.js' type='text/javascript'/>

4) Lalu cari kode ini <data:post.body/>
5) Letakkan kode dibawah ini setelah kode diatas, jika anda menggunakan Readmore maka akan ada dua <data:post.body/>. Letakkan setelah kode yang pertama.

bb

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<span style="font-family:Arial; font-size:14px">Related Posts :</span><span style="color:#FFFFFF;"><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> </span>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

6) Code diatas menampilkan 5 related post per label max-results=5
7) Save Ambil korek Lalu nyalain Dulu rokoknya bung.