Cara Membuat Posting Terbaru plus Gambar Per Label di Homepage Blogger

Cara membuat widget Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger. 

HAMPIR semua website, termasuk blog, nemapilkan posting atau tulisan terbaru di halaman depan (homepage).

Tips desain halaman depan blog dari All Blog Solution berikut ini akan menjadikan beranda blog Anda mirip tampilan majalah (magazine style), tidak simple seperti kebanyakan blog.

Tampilan blog magazine style biasanya digunakan oleh blog dengan niche berita atau banyak kategori (multi-label). Dengan begitu, tiap posting terbaru di label tertentu akan muncul di halaman depan.

Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger

Posting Terbaru plus Gambar Thumbnail Per Label

Cara Memasang Widget Posting Terbaru plus Gambar

Berikut ini Kode Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger dan cara memasangnya.

KODE CSS
Simpan di atas kode ]]></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; }



KODE JAVASCRIPT: 
Simpan 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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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>


Save Template!

PASANG KODE HTML

1. Klik "Layout" > "Add a Gadeget" > pilih "HTML/Javascrpt"
2. Copas kode berikut ini di kolom 'Content'

 <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>


KODE DESAIN LAIN
Berikut ini kode desain Posting Terbaru plus Gambar Thumbnail Per Label di Homepage Blogger lainnya

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

1. 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}


2. 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="http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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>


3. 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>


4. HTML WIDGET
Layout > HTML/JavaScript

<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 Cara Membuat atau Memasang Widget Posting Terbaru plus Gambar Per Label di Homepage Blogger. (http://www.baticmedia.com).*

» Thanks for reading: Cara Membuat Posting Terbaru plus Gambar Per Label di Homepage Blogger
Previous
« Prev Post
    The Comments

0 komentar:

Post a Comment