Widget Recent Post Grid


Tutorial kali ini Arleth98 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
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 - Arleth98
   =============================== */
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>
TagKeterangan
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
Related Posts
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser

Post a Comment On "Widget Recent Post Grid"

Disqus Comments