Recent Posts with Thumbnail Image Magazine Style

Cara membuat atau memasang widget Recent Posts with Thumbnail Image Magazine Style. Bisa menampilkan posting terbaru semua label, bisa juga posting terbaru per label atau berdasarkan kategori.

Ini penampakan Recent Posts with Thumbnail Image Magazine Style:

KODE CSS & JavaScript
Simpan di atas kode </head>

<style>
.onecol { margin:0 auto}
.onecol .catbox-row { margin:0 0 15px 0; }
.onecol .catbox {width:100%; float:left; display:inline; padding-bottom:5px;}
.onecol .catbox-even { margin:0 15px 0 0; }
.onecol .catbox-even .catbox-title {  }
.onecol .catbox ul {float:right;width:100%;padding-left:2px;}
.onecol .catbox li {margin: 5px 0 0 2px;font-family:Oswald;font-size: 16px;float: left;width: 49%;padding:0 0 5px 0;list-style: none;border-bottom: 1px dotted #ddd;}
.onecol .catbox li:last-child,.twocol .catbox li:last-child {border:none}
.onecol .catbox li a {color:#666}
.onecol .catbox li.first { display:block; padding:0 0 10px 0;border:none; background:none; }
.onecol .catbox li.first a { background:none;font-size:20px;line-height:normal;font-weight:500;}
.onecol .catbox .entry-thumb {margin-right: 20px;width: 100%;height: 170px;max-width: 260px;}
.onecol .catbox .entry-title { font-size:0.9em; line-height:15px;margin-right: 20px;}
.onecol .catbox .entry-excerpt { clear:both; display:none; }
.onecol .catbox .entry-meta {display:none; margin-top:5px; }
.catlist{height:auto;width:100%}
.catlist img{width:80px;height:70px;float: left;margin-right: 10px;}
.meta-date{display:none}
@media screen and (max-width: 800px){
.onecol .catbox{width:95%;margin-left:5px;}
.onecol .catbox li{width:100%;margin-left:5px;}
.onecolumn #content{width:100%}
}
@media screen and (max-width:600px){
.onecol .catbox .entry-thumb {margin-right: 15px;width: 100%;height: 170px;margin-bottom: 10px;}
}
</style>
<script>
//<![CDATA[
imgr=new Array();imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";showRandomImg=true;aBold=true;summaryPosta=300;summaryPost=130;summaryPosti=60;summaryPostu=80;summaryTitle=25;numposts=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agust","Sep","Okt","Nop","Des"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;if(i==0){var trtd='<li class="first"><img class="entry-thumb wp-post-image" src="'+img[i]+'"/><h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2><p class="entry-meta"><span class="meta-date">'+daystr+'</span><span class="meta-sep">|</span><span class="meta-comments"><a href="'+posturl+'">'+pcm+' Komentar</a></span></p><div class="clear"></div></li>';document.write(trtd)}if((i>0)&&(i<numposts)){var trtd='<li class="catlist"><img src="'+img[i]+'"/><a href="'+posturl+'">'+posttitle+'</a>  <span class="meta-date">'+daystr+'</span></li>';document.write(trtd)}j++}document.write('')}
//]]>
</script>

Kode HTML
Simpan di bawah <div id='main-wrapper'>

1. Kode Menampilkan Posting Terbaru Semua Label

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div class='onecol'>
<div class='catbox catbox-even' id='catbox1-0'>
<!-- Widget Title Here-->
<ul>
<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script>
</ul>
</div>
</div>
<div class='clear'/>
</b:if>

2. Kode Menampilkan Posting Terbaru Berdasarkan Label

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div class='onecol'>
<div class='catbox catbox-even' id='catbox1-0'>
<!-- Widget Title Here-->
<ul>
<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script>
</ul>
</div>
</div>
<div class='clear'/>
</b:if>

SAVE!