Menampilkan Posting Berdasarkan Label Pada Blog
18/07/2012
0
Untuk memaksimalkan tampilan pada blog diperlukan beberapa pengaturan agar tampilannya lebih menarik. Salah satunya dengan menampilkan posting berdasarkan label. Metode ini memudahkan blogger memilih dan menentukan label mana saja yang ingin di tampilkan. Dengan cara ini tampilan posting akan lebih maksimal dan kelebihan cara ini dalah tidak perlu pengaturan pada template cukup dengan menambahkan Gadget HTML/JavaScript.
Bagaimana menampilkan posting berdasarkan label?
1. Login ke blogger
2. Pada layout tambahkan Gadget pilih HTML/JavaScript
3. Copy Paste Code Dibawah ini
4. Kemudian terakhir pengaturan lihat pada Costumize di akhir postingan
<style>
/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:3px;
border:1px solid #8f8f8f;
background:#fff;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height:0px;
background:;
margin: 0px 10px 2px 0px;
padding: 5px;
}
ul.label_with_thumbs li {
padding:5px 0;
min-height:0px;
margin-bottom:5px;
list-style:none;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="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/AVvXsEgU2_0It0PFGX8-jiqo9FVeHtlxGs3jEOG7rDhC5aBMz-kY1RKoOetrdTk9-bepVLen-3C3WE8DN-l-5D2QmxHmdkwMcDScoTvFDtiRBUsv_4BwYrMQIZG0mdO7-f8k13tR29eR9vG7FPHd/';}
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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";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;}
else
if("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>
<script type='text/javascript'>var numposts = 2;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 130;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Viva?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Costumize Standard
- Warna Biru ganti dengan nama Label
- Warna merah ukuran gambar
- Costumize lainnya bisa anda eksplore lagi
Tweet |
Anda sedang membaca Artikel: Menampilkan Posting Berdasarkan Label Pada Blog
Kontributor: doni septu Jika anda suka artikel ini silakan di sebarkan atau cukup like FunPage kami terima kasih Rating Blog: 5 dari 5
Kontributor: doni septu Jika anda suka artikel ini silakan di sebarkan atau cukup like FunPage kami terima kasih Rating Blog: 5 dari 5
Kode HTML: