Membuat Label Thumb Otomatis Posting Berdasarkan Katagori Tertentu
Advertisement:
Membuat Label Thumb Otomatis Posting Berdasarkan Katagori Tertentu. Hallo sahabat kucoba, pada posting kali ini kang salman akan sedikit mengulas mengenai label thumb, apa sih label thumb itu? menurut pendapat kang salman, label thub adalah cuplikan artikel berdasarkan katagori-katagori tertentu, bila anda berkunjung ke situs vivanews, surya.co.id atau repbulika.co.id, pasti kita dapat melihatnya, namun tutorial ini bukan membahas bagaimana membuat label thumb seperti mereka, tapi lebih tepatnya label thumb ala blogger. Demonya bisa Anda lihat di jurnaldunia.com, Disana kang salman membuat sebuah template blog yang di pesan khusus oleh kang bagus.

Jika Anda tertarik ingin memesan template silakan hubungi saya via email, atau kunjungi situs saya di idblogmaker.com bulan Desember harga akan naik, jadi buruan order pada tanggal 5 November karena setiap bulannya kang salman hanya menerima 8 blog saja.

Kembali lagi, jika anda sudah sudah melihat demonya dan tertarik untuk membuat label thumb otomatis berdasarkan katagori tertentu silakan ikuti tutorial berikut ini :

1. Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"
2. Silakan copy kode ini dan taruh 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="http://3.bp.blogspot.com/-DiSuxig0X9k/TZYzqpks56I/AAAAAAAAAWM/sN1GbkQvDUI/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, silakan cari kode sidebar content
setelah ketemu kode berikut tepat di bawah sidebar content
/* 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(http://3.bp.blogspot.com/-vLzIYI99Z_M/Tqi-lUCPC5I/AAAAAAAAB2Y/39BRBaXgkGI/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(http://3.bp.blogspot.com/-vLzIYI99Z_M/Tqi-lUCPC5I/AAAAAAAAB2Y/39BRBaXgkGI/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;}
Spesial thanks herdiansyah dan idblogmaker

Panduan Melakukan Kostom tampilan Label Thumb Otomatis 
Perhatikan warna-wana yang kang salman tandai di atas dengan warna-warna, jika anda ingin memodifikasi tampilan dasar label thub dapat kalian ubah sesuai dengan kebutuhan dan desain yang di inginkan. petunjuknya :
  • Warna Merah : image atau warna untuk judul label thumb,
  • Warna Biru : Ukuran image thumb yang di tampilankan, sebaiknya di ubah jadi 60px agar cocok untuk semua jenis template blog.
  • Wana Hijau : dapat Anda modifikasi jika anda tertarik untuk mengubah tampilan huruf dan ukuran dari huruf yang di tampilkan label thumb otomatis ini.

Memasang Label Thumb Otomatis Berdasarkan Katagori Tertentu Di Blog
  1. Silakan buka Rancangan > Add Widget > Pilih HTML/Javascript 
  2. Silakan copy paste kode di bawah ini dan 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/-/Olahraga?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 thumb otomatis ini.
Tulisan Olahraga 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

Silakan bereksperimen dengan membuat label thumb otomatis mu sendiri berdasarkan katagori yang kita inginkan. Selamat mencoba..


klik +1 di artikel ini
Jika artikel ini bermanfaat dan berguna bagi , dukung kang salman memenangkan kontes SEO Metode Bisnis Online Memberikan Bukti Nyata  dengan memberikan klik 1x pada google plus one agar jumlahnya bertambah kunjungi disini

LihatJuga:

Jangan asal copy paste! baca aturannya disini
Post By Kang Salman


Mau punya template kostom dan beda dari yang lain? Order segera Jasa Pembuatan Blog > Jasa Pembuatan Banner Iklan > Jasa Pembuatan Logo Blog Order asksalman19@gmail.com 
Dapatkan update artikel  terbaru kami langsung ke email anda.  
Advertisement:
Judul : Membuat Label Thumb Otomatis Posting Berdasarkan Katagori Tertentu Deskripsi : Admin : Terbit Rating : 5 stars

  • Lifestyle