Artikel
blogger
Tips-Trik
Cara Menampilkan Postingan Berdasarkan Label dengan Gambar atau Thumbnails
![]() |
Contoh Postingan Berdasarkan Label dengan Gambar |
Untuk cara berikut biasanya digunakan untuk blog yang banyak menampilkan gambar seperti blog desain grafis, fotografi atau portal berita online atau majalah online lainnya. Pokoknya cara ini sangat cocok untuk menghias blog Anda agar lebih ramai dengan gambar dan memudakan orang yang mengakses blog Anda menemukan informasi lain di blog Anda dengan mudah. Maka dari itu berikut adalah cara menampilkan postingan berdasarkan label dengan gambar:
1. Login terlebih dahulu ke blog Anda
2. Langsung masuk saja ke halaman "Tata Letak"
3. Tambahkan widget / gadget dengan cara klik "Add Gadget / Tambahkan Gadget"
4. Pilih gadget/widget dengan tipe HTML/JavaScript
5. Copy-Paste atau masukkan kode di bawah ini ke dalamnya
<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/-/laris?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
6. Ubahlah kode yang dicetak merah di atas sesuai dengan keinginan dan kondisi Blog Anda. Adapun penjelasan dari kode tersebut adalah sebagai berikut:
- width:120px; adalah lebar gambar yang akan ditampilkan
- height:120px; adalah tinggi gambar yang akan ditampilkan
- var numposts =4 adalah jumlah postingan yang akan ditampilkan
- default/-/laris? adalah judul label yang akan Anda masukkan, nama label harus persis dan sama termasuk huruf kapitalatau tidaknya.
7. Klik Simpan/Save
8. Jalankan blog Anda dan sekarang blog Anda sudah ada tampilan beberapa postingan berdasarkan label tertentu dalam satu gadget. Menarik bukan?
Bagaimana? cara menampilkan postingan berdasarkan label dengan gambar sangat mudah kan? Bahkan Anda tidak memerlukan pemahaman kode html mendalam dan tidak perlu mengubah kode html template sehingga risiko blog kacau pun lebih sedikit karena tidak mengubah kode keseluruhan template. Anda yang newbie sekalipun akan sangat terbantu dengan tutorial yang sangat mudah untuk diikuti.
Langsung saja dipraktekkan di blog Anda. Langsung deh blog Anda terlihat seperti blog profesional.
8 komentar
THANKS BANTUANNYA, TAPI KOK GAK ADA JUDULNYA YANG MUNCUL??
ReplyDeleteBAGAIMANA CARA MUNCULKAN JUDULNYA???
memang tidak ada judulnya kak, hanya gambar aja..
DeleteMantabb langsung dicoba nih di blog saya gan, pas hhe thanks ya
ReplyDeleteTerimakasih, semoga bermanfaat
DeleteGan, itu masukkan gambarnya gimana, jika misal semua pos tak ada gambarnya? jadi gambar cuma ada di homepage, tapi saat buka posnya gak ada gambarnya
ReplyDeleteSemua Post harus disertai gambar
DeleteMantap jaya..
ReplyDeletesilahkan kunjungi website kami tentang mobile legends!
https://www.gmaell.com/
eMudhra Limited is a certified body, licensed by the Government of India. eMudhra operates in accordance with the guidelines set out in IT legislation. By issuing more than a million certificates, eMudhra provides digital credentials for all types of customer income tax, MCA (ROC), tenders, foreign trade, banking, rail, and many other needs.
ReplyDeleteApply eMudhra DSC in Delhi