Cara Membuat Kategori Tertentu Dengan Gambar Di Blog

Zona Page - Cara Membuat Kategori Tertentu Dengan Gambar Di Blog , Bagi sobat blogger yang tidak memahami bagaimana cara membuat kategori tertentu dengan gambar di blog,maka saya selaku admin zona page akan memberikan contoh bagaimana cara nya agar penampilan blog sobat terlihat menarik di mata pengunjung

Itu contoh cara membuat kategori tertentu dengan gambar di blog,adapun langkah langkah membuatnya kalian bisa baca  di bawah ini :

Langkah Pertama :

1. Login Ke Blogg Kalian
2. Klik Rancangan
3. Klik Tab HTML
4. Cari Kode ]]></b:skin> Copy Kode Di Bawah Ini Di Atas Kode ]]></b:skin>

Klik Show -->

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

5. Selanjutnya carilah kode </head>,Lalu copy kode di bawah ini di atas kode </head>

1. <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/AVvXsEgH_QQVyulysGrQ2aWcvY9kv0w5JgOrXJC0tKeLCjQHURyJ27CSXdzep60h_fnma7IIsldy4An72qN9O0k0GJWzqjA_Q1jglWpvPhNXrizfD6mjifCZudKi3vZkm5MRK0w-guJ2_OgtU3Zz/';}
   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>

6. Klik tombol SIMPAN TEMPLATE
7. Langkah pertama selesai.

Langkah Ke 2 :

1. Klik tab Rancangan / Disegn
2. Klik tambah Gadget
3. Selanjut Klik / Pilih HTML / Javascript
4. Copy kode di bawah ini , Jangan lupa beri judul yang sesuai kalian inginkan,Sebelumnya kalian ubah tulisan yang berwarna merah Software,dengan nama kategori yang kalian tulis.

<script type='text/javascript'>var numposts = 6;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/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

5. Klik tombol Save/Simpan

6. Langkah Ke 2 selesai lihat hasilnya .

Keterangan :

• var numposts = 6;
• var showpostthumbnails = true;
• var displaymore = false;
• var showcommentnum = false;
• var showcommentnum = false;
• var showpostdate = false;
• var showpostsummary = true;
• var numchars = 60;

Kode berwarna merah adalah kode yang bisa temen-temen edit, true berarti tampilkan, false berarti jangan di tampilkan, 60 adalah jumlah karakter, dan 6 adalah jumlah thumbnail yang ditampilkan Anda bisa ganti sesuai keinginan.

Sekian tutorial cara membuat kategori tertentu dengan gambar di blog,semoga artikel ini bermanfaat bagi para blogger .. silahkan baca artikel selanjutnya di bawah ini ... Zonapage