Habluez Share

Membuat Releated Post hanya Tumbnail di blog - Kali ini saya akan membagikan tutorial Membuat Releated Post hanya 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 silahkan ikuti langkah - langkah berikut ini

1. Login ke Blogger
2. Masuk ke Tata Letak >> Tambah Widget >> Html/Javascript
3. 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 blogmu


4. Simpan


Demo di Blogku yang lain : http://template-mu.blogspot.com/  cek dibawah

Selamat Mencoba - Membuat Releated Post hanya Tumbnail di blog

Description: Membuat Releated Post hanya Tumbnail di blog Rating: 5 Reviewer: 98827 ulasan Item Reviewed: Membuat Releated Post hanya Tumbnail di blog

Baca Juga Artikel Ini :