Kamis, 04 Oktober 2012

Cara Membuat Daftar isi Otomatis dengan Thumbnail Sesuai Label Tertentu

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 ? ? ?



<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.

3 komentar: