Cara Membuat daftar isi Perlabel

Cara Membuat daftar isi Perlabel
Update posting yang berbau tutoril blog memang paling banyak dicari buktinya sekarang banyak blog bermunculan di Google . Artikel yang kayak gini sebenarnya dah begitu banyak di halaman Google tapi gak ada salahnya kan kalo saya ikut berbagi , siapa tau artikel saya ini tentang cara Membuat daftar isi Perlabel lebih mudah di pahami . karena saya memberikan tutorialnya selalu saya sisipkan gambar biar lebih jelas dan mudah karena untuk template blog itu sundiri kodenya lain lain karena banyak orang beranggapan teori itu lebih mudah dari pada prakteknya . Untuk penampatan terserah anda bisa di sidebar bisa juga dibawah posting sebagai artikel terkait . Untuk cara membuatnya ikuti saja petunjuknya dibawah ini

Cara Membuat daftar isi Perlabel :

Edit html » centang Expand Widget » Cari kode ]]></b:skin> [gunakan ctrl+f]

Letakkan kode CSS dibawah ini di atas kode ]]></b:skin>

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

Klik Disini untuk perbesar Gambar

Kemudian cari code </head>

Letakkan kode script dbawah ini diatas kode</head>

<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='http://1.bp.blogspot.com/-5gEy2Udh4Z0/UGx_JS6Jv3I/AAAAAAAACs0/HOs7-nQvE3M/s1600/MJ.jpg';}
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 ="blank">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Pratinjau . OK .save template

Jika Anda mau ditempatkan di sidebar

Dasbor » Tata Letak » HTML/javascript » copy kode di bawah ini »

<div style="height:410px; overflow:auto">
<script type="text/javascript">var numposts = 20;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = false;var showpostsummary = true;var numchars = 500;</script>
<script type="text/javascript" src="/feeds/posts/default/-/software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<div style='float:left;text-align:left;font:normal 10px arial;padding-bottom:5px'>lainnya tentang » <a href='http://www.mujijayaganesha.com/search/label/software/'>SOFTWARE</a>
</div>
</div>

Untuk yang saya beri warna merah sesuaikan dengan keinginan anda tentunyajuga blog anda