Keinginan para blogger pasti salah satunya adalah blognya tampil
menarik dimata para pengunjungnya karena jika tampilanya menarik akan
membuat betah pengunjung berlama-lama melihat blog anda dan membuatnya
sering kembali mengunjungi blog anda ,nah berikut saya akan share sebuah
artikel untuk mempercantik blog kamu semoga bermanfaat ya buat kamu .
Berawal dari keinginan saya supaya blog saya kelihatan menarik seperti
situs-situs berita besar yang tampilannya memiliki gambar kecil disertai
potongan artikel yang dikelompokkan berdasar label tertentu ,akhirnya
saya temukan cara
di situs kucoba.com yaitu cara membuat label dengan thumbnail otomatis
yang
dilengkapi dengan potongan artikelnya .
Berikut adalah cara dan langkah-langkah untuk membuatnya :
Berikut adalah cara dan langkah-langkah untuk membuatnya :
- Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"
- Silakan copy kode dibawah ini dan letakkan tepat di atas </head>
<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgM0McHSBZP6wueINHQ3U-AyAI9dIXuFHuuCOcDoSLcGCgwLWRoG2bS4c1NBmIkB5aLCRY-WJiwgkqbMmmyn1gby1KeUJ0pKabHc-mG5zDCaIcDNZujc5Il5ijopwavJeX7GJMIAUHnI/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>
- Setelah selesai, kemudian cari kode kata sidebar content setelah ketemu letakan kode berikut tepat di bawahnya:
/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW414FfAnuuVuergNDKTvY5B3NWZ7B5cHaL1esz9Dy9Ljp5e0XfNizpOgu5P3Vgf6Q8kNR8Y1_nK2OEg3yerD84MRRR1cojUQyrgV1E3kjfLqLRj5h0Qok0UHdyxcFsYJS6RByZghwmyC_/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW414FfAnuuVuergNDKTvY5B3NWZ7B5cHaL1esz9Dy9Ljp5e0XfNizpOgu5P3Vgf6Q8kNR8Y1_nK2OEg3yerD84MRRR1cojUQyrgV1E3kjfLqLRj5h0Qok0UHdyxcFsYJS6RByZghwmyC_/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}
- Simpan template
- Selanjutnya kamu silakan buka Rancangan > Add Widget > Pilih HTML/Javascript
- Copy paste kode di bawah ini lau simpan di HTML/Javascript tadi:
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script> <script type="text/javascript" src="/feeds/posts/default/-/BLACKBERRY?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Keterangan :
- Angka 4 yang di tebalkan di atas adalah jumlah dari sub label katagori yang di munculkan di label thumbnail ini.
- Tulisan BLACBERRY yang di tebalkan adalah nama label yang di ingin di munculkan di label thumb. Jika label tersebut memiliki lebih dari satu kata, tambahkan %20 contohnya Tutorial%20Blogger.
Label dengan thumbnail ini masih bisa anda modifikasi sesuai dengan
selera kamu seperti backgroundnya warna tulisan dan jumlah postingnya
,saya ucapkan selamat berkreasi dan semoga berhasil ,jangan lupa share
artikel ini jika menurut anda bermanfaat ya ,,,,,,
