loading...

Cara Mudah Membuat Related Post Atau Artikel Terkait dengan Thumbnail Atau Gambar Di Blog

Posted by

Cara Praktis Membuat Related Post dengan Gambar atau Thumbnail di Blogspot di Bawah Postingan.


Untuk melengkapi dan memperindah blog, kadang seorang blogger perlu sedikit merenovasi tampilan blognya agar lebih keren salah satunya dengan membuat related post atau artikel terkait dengan gambar atau thumbnail dibawah postingan. Selain membuat keren sebuah blog, fungsi related pos juga bisa memandu pembaca untuk mencari artikel lain yang se label atau sejenis dengan yang sedang dibacanya, jadi sangat membantu pembaca untuk lebih mengeksplore blog atau web kita.

Berikut langkah-langkah sederhana untuk membuat related post di bawah postingan blog.

Langkah pertama,masuklah ke dashboard blog anda dan Klik atau masuk ke menu Template, kemudian Klik edit HTML. Menggunakan Cttrl F carilah kode </head>

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

<!--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-->

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

Setelah langkah di atas selesai, carilah kode  <div class='post-footer'>

Selanjutnya Copy + Paste kode di bawah ini DI ATAS kode <div class='post-footer'>

<!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
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-->

Catatan: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil. Misalnya angkanya mau diganti 6 atau 7 juga boleh, atau jadi 3 atau 4 juga tidak ada-apa.

Setelah langkah-langkah diatas dilakukan semua, jangan lupa klik Save dan silahkan cek tampilan postingan blog anda. Jika langkah dan kode yangdipakai tidak ada kesalahan maka dibawah postingan anda sudah akan tercantum related post dengan gambar / thumbnail. Selamat Mencoba....
(Sumber kode HTML:Contohblognih.com)

loading...

FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Peternakan dan Herbal Updated at: 15:31
Copyright@2014-2016. www.AgrobisnisInfo.com . Powered by Blogger.