Cara Membuat Related Post Dengan Thumbnail Di Blog

Cara Membuat Related Post Dengan Thumbnail Di Blog
My Dream ○ Hai sobat My Dream apa kabar?.semoga semuanya tetap sehat ya agar bisa selalu mengunjungi artikel-artikel terbaru dari My Dream.Oke sobat untuk artikel saya kali ini,saya akan sedikit membahas tentang Cara Membuat Related Post Dengan Thumbnail Di Blog.Nah artikel saya yang satu ini juga merupakan sebuah request dari sobat saya yang bertanya pada saya " Gan Bagaimana Sih Cara Membuat Related Post Yang Ada Gambarnya Aja".Nah dari sana saya sempat berjanji pada dia untuk membuat postingan ini.Tapi bukan berarti postingan ini hanya untuk orang itu aja ya hehehe bukan.Postingan ini juga dikhususkan untuk para Blogger yang mungkin ingin menambahkan Related post ini ke dalam Postingannya.
Nah sobat tau tidak fungsi dari Related Post?.Fungsi related post yaitu untuk menampilkan beberapa postingan kita yang terkait dengan postingan yang sedang dibaca oleh visitor.Tapi postingan yang ditampilkan pun harus sesuai dengan label postingannya.Jadi jika sobat belum tahu fungsinya maka jangan asal pasang ya sobat,ntar bukannya malah jadi tambah keren Blognya malah tambah hancur. :V.Oke sobat dari pada sobat makin penasaran kita langsung saja pada topik kita.Silahkan sobat ikuti tutorial berikut ini.

  • Pertama masuk dulu ke Blog sobat.
  • Setelah sobat masuk ke Blognya maka silahkan klik Template > Edit HTML.Dan carilah kode </head> agar lebih mudah gunakanlah CTRL+F di kotak HTML tersebut.
  • Sekarang Copylah kode dibawah ini dan taruh tepat diatas kode </head> tadi.
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->  
Catatan: Kode yang berwarna biru silahkan dengan ukuran yang sobat inginkan untuk ukuran foto/gambarnya,ubah saja sesuai selera.
  •  Langkah keduasilahkan sobat copy kode dibawah ini dan pastekan diatas kode <div class='post-footer'>.Di beberapa Template kadang mempunyai 2 Kode ini silahkan pilih kode yang kedua.
<!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Catatan: Silahkan sobat ganti Kode yang berwarna biru dengan jumlah postingan yang ingin sobat tampilkan dalam Related Post sobat. 
  •  Terakhir silahkan sobat Save Template Sobat.
Inilah contoh SS related postnya dan mungkin sobat sukai......

Related Post dengan Gambar
Oke sobat sekian dulu Artikel dari saya dan semoga bisa bermanfaat untuk sobat semua.Jangan lupa untuk selalu meninggalkan komentar dan like sobat di Blog saya ini.Semoga berhasil sobat dengan tutorialnya.

15 Responses to "Cara Membuat Related Post Dengan Thumbnail Di Blog"

  1. caramu bagus bro, makasih nih udah share

    ReplyDelete
  2. mantap gan,kunbal ya gan
    seosc.blogspot.com

    ReplyDelete
  3. kalo template belum ada related post perlu dicoba nih..sayang punya ane dah bawaan dari templat related post nya..hehe

    ReplyDelete
  4. Keren banget nih related post dengan gambar.. ajebb dah buat agan :)

    ReplyDelete
  5. keren banget tutorialnya sob :)
    tapi bisa tidak dibuat lebih ringan lagi sob, biar loading blog smakin speed. pengunjung jadi betah :)

    Kunbal ya sob....

    ReplyDelete
    Replies
    1. semua related post bergambar rata" berat ga tpi tergantung jugagan...tpi yg ini ngk terlalu berat kok gan.... :k

      Delete
  6. keren gan artikelnya sangat bermanfaat :)
    by Ziwipedia

    ReplyDelete

>>>>>Peraturan Berkomentar di Blogger Ini.<<<<<

[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Link aktif dalam komentar akan terhapus secara otomatis.
[+] Jika ingin menaruh Link Aktif Silahkan klik menu Tukar Link.
[+] Jika ingin berkomentar diluar topik postingan harap beri tanda OOT atau Klik Tombol OOT.
[+] Jika Ingin menggunakan Emoticon silahkan Klik Tombol Emoticon.
[+] Jika Ingin Request Tutor silahkan Klik Tombol OOT dibawah atau pergi ke Menu OOT.

Terima Kasih........

Konversi Kode Emoticon OOT