» » Cara Membuat Recent Post Sesuai Dengan Kategori

Cara Membuat Recent Post Sesuai Dengan Kategori

Oleh
Hallo sahabat Bloankers, pada posting kali ini saya akan sedikit mengulas mengenai label thumb, apa sih label thumb itu? menurut pendapat saya, 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.

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

  • Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"
  • 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7YJaa-qwlNz4m2wbW5BmB6LgPVzkWL9vzzfTdVVWFc9tq5PrJV9LDDbkN5VsB_3IGBOkHbL8L2CrVZ4dSfY2fnmLoLdULlhBZvY25BEtVgTdQzJ3pE7gB0Lb8xoZFdXF1IUtp_xgEPzU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUY0iJ4FXvaQDF8yF94i-KN8DxvcXrb8CBUbyafQe6M5s1MBgTNoOjXy8a2sSJ2WCd7siXYoLeq8je3jCsr-fzh2Cl80y4K6SRQTN0XtrCWloU4bon9uPTUuYdg87cdIjrX9kuKlc71aoZ/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/AVvXsEjUY0iJ4FXvaQDF8yF94i-KN8DxvcXrb8CBUbyafQe6M5s1MBgTNoOjXy8a2sSJ2WCd7siXYoLeq8je3jCsr-fzh2Cl80y4K6SRQTN0XtrCWloU4bon9uPTUuYdg87cdIjrX9kuKlc71aoZ/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;}

Panduan Melakukan Kostom tampilan Label Thumb Otomatis 
Perhatikan warna-wana yang saya 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 contohnyaTutorial %20 Blogger

Silakan bereksperimen dengan membuat label thumb otomatis mu sendiri berdasarkan katagori yang kita inginkan. Selamat mencoba.. Gambir Serawak
0 Komentar untuk "Cara Membuat Recent Post Sesuai Dengan Kategori"

Back To Top