Ok Gan.. kali ini kita akan membahas bagaimana sih cara membuat sebuah recent post berupa Grid dengan Berdasarkan pada label.. Jadi ini nantinya akan tampil kotak secara mendatar / horisontal. Ok langsung saja ya ndak perlu panjang lebar..
Langkah Pertama silahkan anda buka Blogger > Tata Letak
Tambahkan atau Edit Widget HTML/Javascript dan silahkan kalian masukkan script dibawah ini
<script>
document.write("<script src=\"/feeds/posts/default/-/Desain?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
Perlu diketahui bahwa script diatas adalah script pemanggil label mana yang akan kalian tammpilkan dalam bentuk Grid.
Silahkan kalian ganti Desain Menjadi Label yang mau kalian tampilkan pda recent post.
Langkah Kedua silahkan anda Buka Template > Edit HTML
Lalu masukkan kode javascript dibawah ini tepat diatas kode </head>
<script type="text/javascript">
var numposts = 6;
var showpostthumbnails = true;
var showpostdate = false;
</script>
<script type="text/javascript">
//<![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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Hi1sK6XSMsGqSlmuK-DrNNIHzZcCm3LgF8DDtlT4taA7s03FT9ni3woSdIfwZ3KJevlizfgDH9hpfog8Nw2nxg5x1AVDu6mmUbdpxYgfYtToNCI9UjqhuC3KXTFO-eSw7HVNqyLZxJ7f/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="recentlist">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<b><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></b>');document.write('
');document.write('<a class="btndown" href="'+i+'" target ="_blank">Enter</a>');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>
Jika kalian ingin mengganti Teks "Enter", silahkan ganti Teks Enter dengan teks Tombol yang kalian inginkan.
Langkah ketiga adalah memilih Style... disini kita sertakan ada 2 style yang bisa anda pakai dan bandingkan sendiri mana yang kalian suka.. ingat.. pilih salah satu aja ya..
Silahkan Copy dan Letakkan diatas Kode ]]></b:skin>
atau
Style 1
/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}
.recent-by-tag .btndown{display:none}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}
Style 2
/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}
.recent-by-tag .btndown:hover{color:#fff;background:#88c425}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}
Nah seperti itu Gan, Semoga ilmu ini dapat bermanfaat untuk memperindah Blog Sobat.
Salam.