Cara Membuat Daftar isi Otomatis dengan Thumbnail Sesuai Label Tertentu

Tweet

Membuat Label sendiri seperti halnya Popular post bro tapi dengan satu label saja yang keluar, itu sangat mengagumkan betul bro ? , oke bro untuk lo yang tertarik silahkan simak untaian berikut ya bro :

1. Pertama yang mesti lo lakukan bro adalah login ke blogger lo bro
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk Antisipasi terjadi kesalahan dalam pengeditan nantinya bro, backup dulu template lo ya bro. Cara Backup Data Template Blog
5. Setelah semua langkah diatas udah lo lakukan bro, lo letakkan bro kode diBawah ini diatas kode ]]></b:skin> :

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0} 

Perhatikan tulisan warna MERAH diatas, itu adalah lebar dan tinggi thumbnail image yg lo atur nanti bro.

      6. Lalu Cari Kode </head> bro, masukkan kode diBawah ini bro 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlGXbKPHv3x4r1_9389LWeqjiOteTELztPw8zokTvUkwbHKEEe9zlPYHS7c3edufQtIFCi-HGfVhJiIkSM1Y-XMMEo39OVVFJPouhaM1Ucgyeqjh4pk_hYHw3cG6c8YJm2tvVngZ9UyksM/';}
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>

Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan

Google Code lo sendiri bro atau gunakan kode script di bawah ini yang sudah gua ringkas di Google Code bro. butuh cara bro ? ? ?

Baca tentang Cara Membuat Kode Html Pribadi di Google Code ya bro.

<script src='http://raxterblog.googlecode.com/files/perlabel.js' type='text/javascript'/>

     7. Setelah itu save templates bro, kemudian menuju ke layout pilih kotak yang akan 

         ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut 

         ini kedalamnya ya bro:

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/HOT?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://raxterbloom.blogspot.com/feeds/posts/summary/-/HOT?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://raxterbloom.blogspot.com/search/label/HOT" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Ket :

Warna HIJAU    : Label atau kategori yang ingin lo tampikan bro.
Warna MERAH : Ganti dengan URL blog lo bro.
Warna KUNING : Ganti dengan URL LABEL yg lo ingin itu bro
Warna Orange  : Silahkan lo ganti bro sesuai berapa post yg ingin lo tampilkan ya bro
Selanjutnya save dan lihat hasilnya bro. cliiiinnngg cantikkan blog lo bro.


selamat mencoba ya bro.

Judul: Cara Membuat Daftar isi Otomatis dengan Thumbnail Sesuai Label Tertentu
Rating: 100% based on 999998 ratings. 57 user reviews.
Ditulis Oleh Maha Putra Rusydinal

Lo Sedang Membaca Artikel Bro Tentang Cara Membuat Daftar isi Otomatis dengan Thumbnail Sesuai Label Tertentu
Jika Lo Suka Artikel RaxterBlog bro, Silahkan Masukkan E-mail lo dibawah ini bro untuk Berlangganan Gratis Via E-mail, Dengan begitu lo akan mendapat kiriman artikel baru dari RaxterBlog bro.
Terima Kasih bro Telah Berkunjung
Salam Blogging ya bro ! ! !