Minggu, 25 Desember 2011

Custom Website

Custom Website


Cara Mudah membuat Fitur post per categori

Posted: 24 Dec 2011 10:05 PM PST

saya kemarin mendapatkan pertanyaan dari kaskus tentang bagai mana membuat post per category pada blogspot ini thread pertanyaanya http://www.kaskus.us/showpost.php?p=594361754&postcount=296  Coba kamu liat blog ini di halaman home disana terdapat beberapa post yang berdasarkan category,
Oke kita langsung mempelajari cara membuatnya :
Silahkan login dulu ke blogspot kamu trus pilih menu design > edit HTML kemudian centang Expand Widget Templates  kemudian cari kode berikut :
]]></b:skin>
Kalo sudah ketemu copy code berikut di atasnya : 
/*** Featured Categories ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
Kemudian cari kode :
</head>
kalau sudah ketemu Copy kode berikut di atasnya  :
<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/AVvXsEiPJYaa7AGMB4BproHEDjYxzakdDn-xeDlWxB3wVdZlBsXfvFPeoWjf3nlXej6p6B-u4Y_4DC95MVXr8PAwdU0RZy_5uWpQxhwxtFFbGxY_2sP4-1QPh6x5JMAnRNgmhdpvPz6dBfp7pnVD/s1600/favicon.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]="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>
Kalau sudah save template
Nah sekarang kita akan memanggil kode kode tadi menjadi sebuah element posting berdasarkan kategory silahkan kembali ke pengaturan page element add gadget pilih opsi HTML/Javasript
Copy kode berikut ini :
<script type="text/javascript">
var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;
</script>

<script src="/feeds/posts/default/-/Category?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">
</script>
Keterangan : Ganti tulisan warna merah dengan label yang dimaksudkan
Pengaturan :
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var showcommentnum = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 80;
Warna meah dapat di ganti sesuai dengan keinginan kamu itu sebagai pengaturan jumlah post yang akan ditampilkan
Warna biru tulisan true adalah pengaturan thumbnail image ganti dengan false apabila ingin di sembunyikan dan true apabila ingin di tampilkan
Warna Hijau adalah pengaturan jumlah karakter dalam postingan yang akan di tampilkan ganti sesuai dengan selera kamu kalau sudah save

Silahkan mencoba semoga membantu

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More