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.
- 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
semoga Tutorial Blog - Cara Menampilkan Label dengan Gambar bermanfaat
