Related Post Thumbnails selain LinkWithin di Blogger

Selamat Malam Sobat MuNa, kali ini saya akan berbagi ilmu memasang Widget Related Post dengan Thumbnails selain memakai LinkWithin pada Blogger/Blogspot. Cara ini saya termukan ketika saya mencoba membuat Related Post Thumbnails dengan LinkWithin, tetapi tidak bisa karena terus saja keluar komentar pesan kesalahan dari blogger.
Bagi Sobat MuNa yang tidak bisa membuat Related Post Thumbnails dengan LinkWithin bisa menggunakan Cara yang akan saya tunjukan. Kira-kira hasilnya akan seperti ini :

Ok, terus bagaimana cara nya ?
Mari kita lanjutkan untuk membahas semua langkah-langkahnya :

Cara Membuat Related Post Thumbnails selain LinkWithin di Blogger

Step 1 : Masuk ke Blogger Dashboard >>Template >> Edit HTML >> Lanjutkan .

Step 2 : Cecklist tulisan "Expand Template Widget".

Step 3 : Ctrl + F dan ketikan </head>.

Step 4 : Copy dan Paste kode dibawah ini di atas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><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 type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nuYlwhoeKwB-UZUJOC20vMvUytQ5SGYTHYOEh7C0_hn4QZw1PLDzvXUWWZTF3aZAlmk8ikeBY06DCgD6tYrYexSLF7wJh-mEI2y0J7B9EIzTxoQBh67vayINtAQ6nIgGrvWeit8bgsB-/s1600/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

Catatan :
* Untuk merubah gambar default ketika gambar tidak tersedia, ganti URL yang berwarna merah dengan URL milik Sobat.
* Untuk menampilkan jumlah related post, ganti angka 5 sesuai kebutuhan sobat.
* Hapus kode yang berwarna Hijau jika Related Post ingin ditampilkan di halaman Home juga.

Step 5 : Sekarang cari kode <div class='post-footer-line post-footer-line-1'>, tapi jika tidak sobat menemukannya, bisa cari kode <data:post.body/>.

Step 6 : Copy dan paste kan kode dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'> atau <data:post.body/>.

<!-- Related Posts with Thumbnails Code Start--><!-- remove --><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><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:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style='clear:both'/><!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOV0sHSBfvoSG5HGKa5XA0jt3rca-3zHBgmvSTA7O6wTSOdZvee0C9tMdJNIgXCPDtRBiOu9qMQBA6UWG-Xos4-HcUm3Ihm9hgoxo9BZNThyDW4Ryfo6wOQb6DMRZSDzLXNfnPPR-tila0/s1600/best+blogger+tips.png'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->

 Catatan :
* Hapus kode yang berwarna Hijau jika Related Post ingin ditampilkan di halaman Home juga.
Step 7 : Simpan Template.
Kira-kira begitulah Cara membuat Related Post Thumbnails selain menggunakan LinkWithin di Blogger.


http://m-nasirudin.blogspot.com/2012/07/cara-membuat-related-post-thumbnails-selain-linkwithin-di-blogger.html.html.