cara membuat related post thumbnail

Related post thumbnail adalah suatu andalan blogger, cara membuat related post thumbnail di blog sangat beragam.Related post thumbnail pada postingan kali ini memiliki design yang menarik dan unik. Buat para blogger mania menggunakan widget related post thumbnail adalah salah satu cara meningkatkan trafik pengunjung blognya. Jadi tidak salah jika kita mengikuti prinsip para blogger mania tersebut untuk, untuk melihat tehnik pemasangan related post thumbnail paa halaman blog kesayangan anda, silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya setelah halaman terbuka lihat tulisan kuning " Related Post Thumbnail " nah itu dia tampilannya, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head> 
4. Copy Code script CSS dibawah ini, pastekan diatas code </head> yang anda cari tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*****************************************
Name : Widget Related Post Thumbnail
By : Rivai Silaban | Blog Design
Update : Selasa, 15 Oktober 2013
******************************************/
#bdrsrelated-thumbnail {
background:#cccccc;
padding:1px;
margin:10px auto;
}
#bdrsrelated-thumbnail h2{
color: #00CCFF;
margin:0;
padding:5px 0 10px 0;
font-family: Georgia;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
text-align: center;
}
#bdrsrelated-thumbnail a{
position:relative;
padding:15px;
margin:13px;
color:#990000;
background:#eee;
border-radius:10px;
font-family: Verdana;
font-size: 14px;
font-style: italic;
font-weight: bold;
border: solid #999999 1px;
background-color: #F4F4F4;
}
#bdrsrelated-thumbnail a:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:45px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#F4F4F4;
}
#bdrsrelated-thumbnail a:hover{
background-color:#999999;
}
#bdrsrelated-thumbnail a:hover:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:45px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#999999;
}/* CSS end Widget Related Post Thumbnail */
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWc3ygiQPtLivuco41wFusXqjIx2pW29flPDqiM0RPZYP6Uib7R_fCGgbfFwByZ8P6Rz1WYoJ8gh9JfgbYKRTidRtkN_dJQiBcZVt68vTysjsJF_GxXZCMusEP1tT9avnsTmxlv0t4NMU/s1600/no-gambar.jpg&quot;;
var maxresults=4;
var splittercolor="";
var relatedpoststitle=&#39;Related Posts Thumbnail&#39;
</script>
<script src='http://yourjavascript.com/421401735101/related-thumbnail.js' type='text/javascript'/>
</b:if>

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
• Save template anda dan lihat hasilnya, selamat atas keberhasilan anda.

lt;!--BDRS start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bdrsrelated-thumbnail'>
<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=4&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'/>
</b:if>
<!-- BDRS end related posts-->

Kesimpulan

Widget related post thumbnail ini memiliki tampilan yang menarik dan code yang ringan. Pemasangan widget related post thumbnail pada halaman blog kesayangan anda merupakan suatu trik jitu untuk meningkatkan pengunjung blog anda.

Bila anda mengalami kesulitan dalam memasang widget related post thumbnail ini pada template anda atau menemukan kode yang error silahkan hubungi saya atau anda bisa saja share bersama saya melalui form komentar dibawah ini. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda, Selamat berkarya.

Widget related post thumbnail
Selasa, 15 Oktober 2013
Owner BLOG DESIGN | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 6:12 PM