Membuat Daftar Isi Otomatis Dengan Thumbnail

daftar isi otomatis dengan thumbnail
Cara kerjanya sama dengan daftar isi otomatis lainnya, cuma hanya ada tampilan ilustrasi gambarnya. Jadi tampilannya tambah cantik dan menarik...heheheee. Berikut cara membuat daftar isi otomatis dengan thumbnail.

Klik Rancangan
Klik Edit HTML
Masukkan kode berikut 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; padding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}
Masukkan kode berikut di atas 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2O9YR7QF-MDhBD_bzXvVEa4IgRCNEmiReWzbIWQhccw98Kwr_0ir5AtM8umWwQt9qgzKHPGrcbEPUc9SvK9iX6pAg7WHAXwQPhontLTzpEODMsjlZr4dFeltdyTXAymhhbFWkfxoi-YkI/';}
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>
Sekarang Simpan Template
Selanjutnya klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<div style="width: 100%; height: 450px; overflow: auto;"><script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Klik Simpan dan lihat hasilnya
Selamat mencoba


"keep spirits and do the best"

6 Responses so far.

  1. mantap! info baru dan keren gan. terima kasih sudah berbagi.

  2. wah cuma copas scriptnya doank ya.. terimakasih telah memudahkan kami...

  3. Unknown says:

    mantab template barunya...loading cepat dan simple view. ini disenangi google bro. ok keep blogging spirits sahabat. mahesa

  4. Unknown says:

    makasih atas semangatnya bro...salam sahabat blogger dan mahesa

  5. Unknown says:

    makasih juga jus manggis dan sukses gan

  6. Unknown says:

    dibikin mudah aja gan...biar gak pusing heee :D

Leave a Reply

    About Me

    Category

    • (4)
    • (1)
    • (4)
    • (15)
    • (17)

    Responses