Kamis, 13 Oktober 2011

Cara Membuat Daftar Isi Otomatis

Langsung TKP aja ya.........

Log in ke blog anda
Klik Rancangan


rancangan

Klik Edit HTML

edit html

Masukkan kode berikut di atas kode ]]></b:skin>, untuk memudahkan pencarian gunakan CTRL+F atau tekan F3 dan masukkan kode yang ingin dicari.

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; padding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

Cari lagi kode </head> dan masukkan 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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.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 ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Klik Simpan Template
Klik Lagi Rancangan

rancangan

Klik Tambah Gadged

tambah gadget

Pilih HTML/JavaScript

html java

Masukkan kode berikut ke dalamnya

<div style="width: 100%; height: 400px; overflow: auto;">
<style type="text/css">
ul.tabs{ margin:0; padding:0; float:left; list-style:none; height:32px; border-bottom:1px solid #999; border-left:1px solid #999; width:100%}
ul.tabs li{ float:left; margin:0; padding:0; height:31px; line-height:31px; border:1px solid #999; border-left:none; margin-bottom:-1px; overflow:hidden; position:relative; background:#e0e0e0}
ul.tabs li a{ text-decoration:none; color:#000; display:block; font-size:1.2em; padding:0 20px; border:1px solid #fff; outline:none}
ul.tabs li a:hover{ background:#ccc}
html ul.tabs li.active, html ul.tabs li.active a:hover{ background:#fff; border-bottom:1px solid #fff}
.tab_container{ border:1px solid #000; border-top:none; overflow:hidden; clear:both; float:left; width:100%; background:#fff}
.tab_content{ padding:20px; font-size:1.2em}
</style>

<script type='text/javascript'>
$(document).ready(function() {
//When page loads...
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});</script>

<ul class="tabs">
<li><a href="#tab1">Blog Info</a></li>
<li><a href="#tab2">Seo</a></li>
<li><a href="#tab3">Comment</a></li>
</ul>
<div style="width: 100%; height: 300px; overflow: auto;">
<div class="tab_container">
<div id="tab1" class="tab_content">
<script type='text/javascript'>var numposts = 9999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/blog%20info?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* ganti blog%20info dengan label anda, bila label anda mempunyai dua kata maka harus dipisahkan dengan spasi %20, contohnya blog info menjadi blog%20info */
</div>
<div id="tab2" class="tab_content">
<script type='text/javascript'>var numposts = 9999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/seo?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* ganti seo dengan label anda */
</div>
<div id="tab3" class="tab_content">
<ul>
<div style="background:FFFFFF; border: 0px solid #000; width: 100%; height: 280px; text-align: center;"><div style="text-align: center;" class="imgblock200"><script src="http://bloekoetoek-blogonol.googlecode.com/files/komentar.js" target="_blank"></script><script>var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 150;var standardstyling = true;</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments"></script></div></div> /* ganti blogonol.blogspot.com dengan alamat blog anda */
</div>
</div>
</div>

Simpan Template
Selamat mencoba dan sukses selalu