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:

Artikel Terkait

• Cara Memasang Related Post Dengan Thumbnail
• Cara Memasang Related Post Dengan Fungsi Scroll
• Cara Memasang Related Post

Trick Blog

• Trick Blog | Recent Post With Thumbnail Horizontal
• CSS3 | Transform Rotate : Memutar Text / Gambar
• Trick Blog | Berbagai Macam Cursor
• CSS3 | Create Beautiful Button
• CSS3 | Create Bubble Coda Style
• CSS3 | Membuat Background Pada Web Full Page
• Membuat Facebook Fans (Like Box) Pada Blog
• Membuat Background Efek Gradient Dengan CSS3
• Menyembunyikan Avatar Pada Komentar Blog
• Cara Memberikan Image Verification Pada Komentar

Post

• Memasang Random Post (Part 2)
• Fungsi Scroll Pada Posting
• Recent Post Animated With jQuery
• Membuat Daftar Isi Otomatis
• jQuery Accordion Recent Post with Thumbnail
• Cara Membuat Navigasi Breadcumb Di Blogger
• Cara Membuat Huruf Pertama Besar (Drop Cap Pada Blog)
• Cara Menghilangkan Tanggal Pada Posting
• JavaScript Untuk Menampilkan Total Post, Comment Dan Online User
• Cara Menghilangkan Nomor Post Pada Label