Berita Terbaru :

Membuat Releated Post hanya Tumbnail di blog




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


Posting Komentar

Kami akan mengkonfirmasi komentar Anda pada alamat ini ketika anda meninggalkan komentar di blog ini. Tinggalkan komentar anda jika perlu.

Daftar Isi

 
Return to top of page Copyright © 2010-2014 | Stelitec Informatika