Cara Memberi Related Posts Di Blog Dengan Gambar Terbaru ~ Tutorial Bangsat

Tutorial Bangsat - Kali ini membahas tentang cara membuat related post dengan foto atau gambar thumbnail (Related Posts with Thumbnail Image) ini dibuat terkait pertanyaan dan permintaan seorang pengguna template New Johny Wuss. Ia ingin menggunakan posting terkait yang menampilkan foto dan judul.

Tutorial BangSat menggunakan kode related post dengan gambar yang di-share oleh Help Blogger dengan sedikit modifikasi dan "membersihkannya" dari kemungkinan ada injeksi link.

Pengguna template New Johny Wuss lainnya boleh mempraktekan ini. Caranya, sebelumnya HAPUS dulu SEMU kode di template yang bertuliskan "related post, lalu lakukan dua langkah mudah berikut ini

Cara Membuat Related Post dengan Gambar di Blogspot

1. Copy + Paste kode di bawah ini DI ATAS kode </head>

<b:if cond='data:blog.pageType == "item"'>
<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>

Catatan: kode berwarna biru adalah ukuran gambar/foto yang akan ditampilkan, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

2. Copy + Paste kode di bawah ini DI ATAS kode <div class='post-footer'> (di template New Johny Wuss ada dua kode begini, pilih kode YANG KEDUA):

<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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

Catatan: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

Jangan lupa SAVE Template! Good Luck and Happy Blogging!

Terima Kasih telah membaca artikel tentang Cara Memberi Related Posts Di Blog Dengan Gambar Terbaru . Silahkan baca artikel lainnya di daftar isi.

Unknown

Judul : Cara Memberi Related Posts Di Blog Dengan Gambar Terbaru .
Ditulis oleh : Unknown .
Pada hari : Saturday 23 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+