Cara Membuat Label Kategori Thumbnail Cantik

Sebelumnya saya telah menjelaskan berkenaan dengan judul yang sama yaitu Cara Membuat Kategori Label dengan Thumbnail Saja, perbedaan yang mendasar adalah dari tampilan gambar. Jika cara sebelumnya menampilkan keseluruhan gambar, maka kali ini sedikit saya modifikasi menjadi satu gambar dengan balutan efek box-shadow poto 3D.

Cara Membuat Label Kategori Thumbnail Cantik ini cukup sederhana untuk membuatnya, walaupun saya begitu sulit untuk memodifikasinya, tetapi anda cukup menambahkan kode-kodenya hanya pada widget HTML saja, bagaimana mudah kan!!. Langsung saja berikut penjelasannya:

Cara Membuat Label Kategori Thumbnail Cantik

1. Log in ke www.blogger.com
2. Masuk ke Tata Letak
3. Klik Tambahkan Gadget
4. Pilih HTML/Javascript
5. Copy kode modifikasi di bawah ini

<style type='text/css'>
#BD-rlabel { width:100%; background-color: #CCF7BE; list-style-type: none; text-align: justify; line-height: normal; box-shadow: 0px 0px 5px 0px; border: 3px solid #12851B; padding: 5px 5px 40px 5px;}
#BD-rlabel ul li {margin-right:-50px;line-height: normal; list-style-type: none;margin-top:-5px;}
#BD-rlabel a{ padding:0 0 0 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #130AE7; text-decoration: none; list-style-type: none;line-height: normal; }
#BD-rlabel li a{ background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNJo4DkeZXCQ8uz86YvkvCod4U9JoqNPP4HEgk_Rlb65Q3lN9Eb4rCsKKh3xi4bSLze9D38gvdXNfmQubkYrzJhp4PGzCCuXbbXIpymK7MmX2StXPz7dreKESDwAbiacVxU-BPdZzLHs/s1600/ico-rss.jpg') 0px 50% no-repeat; border-bottom:dotted #AAA2A2 1px; list-style-type: none; text-decoration: none; width: auto;line-height: normal; }
#BD-rlabel li a:hover { list-style-type: none; text-decoration: none; color: #020202; background-color: #E7FA0B; }
 .BD-text { font-family:Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 11px; padding: 0px 13px 0px 3px; list-style-type: none;line-height: normal; }
 .BD-text a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #333333; font-size: 10px; padding:0 0 0 0px;margin-right:-35px; list-style-type: none; }
 .BD-text a;hover{ color: #0000FF; }
img.BDLABEL_thumb{ float:left; border:2px solid #52524D; background:#ffffff; margin-right: 2%; height:60px; width:60px; padding:2px; border-radius:50%;margin-left:-7%; }
img.BDLABEL_thumb:hover{background:#f7f6f6}
.BDLABEL-tumb{ float:left; width:100%; min-height:70px; margin:0 5px 0px 0; background-image: url(none); list-style-type: none;margin-right: 50%; }
 ul.BDLABEL-tumb li{min-height:65px;margin:2px 0;padding:4px 0;margin-right:-50px;}
#BD-rlabel .BD-more a{color:#000000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-style: italic; text-decoration: none; text-shadow: 1px 1px #ccc; padding:3px 15px; border:solid #8D8888 1px; font-weight: bold; margin-top:10px; background-color: #52F452; float: right; box-shadow: 1px 2px 10px 0px;}
 #BD-rlabel .BD-more a:hover{ color:#000000; box-shadow: 1px 3px 15px 0px #999; background-color: #DBD419; border:solid #332929 1px; text-shadow: 0px 0px 1px #0A0A0A; }
 </style>

<script type='text/javascript'>
 function labelthumbs(json){document.write('<ul class="BDLABEL-tumb">');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/AVvXsEgOqp7IdVjqbPqTZOPb5NnUEuyu70CnDKls4DoPGA0pc3eMBXMU2XkTIrs2nd_dIuoNVZOb6MI_DuCzJbvFeqtgz4vzXSB8OVLFwpchpAxkc2Qj7rlTlFzOWAcGUdjOtZYuBEv2AeDYUxw/h120/rss-bulat.png';}
 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('<div class="BD-text">');if(showpostthumbnails==true)
 document.write('<a href="'+posturl+'" target ="_top"><img alt="'+posttitle+ '" class="BDLABEL_thumb" src="'+thumburl+'" title="'+posttitle+ '" /></a>');document.write('<a href="'+posturl+'" target ="_top" title="'+posttitle+'">'+posttitle+'</a><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>

<div style="float:up;border: 2px solid #B1B18E; box-shadow: 0px 7px 16px 0px; margin: 0px; padding: 5px 0 5px 0; width: auto; height: auto; background-color:#F5FFF8; text-align: center;">
<table border="0">
<tr>
<td width="50%">
<center>
 <div id="BD-rlabel">
 <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 = 120;</script>
 <script type="text/javascript" src="http://www.terwujud.com/feeds/posts/default/-/Kesehatan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
 <script type="text/javascript">
 function recentpostslist(json) {
 document.write('');
 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" title="' + entryTitle +'">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
 </script>

 <script src="http://www.terwujud.com/feeds/posts/summary/-/Kesehatan?max-results=7&alt=json-in-script&callback=recentpostslist"></script>
 <div class="BD-more"><a href="http://www.terwujud.com/search/label/Kesehatan" title="Kategori Selanjutnya" >Kesehatan&#187;&#187; Selanjutnya...&#187;</a>
</div>
</div>
</center>
</td>
<td width="50%">
<center>
<div id="BD-rlabel">
 <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 = 120;</script>
 <script type="text/javascript" src="http://www.terwujud.com/feeds/posts/default/-/Renungan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
 <script type="text/javascript">
 function recentpostslist(json) {
 document.write('');
 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" title="' + entryTitle +'">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://www.terwujud.com/feeds/posts/summary/-/Renungan?max-results=7&alt=json-in-script&callback=recentpostslist"></script>
 <div class="BD-more"><a href="http://www.terwujud.com/search/label/Renungan" title="Kategori Selanjutnya" >Renungan&#187;&#187; Selanjutnya...&#187;</a>
</div>
</div>
</center>
</td>
</tr>
</table>
</div>

Buka Panel
Tutup Panel

6. Paste kode di atas ke dalam kolom widget HTML anda
7. Save dan lihat hasilnya

Keterangan

• Silahkan ganti kode yang berwarna merah dengan URL blog anda dan label yang anda inginkan
• Silahkan modifikasi sendiri kode CSS sesuai kesukaan anda

Demikian artikel tentang Cara Membuat Label Kategori Thumbnail Cantik, Jika ada yang belum jelas mengenai modifikasi yang saya lakukan, silahkan tinggalkan pesan melalui form komentar di bawah. Terima Kasih!!.