Cara Memasang Related Post Dengan Thumbnail, Sebelumnya blog ini pernah membahas tentang
Cara Membuat related juga di bawah postingan di antaranya:
Cara Cepat Dan Mudah Membuat Related Post Dengan Thumbnails.(menggunakan pihak ketiga)
Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll.
dan sekarang kita akan membahas tentang Cara Memasang Related Post Dengan Thumbnail dan tanpa pihak ketiga, alias kita harus memasangnya sendiri di blog sobat.

Sebelumnya saya basa-basi sedikit tentang Related Post Dengan Thumbnail/gambar kali ini, sebenarnya kegunaan related post di bawah postingan sangatlah bagus karna pengunjung setelah melihat/membaca tutorial kita maka meraka dapat melihat tutorial selanjutnya, apalagi jika related post kita mengguanakan gambar, pasti akan semakin menarik pengunjung untuk membaca tutorial selanjutnya, tapi tergantung menarik tidaknya gambar yang kita pasang, judul pun juga akan sangat menentukan ketertaikan pengunjung untuk membaca tutorial kita selanjutnya.

Oke dah segitu dulu basa-basinya walaupun gak nyambung, hehehe . . .

Kalo sobat ingin Memasang Related Post Dengan Thumbnail di bawah setiap postingan blog sobat,sobat cukup ikuti langkah-langkah berikut, cukup mudah kok caranya!
contoh related post dengan thumbnail
1. Log in ke blogger.

2. Pada Menu klik Rancangan ➨ edit HTML ➨ centang  Expand Template Widget, download dulu template sobat untuk mengantisipasi bila ada kesalahan..

3. Selanjutnya cari kode </head> ,jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML, jika sudah ketemu letakkan kode dibawah ini tepat diatasnya.

<!--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/AVvXsEimGc7lM5CM75sX0WO_V_oOtbvhphRd-f23M8QjAJStm3VtfjzWKef9o15WEvRuX0ziJd3AC7R2Nnk2epZMu9UnEh1cff118yjhpBBaE_io6i5Ja7nH7L1V4_BGw2ase81qwxyRCNLo-NE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Keterangan:
Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, sobat bisa merubahnya sesuai keinginan sobat.
Kode yang berwarna biru adalah judul dari widget related postsnya, sobat bisa merubahnya sesuai keinginan sobat, seperti artikel terkait dan sebagainya
.
4. Cari kode <data:post.body/> (jika sobat sudah memasang radmore otomatasi biasanya ada dua atau tiga kode <data:post.body/> jadi letakkan di bawah <data:post.body/> yang kedua ya.


<!-- 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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Klik save template.

Selesai sudah langkah-langkah Cara Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!

Posting Komentar Blogger Disqus

  1. bro,,cara bikin related post kaya punya situ gmna,,??

    BalasHapus
  2. kok punya ku gak keluar gan plisss jawab

    BalasHapus
  3. @Faris Hasbi AhmadAnda harus menerapkan Label dalam setiap postingan!!!

    BalasHapus
  4. sudah semua ada label nya
    tapi gak bisa

    BalasHapus
  5. @Faris Hasbi AhmadDIisni saya bingung dengan Anda.
    Anda telah copas semua artikel blog ini.
    Bagaimana mungkin sekarang Anda bisa bertanya kepada saya.

    Jika Anda menyertakan sumber hak cipta saya pasti akan membantu.
    Tapi Anda tidak menyertakan sumber sama sekali.
    Astagfirullah.....

    Perbaiki kesalahan Anda, dan hormati saya, baru Anda boleh kesini lagi. Jika Anda tidak menghormati lebih baik Anda jangan pernah kesini lagi.
    Karna saya tidak suka plagiat berkunjung disini.

    Anda telah masuh DMCA saya,

    BalasHapus
  6. Hatur Nuhun Juragan ....
    IT's WORK
    blog-walking
    id-card-murah.blogspot.com

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top