Cara Membuat Related Post Bergambar Pada Blog


Assalamu'alaikum Warahmatullahi Wabarakaatuh...

Zazuli's Blog - Berjumpa lagi dengan Blog yang sederhana ini, pada kesempatan kali ini saya mecoba berbagi tentang cara Membuat Related Post Pada Blog, Related Post ini lumayan keren lah, hehe, karena ada gambar Thumbnail-nya. Related Post digunakan untuk menampilkan postingan-postingan terkait pada blog sobat, berdaraskan Label/ Kategori Artikel yang sobat posting.

Berikut nih Screenshoot Related Post-nya. Kebetulan Related Post ini saya pakai juga pada blog saya. :)

Related Articles On Zazuli's Blog
Untuk mempersingkat waktu langsung aja praktek deh....

  • Pertama Silahkan login pada blog sobat.
  • Klik Template kemudian Edit HTML
  • Beri Centang pada Expands Templates Widget
  • Cari kode </head> dan taruh/ copy kan Script Code berikut  tepat sebelum/ diatas kode  </head>. Gunakan Ctrl + F untuk memudahkan sobat dalam mencari kode </head>.

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: black;
font-family: Arial,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#009df2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://4.bp.blogspot.com/-wYfjjsSQoVs/URr0S-rtXRI/AAAAAAAABIc/6CWKkRTPXYg/s1600/NoImage.jpg&quot;;
var maxresults=8;
var splittercolor=&quot;#FFFFFF&quot;;
var relatedpoststitle=&quot;Related Post:&quot;;
</script>
<script src='http://backup-panda.googlecode.com/files/RelatedPoststhumb3.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

  • Lalu copy-kan Script Code berikut setelah Code <data:post.body/>. Jika blog sobat menggunakan fitur Read More Pada Homepage Blog sobat, biasanya akan ada 2 atau lebih Code <data:post.body/> pada blog sobat. Taruh saja setelah kode yang ke 2. 

<!-- Start Related Posts-->
<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=7&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>
<!-- End Related Posts-->


  •  Kemudian klik Simpan Template dan lihat pada salah satu postingan sobat.


Pada Script Code diatas ada yang sengaja saya beri warna. Untuk code yang berwarna biru itu adalah code warna, untuk yang berwarna ungu adalah gambar thumbnail default dari postingan sobat yang tidak ada gambarnya. Untuk yang berwarna merah adalah Judul dari Related post sobat, dan angka 8 yang berwarna oranye adalah maksimal artikel yang akan ditampilkan pada Related Post. Sobat bisa merubah itu semua sesuai dengan keinginan sobat.

Demikianlah posting How To kali ini, yang membahas tentang Cara Membuat Related Post Bergambar Pada Blog, semoga dapat bermanfaat untuk sobat pembaca, jika masih ada yang ditanyakan mohon komentar. Sekian dan Terimakasih,. 

11 komentar

gmn cara ngelebarin tiap kotak related postnya?
tolong bantuannya!

Reply

untuk mengubah nya ubah dibagian javascript... nya kwn.

http://backup-panda.googlecode.com/files/RelatedPoststhumb3.js

Reply

.. punya aq kok gak keluar ya?!? huhh ..

Reply

mungkin mbaknya ad yg salah, coba diulangin lagi ^^

Reply

Sudah dicoba dan memuaskan hasilnya, terima kasih gan. Salam sukses.

Reply

very good posting, I have tried but have not succeeded, roughly where the blame lies. please refer bloggermendalo.blogspot.com

Reply

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply

Sangat membantu

Reply

Post a Comment

Terimakasih telah membaca artikel di Blog ini. Silahkan komentar untuk membuat Blog ini lebih sempurna. Mohon gunakan kata-kata yang sopan dan baku dan jangan melakukan spamming! ^_^