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
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:'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
<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>
Posisi widget: sebelum kode
</div> penutup
main wrapper
<b:if cond='data:blog.pageType != "item"'>
<div id='main-home'>
<b:section class='main-left' id='main-left'/>
<b:section class='main-right' id='main-right'/>
</div>
</b:if>
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&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).*
