Cara Membuat Daftar Isi Otomatis Dengan Thumbnail

Kali ini saya akan terangkan bagaimana Cara Membuat Daftar Isi Otomatis Dengan Thumbnail. Sebenarnya cara ini hanya penggabungan dari pembuatan Cara Membuat Tab Menu Unik dan Fitur Kategori Otomatis Dengan Thumbnail yang saya dapatkan dari blog Kang Rohman. Sebelumnya saya ucapkan dulu terima kasih kepada beliau, karena dari Kang Rohman juga saya banyak belajar mengenai dunia blogging. Selebihnya saya akan menambahkan fasilitas Recent Comment pada daftar isi tersebut. Bagaimana?...anda tertarik? ikuti langkah berikut.
Log in ke blog anda
Klik Rancangan
Klik 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

//<![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/AVvXsEiXcPxv-3x140zYNRCa3aENeAHCUlsTASgpH8gi9GKkEPlZ3jBs9N124QevhqdFuHVnhXrO7TCUx3kWXG6QopyDME0A4_6aBJXL67pLioE-URPoRC-asIQ8yl2IGZDBwK8vXzbWeTmq1dsw/';}
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(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
Klik Tambah Gadged
Pilih HTML/JavaScript
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>

<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/-/widget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* ganti widget dengan label anda */</div>
</div>
</div>

Simpan Template
Selamat mencoba dan sukses selalu

"keep spirits and do the best"