Kali ini saya akan share tutorial Membuat Releated Post hanya dengan Tumbnail di blog. Jadi kita hanya memasang releated post yang terlihat gambar posting saja, dan saat disorot mouse akan terlihat judul posting tersebut. Ini berguna bagi para pengunjung agar tertarik dengan posting tersebut.
Jika ingin memasang di blog anda langsung saja ikuti langkah - langkah berikut ini:
1. Login ke Blogger
2. Masuk ke Tata Letak >> Tambah Widget >> Html/Javascript3. masukan kode dibawah ini<script type='text/javascript'>
//<![CDATA[ function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}} var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;} else thumburl='';} document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>'); if(i!=(numposts-1)) document.write('');} document.write('</div>');} //]]> </script> <script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="http://habluezshare.blogspot.com/feeds/posts/default/?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><style> /*** Labels Thumbs ***/ img.label_thumb{ float:left; border:1px solid #ccc; width:96px; height:110px; margin-right:5px;margin-left:5px; margin-bottom:10px; } </style>*Ganti yang berwarna biru dengan jumlah yang akan ditampilkan
*Ganti yang berwarna merah dengan alamat blogmu4. Simpan
Demo dapat dilihat di: http://template-mu.blogspot.com/ cek dibawah.
Selamat Mencoba!!!
0 comments:
Post a Comment