0 Cara Mebuat Related Post Dengan Gambar Thumbnail

Related post thumbnail atau Artikel Terkait dengan di sertakan gambar adalah salah satu trick penting dalam dunia blogging, kenapa penting? Karena cara seperti ini merupakan salah satu trick agar pembaca yang datang ke blog kita menjadi semakin betah membaca.

 Dengan adanya related post thumbnail maka mereka bisa membaca artikel yang berkaitan dengan isi postingan yang sedang mereka baca, dan kemungkinan juga di dalam related post tersebut ada salah satu artikel yang mungkin lagi mereka cari.

Baiklah tanpa basa-basi lagi saya akan mencoba memberikan tutorialnya bagaimana cara membuat Related Post Dengan Thumnail (gambar). Berikut Cara Mebuat Related Post Dengan Gambar Thumbnail di blogger

Perhatikan dan ikuti langkah-langkah di bawah ini :
1. Masuk ke akun blogger sobat
2. Klik Template --> Edit HTML
3. Centang  Expand Template Widget
4. Simpan kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;padding-left:5px;}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black; }
#related-posts a:hover{
color:black;
}#related-posts a:hover {
background-color:#d4eaf2;}
</style>
<script src='http://kangdansen.googlecode.com/files/relatedpostwiththumbnail.js' type='text/javascript'/>
</b:if>

5. Cari kode berikut: <div class='post-footer-line post-footer-line-3'>
6. Simpan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-3'>

<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Realted Post&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

7. Simpan template dan lihat hasilnya.

Selamat! Kini sobat sekarang sudah mempunyai related post dengan gambar thumnail. Semoga tutorial tentang cara membuat related post thumbnail di blogger dapat bermanfaat jika ada kesalahan dalam postingan saya minta maaf dan jika agan menemukan masalah dalam penerapan postingan ini silahkan tanyakan di form komentar.

Sumber artikel di ambil dari Tips Belajar Seo Blog

Description: Cara Mebuat Related Post Dengan Gambar Thumbnail Rating: 5.0 Reviewer: Unknown ItemReviewed: Cara Mebuat Related Post Dengan Gambar Thumbnail

Komentar →