Membuat Widget Label Tertentu dengan Thumbnail di Bawah Postingan
Snippet Widget
Widget ini akan menampilkan artikel terbaru dari masing-masing label yang dipilihkan. Cocok digunakan pada blog magazine dan blog personal.
Jika tertarik memasang widget ini, silahkan ikuti tutorialnya berikut.
Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blog
1. Login ke blogger, masuk ke dashboard blog anda, lalu klik pada menu Template > Edit Template.
2. Cari kode </style> atau </b:skin> lalu letakkan kode CSS berikut ini tepat di atasnya.
/* Recent By Label www.naminakiky.com */
#tag1, #tag2{margin:0;padding:0 0 30px;width:100%}
#tag1-wrapper h2,#tag2-wrapper h2,#tag1-wrapper h3,#tag2-wrapper h3 {color:#333;text-transform:capitalize;font-size:140%;font-weight:400;padding:15px 0;margin:0 0 15px;border-bottom:1px solid #eee}
#tag1-wrapper .recent-by-tag li,#tag2-wrapper .recent-by-tag li{width:30%;margin-right:5%;margin-bottom:30px;display:block;float:left}
#tag1-wrapper .recent-by-tag li:last-child,#tag2-wrapper .recent-by-tag li:last-child{margin-right:0}
#tag1-wrapper .recent-by-tag img,#tag2-wrapper .recent-by-tag img{width:100%;height:130px}
#tag1-wrapper .recent-by-tag li a,#tag2-wrapper .recent-by-tag li a{color:#454545}
#tag1-wrapper .recent-by-tag li a:hover,#tag2-wrapper .recent-by-tag li a:hover{color:#349acb}
#tag1-wrapper .recent-by-tag li .showdates,#tag2-wrapper .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:bold;color:#a7b0b7}3. Karena widget ini akan diletakkan dibagian bawah postingan, maka anda perlu menambahkan kerangka baru, dengan cara; temukan kode berikut
<b:section class='main' id='main' showaddelement='no'>Lalu susutkan dengan mengklik bidang (segitiga) tepat sejajar disisi kirinya, sehingga menjadi seperti ini
<b:section class='main' id='main' showaddelement='no'>...</b:section>4. Kopi kode berikut ini dan letakkan di bagian bawah kode yang disusutkan tadi.
<div id='tag1-wrapper'>
<b:section class='tags1' id='tags1' showaddelement='yes'>
<div class='clear'/>
</div>
<div id='tag2-wrapper'>
<b:section class='tags2' id='tags2' showaddelement='yes'>
<div class='clear'/>
</div>5. Cari kode </head> lalu letakkan kode di bawah ini tepat di atasnya.
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var showpostdate = true;
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="https://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>6. Cari lagi kode </body> lalu letakkan kode berikut ini tepat di atasnya.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('#tag1-wrapper img,#tag2-wrapper img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//]]>
</script>7. Simpan template.
8. Masuk atau klik Tata Letak
9. Untuk memasukkan script pemanggil widget label tertentu caranya ialah, klik Tambahkan Gadget > HTML/JavaScript, lalu letakkan kopi kode berikut ini dan paste ke kolom yang tersedia.
<script>
document.write("<script src=\"/feeds/posts/default/-/Widget?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>Perhatikan :
Kata Widget pada kode di atas adalah nama label, sesuaikan kata tersebut dengan label yang ingin ditampilkan.
10. Jangan lupa Simpan.
Ukuran thumbnail silahkan sesuaikan dengan lebar blog anda dengan mengedit CSS pada langkah 2. Demikian cara membuat Widget Label Tertentu dengan Thumbnail di Bawah Postingan. Sumber: Arlina Design.