Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger

Baca Juga

Cara membuat widget Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger. Menjadikan beranda blog ala majalah (magazine style).

Style 1 Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger

CSS:
di atas ]]></b:skin> atau </style>

img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }

JAVASCRIPT: 
di atas </head> atau </body>

<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQginYo4wN6B_WdJMPSX5nPUtTq8MO8EU9I75W6YU_jYHxKdIOEtTcl8llJE528ZX4lXjhJ3o-dVhegaMo9defhTYKJiSPen7yL2O8rB-nR6kmvX4ZQnApk50W1hKATmTSFCKKj9nqxFw/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>

HTML:
Layout > Add a Gadeget > HTML/Javascrpt

 <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>

Style 2 Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger

Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger di bawah ini tanpa thumbnail image besar, tapi seragam --berupa thumbnail kecil saja.

KODE CSS:

#main-home{width:687px; margin-bottom:30px; overflow:hidden}
#main-left h2, #main-right h2{border-top-right-radius:4px; border-top-left-radius:4px; background:#363b40; margin:0 -15px 0 -15px; padding:15px; color:#fff; font-family:&#39;Roboto Condensed&#39;,sans-serif; font-size:16px; font-weight:400}
#main-left{border-bottom:3px solid #ddd; border-radius:4px; background:#f9f9f9; padding:0 15px 0 15px; width:44.6%; float:left}
#main-right{border-bottom:3px solid #ddd; border-radius:4px; background:#f9f9f9; padding:0 15px 0 15px; width:44.6%; float:right}
img.label_thumb{float:left; margin-right:10px !important; margin-bottom:6px; margin-top:2px; height:65px; width:65px; border:#eee solid 4px}
.label_with_thumbs{float:left; width:100%; min-height:65px; margin:0 10px 10px 0; padding:0; line-height:1.3em}
ul.label_with_thumbs li{min-height:80px; margin:2px 0; padding:7px 0; border-bottom:1px dashed #ddd}
.label_with_thumbs li{font-size:13px; list-style:none; padding-left:0 !important}
.label_with_thumbs a{font-family:&#39;Oswald&#39;,Calibri,sans-serif; font-size:13px; padding-bottom:2px; font-weight:normal; color:#444; line-height:1.4em; margin-bottom:9px}
.label_with_thumbs a:hover{color:#2C82B1}
.label_with_thumbs strong{padding-left:0}

KODE JAVASCRIPT

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){document.write('<ul class="label_with_thumbs">');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/AVvXsEiQginYo4wN6B_WdJMPSX5nPUtTq8MO8EU9I75W6YU_jYHxKdIOEtTcl8llJE528ZX4lXjhJ3o-dVhegaMo9defhTYKJiSPen7yL2O8rB-nR6kmvX4ZQnApk50W1hKATmTSFCKKj9nqxFw/s1600/picture_not_available.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]="Jan";y[2]="Feb";y[3]="Mar";y[4]="Apr";y[5]="May";y[6]="June";y[7]="July";y[8]="Aug";y[9]="Sept";y[10]="Oct";y[11]="Nov";y[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_top"><img class="label_thumb" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_top">'+r+"</a></strong><br>");if("content"in n){var w=n.content.$t}else if("summary"in n){var w=n.summary.$t}else var w="";var E=/<\S[^>]*>/g;w=w.replace(E,"");if(showpostsummary==true){if(w.length<numchars){document.write("");document.write(w);document.write("")}else{document.write("");w=w.substring(0,numchars);var S=w.lastIndexOf(" ");w=w.substring(0,S);document.write(w+"...");document.write("")}}var x="";var T=0;document.write("<br>");if(showpostdate==true){x=x+y[parseInt(m,10)]+"-"+g+" - "+v;T=1}if(showcommentnum==true){if(T==1){x=x+" | "}if(u=="1 Comments")u="1 Comment";if(u=="0 Comments")u="No Comments";u='<a href="'+f+'" target ="_top">'+u+"</a>";x=x+u;T=1}if(displaymore==true){if(T==1)x=x+" | ";x=x+'<a href="'+i+'" class="url" target ="_top">More »</a>';T=1}document.write(x);document.write("</li>");if(displayseparator==true)if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

KODE HTML
Posisi widget: sebelum kode </div> penutup main wrapper

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='main-home'>
<b:section class='main-left' id='main-left'/>
<b:section class='main-right' id='main-right'/>
</div>
</b:if>

HTML WIDGET: 
Layout > HTML

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label Anda?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
<br/>
<a style='float:right;font-size:13px;padding:5px 0 20px 0' href='/search/label/Label%20Anda/max-results=6'  title='Testing other' rel='nofollow'>Testing other &#187;</a>

Itu dia Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger.

Sumber