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.
Membuat Label Kategori Thumbnail Cantik ini cukup sederhana untuk membuatnya, walaupun saya begitu sulit untuk memodifikasinya, tetapi anda cukup melakukannya hanya dalam 7 langkah dan menambahkan kode-kodenya pada widget HTML saja, bagaimana mudah kan!!. Langsung saja berikut penjelasannya:
7 Langkah Membuat Label Kategori Thumbnail Cantik
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/AVvXsEjlZAMsXfpPHK3tqMF9rq4WFPb_htaVJAt7hCmCcMsBh97cVfv4Fu75bWAB8uj03kLwdLca2FKL4tjsG8VfsT3z08Vo_V-oejU1Mi2YFi3CjgzPkaehVSGRUVn2tDrNvjhfIN-VJzSjLKY/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/AVvXsEjXKGHG_E-sz9b9rS16YxVTr83zrD3kB1_3SRUGVVqPDTWagXqXe_vb8UiXEtWkEgc_c_5VXWWso8suD6nGgmInQiFBQdSLPMOozZjV3LcoY6mOPDPsZNLL1V1BgZqGTu5YN9AN_XnPzGE/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»» Selanjutnya...»</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»» Selanjutnya...»</a>
</div>
</div>
</center>
</td>
</tr>
</table>
</div>
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 7 Langkah Membuat Label Kategori Thumbnail Cantik, Artikel ini merupakan tulisan saya dari blog saya yang lain di www.terwujud.com. Jika ada yang belum jelas mengenai modifikasi yang saya lakukan, silahkan tinggalkan pesan melalui form komentar di bawah. Terima Kasih!!.
*) P.S: Jika anda benar-benar mengalami kendala untuk mendapatkan wanita pujaan anda,
saya sarankan anda bergabung di
www.pencinta-wanita.com
, silahkan mendaftar menjadi anggota dan pelajari materi-materi yang dikirimkan Ronald Frank lewat email atau baca langsung di member area, untuk sementara pendaftaran anggota gratis. Daftar sekarang juga dan dapatkan bonus senilai Rp10.000.000,- (dibaca sepuluh juta).
0 comments:
Post a Comment