Cara membuat related post dengan gambar thumbnail

Tutorial cara membuat related post dengan gambar thumbnail.

Apa itu related post? related post atau artikel terkait adalah judul artikel lain yang muncul di bawahnya postingan blog. Related post tersebut muncul bisa hanya berupa tulisan judul artikel saja atau bisa juga berupa tulisan judul artikel disertai gambar thumbnail.

Supaya jelas, lihat gambar di bawah!

Contoh : Related post

Itulah yang dimaksud dengan related post atau artikel terkait.

Lalu bagaimanakah cara membuat related post yang ada gambar thumbnailnya seperti contoh gambar di atas?

Cara membuatnya adalah sebagai berikut :

Copy dan paste'kan kode html related post berwarna merah di bawah ini tepat di atasnya kode html </head> yang ada dikolom edit html halaman dasbor blog kamu.

<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->

Keterangan :
Ganti angka 100 dan 80 berwarna hitam di atas dengan angka lain sesuka hatimu untuk mengubah ukuran besar kecil gambar thumbnail related post blog kamu.

Kemudian copy dan paste'kan kode html berwarna merah di bawah ini tepat di bawahnya
kode html ini <div class='post-footer-line post-footer-line-3'>!

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'> <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_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=8; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

Keterangan :
Ganti angka 8 berwarna hitam di atas dengan angka 4 jika kamu menghendaki related post yang muncul di bawah postingan blog kamu jumlahnya hanya ada 4.
 

Kalau sudah klik tombol pratinjau template dulu, bila tidak terjadi error, selanjutnya klik tombol simpan template!

Contoh situs web yang ada related post atau artikel terkaitnya yang ada gambar thumbnailnya, mau melihatnya? silahkan klik disini!

Seperti itulah cara membuat related post / artikel terkait blog yang ada gambar thumbnail'nya, mudahkan? selamat mencoba semoga kamu berhasil.

NB :
Kode HTML related post / artikel terkait yang tidak ada gambar thumbnailnya.   

 <script type='text/javascript'>
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;}
    function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write(''); while (i < relatedTitles.length && i < 20) {
    document.write('<b><span style="font-family: Verdana,sans-serif;">&#10142; <a href="' + relatedUrls[r] + '" style="text-decoration:none;">' + relatedTitles[r] + '</a></span></b><br>'); if (r < relatedTitles.length - 1) { r++; }
    else { r = 0;} i++;} document.write('');}
    //]]>
    </script>

  
Paste kode HTML di atas di atasnya </head>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=9&quot;' type='text/javascript'/> </b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b><u>Artikel Terkait :</u></b> <!--<b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>-->
<p><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
  </script></p>
</b:if>     

Paste kode HTML di atas di bawahnya <div class='post-footer-line post-footer-line-3'>

---

Tags: #Tips dan trik blogger