Cara Membuat Related Post Thumbnail

Cara Membuat Related Post Thumbnail – Setelah lama tak update blog ini sekarang aku mau share Cara Membuat Related Post Thumbnail di blog. Dan fungsi related post ini adalah untuk menyajikan Artikel Post terkait dengan artikel yang sedang dibuka oleh user saat itu.

Cara membuat related post thumbnail yang ini memang agak berbeda dengan yang lain karena tampilan related post thumbnail yang satu ini agak unik sedikit.

Cara Membuat Related Post Thumbnail

 

Oke daripada Anda penasaran yang berkepanjangan langsung aja masuk ke cara membuatnya berikut ini :

 

• Login Akun Blogger.


• Masuk ke Template > Pilih Edit HTML > centang pada Expand Template Widget. Back Up dulu Template kalian untuk jaga-jaga jika terjadi kesalahan.


• Terus coba Anda cari kode ]]></b:skin> dan sudah ketemu silahkan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}

#related-posts h2{font-size: 1.6em;font-weight: bold;color: #585858;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}

#related-posts a{color:#51432f; Border-left: 1px solid #eee8e1; Border-right: 1px solid #eee8e1; margin-right: 5px; margin-left: 5px;}

#related-posts a:hover{color:#000000;}

#related-posts a:hover {background-color:#d4eaf2;}

• Kemudian cari lagi kode <div class=’post-footer-line post-footer-line-1′> atau <p class=’post-footer-line post-footer-line-1′>


• Setelah ketemu silahkan paste kan kode dibawah ini tepat dibawah kode di atas.

<!– Related Posts with Thumbnails Code Start by Supercoolzz–>

<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=12&quot;’ type=’text/javascript’/></b:if></b:loop>

<b>Silahkan Baca Juga Artikel Terkait Lainnya: </b>

<div style=’background:#faf7f5; margin: 0px auto; padding: 5px;width:98%;float:left;height:100%’>

<marquee align=’center’ behavior=’alternate’ direction=’left’ onmouseout=’this.start()’ onmouseover=’this.stop()’ scrollamount=’2′ width=’100%’>

<script type=’text/javascript’>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

</div>

</div><div style=’clear:both’/>

</b:if>

<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>

</b:if>

</b:if>

<!– Related Posts with Thumbnails Code End by Supercoolzz–>

• Tulisan yang warna biru “Silahkan Baca Juga Artikel Terkait Lainnya:” boleh Anda ganti sesuai dengan selera anda. Sedangkan kode yang berwarna pink tersebut adalah merupakan kode warna background Related Post, dan angka yang berwarna hijau adalah merupakan angka jumlah related post yang ingin ditampilkan.


• Sampai disini masih belum siap lagi karena Anda harus cari lagi kode </body>


• Setelah ketemu kode </body> letakkan lagi kode dibawah ini tepat diatas kode tersebut.

<!–Related Posts with thumbnails Scripts and Styles Start by Supercoolzz–>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<script src=’http://supercoolzz.googlecode.com/files/relatedpostwiththumbnails2.js’ type=’text/javascript’/>

</b:if>

<!–Related Posts with thumbnails Scripts and Styles End by Supercoolzz–>

Cara Membuat Related Post Thumbnail yang satu ini memang agak rumit tapi hasilnya juga pasti lebih memuaskan. Tapi perlu Anda ingat karena script related post thumbnail ini hanya berfungsi bagi mereka pengguna Blogger atau Blogspot.

Cara Membuat Related Post Thumbnail