Cara Membuat Recent Post Grid Sesuai dengan Label | Mudah dan Cepat

Hai sobat AS! Bertemu lagi dengan saya blogger yang selalu ingin berbagi. Kali ini saya akan akan membagikan tutorial cara membuat recent post di blog. Mungkin ada yang belum tahu apa itu recent post?? Recent post adalah widget yang menampilkan postingan yang terbaru/update post di blog kita. Recent post yang akan saya bagikan ini sangat cocok dengan blog game dan software.

Recent post ini saya dapatkan dari salah satu blogger yang terkenal ddi Indonesia,yaitu Blog Dunia Blanter. Recent post yang akan saya bagikan ini memiliki 2 style. Style yang pertama sangat cocok untuk blog yang sederhana/simple dan flat. Style yang kedua cocok untuk blog yang elegan dengan tombol downoad.

Style 1



Style 1

Ok langsung saja berikut langkah membuat grid recent post berdasarkan label:

Langaka Pertama Masuk kedasbor blogger > tat letak > tambahkan gadget > HTML JavaScript

Masukkan kode dibawah ini ditab untuk menambahkan gadget yang telah kita buka tadi

<script>
document.write("<script src=\"/feeds/posts/default/-/Android?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
</script>

Perhatian!!
Ganti kode yang berwarna merah dengan label yang ingin ditampilkan recent post

Langkah Kedua Buka template > Edit HTML
Salin dan masukkan kode dibawah ini tepat diatas kode </body>

<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/AVvXsEilnratc9i-ip_6nPpJBzeC5L0N6UTsYIdyNfB4gh0zikecMVpxbIz1JdGw5R62jQte2W3pZCpoXW4WE2ZNvnBq0v3d4n02PvQuHWgcoYwuHIm77e7MEWWCx5aiA53VVWmXECDsbS_zEULD/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('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');document.write('<a class="btndown" href="'+i+'" target ="_blank">Download</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>

Perhatian!!
Ganti kode yang berwarna merah dengan kata yang sobat inginkan Gunakan perintah CTRL+F untuk mencari kode

Langkah terakhir Silakan pilih style yang sobat inginkan dan salin kode stylenya lalu letakkan diatas kode ]]></b:skin> atau </style>



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 1

/* 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}}

Lalu klik simpan...

Selesai dan lihatlah hasinya...Itulah tutorial tentang cara membuat recent post grid sesuai dengan label semoga artikel yang saya bagikan ini bisa bermanfaat bagi sobat blogger.