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.
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>
#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>
Save Template!
PASANG KODE HTML
1. Klik “Layout” > “Add a Gadeget” > pilih “HTML/Javascrpt”
2. Copas kode berikut ini di kolom ‘Content’
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-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:'Roboto Condensed',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:'Oswald',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
//<![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
<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” src=”/feeds/posts/default/-/Label Anda?orderby=updated&alt=json-in-script&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 »</a>
Itu dia Cara Membuat atau Memasang Widget Posting Terbaru plus Gambar Per Label di Homepage Blogger. (http://www.baticmedia.com).*