Cara Membuat Related Post Dengan Gambar Di Blog [UPDATE]

Cara Membuat Related Post Dengan Gambar Di Blog

1.       Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

2.       Cari kode </head> 

3.       Letakkan kode HTML/JavaScript dibawah ini diatas kode </head>.

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;} #related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;} #related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;} #related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;} .tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left} .tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRaIkRtCgF6FLeLwL1SwGVeQfCKXY-WkPbe2Z45gm0XntUwblV_tlGh41Evw6yIg89x1O_y3YEQivzEuWDUHCEVZkPPJ3Ew3-VGFFTAaauB9ZyRXwr_TLgr9GKaTEhOCIpiHa9MwGGNEo/s1600/bt.png) no-repeat top;} .tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRaIkRtCgF6FLeLwL1SwGVeQfCKXY-WkPbe2Z45gm0XntUwblV_tlGh41Evw6yIg89x1O_y3YEQivzEuWDUHCEVZkPPJ3Ew3-VGFFTAaauB9ZyRXwr_TLgr9GKaTEhOCIpiHa9MwGGNEo/s1600/bt.png) no-repeat bottom;} </style> <script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTu8jidRss9Ga7pBjva9NrF_kJV-M8IDH4n7dm13A7tKs_Bh5iam_VLMi-Pkof2fCDsNXLufecE0PnYpkCAJd_z7WE77hmwDdq8UAWUs576I3UinWl_BIO95H-wwTnpCVxGWkSL4-rWNA/s1600/noimage.jpg';</script> <script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script> </b:if>

4. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> . Letakkan kode HTML/JavaScript dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>. Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'>  yang pertama.

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <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_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop> <h3> Related Posts</h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> <div style='clear:both'/> </b:if>

5.       Preview/Pertinjau dulu untuk melihat tampilan hasilnya.

6.      Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai    merah jika anda ingin merubahnya.

7.       Save/Simpan.

Semoga artikel Diaz ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di TUTORIAL BLOGSPOT  berikutnya.