Membuat Recent Post Grid

Tutorial kali ini Saya akan membagikan tutorial Widget Recent Post Grid yang cukup menarik untuk kalian, widget ini saya buat dengan model Grid dan simple, tentunya widget yang satu ini sudah saya buat responsive agar menarik dilihat pengguna mobile.

Untuk Demonya Klik Di bawah ini

Demoo See It 

• Demo

Widget ini tentunya tidak akan muncul jika template kalian tidak ada Javascript ini di atas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>

Ok mulai saja tutorial saja dengan menambahkan CSS ini ke dalam Template blog kalian, kalian bisa meletakkannya dibawah <style> atau di atas </style>

/* CSS Recent Post Grid - zandask =============================== */ul.recent-posts-container{overflow:hidden;line-height:normal;list-style:none;padding:10px;margin:0}li.recent-posts-list{overflow:hidden;position:relative;margin:5px;float:left;width:31.5%;list-style:none;border:1px solid #ddd}img.recent-post-thumb{max-width:300px;max-height:130px;overflow:hidden;width:210px;height:130px;border:1px solid #ccc;padding:1px}li.recent-posts-list:hover:before{content:'';background:rgba(0,0,0,0.4);width:100%;height:100%;z-index:1;position:absolute;top:0;left:0;right:0;bottom:0}h3.recent-post-title{text-align:center!important;font-size:14px;font-weight:400;letter-spacing:0.5px;padding:0;margin:0 auto;position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px dashed rgba(255,255,255,.5);display:block;line-height:100%;color:#fff!important;text-transform:uppercase;text-decoration:none!important;background:rgba(0,0,0,.4);opacity:0;z-index:1;transition:all .1s ease-in-out}li.recent-posts-list:hover h3.recent-post-title{opacity:1}h3.recent-post-title span{color:#f0f0f0;position:absolute;width:92%;height:20px;top:23%;left:0;right:0;text-align:center;margin:0 auto;margin-top:-10px;line-height:normal}li.recent-posts-list:hover .recent-posts-details{opacity:0}.recent-posts-details{position:absolute;top:0;right:0;left:0}span.redmore{float:right;padding:0!important;margin:0!important}.recent-posts-details span.dett{background:#0078C0;color:#fff;float:left;margin:0;padding:2px 7px}.recent-posts-details span.redmore a{background:#333;color:#fff;padding:2px 7px;display:inline-block}@media screen and (max-width:699px){li.recent-posts-list{width:100%;}img.recent-post-thumb{width:100%;height:100%;max-height:210px;max-width:450px;}}

langkah berikutnya, Tambahkan Widget HTML/Javascript

<script>var posts_no = 9;var showpoststhumbs = true;var readmorelink = false;var showcommentslink = false;var posts_date = true;var post_summary = false;var summary_chars = 0;function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+130),d=s.substr(b+130,c-b-130),u=-130!=a&&-130!=b&&-130!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list"><a href="'+r+'">'),1==showpoststhumbs&&document.write('<img class="recent-post-thumb" src="'+u+'"/>'),document.write('<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<div class="recent-posts-details"><span class="dett">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" </span>"),_=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}document.write("<script src=\/feeds\/posts\/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");document.write("<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$(document).ready(function() {$(\'img.recent-post-thumb\').attr(\'src\', function(i, src) \r\n{return src.replace( \'s72-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");</script>

Tag	Keterangan
var posts_no = 9;	Ganti 9 untuk ubah Jumlah Post
src=\/feeds\/posts\/default	Pakai Label, Tambahkan /-/Label

Jika Tidak Beraturan Silahkan Edit CSS sesuai blog kalian

Dan Selesai Click Save Dan Apa Yang Terjadi😀
Pfpp Capek Juga ya Ngetiknya 😄😄 , heheheeh
Dan Terimah KAsih Telah Baca .. Tadi kalau kesalahan script Silahakan komentar bawah yah ..
Semoga bermanfaat !!! [ Edit Sesuka Anda ]