Cara Memasang Related Post Dengan Thumbnail Manual

Saya mendapat ilmu baru ketika sedang blogwalking, dan kali ini saya akan membahas "Membuat Related Post With Thumbnail Manual"... Untuk melihat yang otomatis silahkan kunjungi Cara Memasang Related Post Dengan Thumbnail.

Gambar kotak share merupakan artikel yang tidak memiliki gambar

Gambar tersebut hanyalah ilustrasi dari "Related Post Dengan Thumbnail Manual" namun gambar yang keluar tentu saja berbeda dengan blog yang anda punya. Selain itu, review tersebut terdapat pada blog uji coba saya
Oke langsung saja tanpa basa basi
1. Login ke blog anda --> Rancangan --> Edit HTML klik Expand Template Widget untuk memberi tanda centang
2. Cari kode ini </head>
3. Ganti kode tersebut dengan

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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.6em;
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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Kemudian cari lagi kode ini

<div class='post-footer-line post-footer-line-1'>

Jika anda tidak menemukannya, cari kode berikut

<p class='post-footer-line post-footer-line-1'>

5. Kalau sudah ketemu, letakkan kode ini dibawah kode yang anda temukan dari kode diatas

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' 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="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Simpan Template.. SELESAI!! Kini anda memiliki kode tanpa embel embel LinkWithin
*Cara ini hanya alternatif dari LinkWithin
** Edit kode ini untuk menampilkan berapa post yang akan ditampilkan

var maxresults=5;

***Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts";

Demikian Semoga membantu kalian...

Tweet

Artikel Terkait: