Tutorial Blog - Cara Menampilkan Label dengan Gambar

Tutorial Blog - Cara Menampilkan Label dengan Gambar

Tutorial Blog kali ini bagaimana cara menampilkan sebuah post dengan label tertentu dalam bentuk gambar?

Secara manusiawi mata sangat peka terhadap gambar, dengan kita menampilkan postingan kita dengan gambar, bisa juga di katakan sebagai teknik seo yang sangat efisien. Untuk tutorial ini kita bisa menempatkan post di widget atau sidebar bagian samping, maupun sidebar bagian bawah. Untuk demo anda bisa KLIK DISINI

Berikut Tutorial Blog - Cara Menampilkan Label dengan Gambar

1. Login ke blog anda

 

2. klik tata letak kemudian tambah gadget

3. Tambahkan HTML/javascript
di bawah ini

<style>         /*Katagori Gambar*/         img.label_gambar{         float:left;         padding:5px;         width:120px;         height:120px;         margin-right:1px;         margin-bottom:1px;         }     </style>         <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_gambar" src="'+thumburl+'"/></a>');         if(i!=(numposts-1))         document.write('');}         document.write('</div>');}         //]]>         </script>         <script type='text/javascript'>var numposts =4;</script>         <script type="text/javascript" src="/feeds/posts/default/-/Dangdut Romansa?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

4. Keterangan width : lebar gambar, sedangkan height : tinggi,var numberpost : berapa jumlah label yang akan anda tampilkan,ganti dangdut romansa dengan label anda

5. Kemudian klik simpan

demikian cara menampilkan post atau label dengan gambar
semoga Tutorial Blog - Cara Menampilkan Label dengan Gambar bermanfaat
Ikatlah ilmu dengan menulisnya