MEMBUAT RECENT POST PER LABEL

MUSIK DIGITAL kali ini akan berbagi tips-trik blogging tentang membuat recent post per label, yang mana widget recent post per label ini menurut kami (MUSIK DIGITAL) akan semakin menambah tampilan profesional blog, semacam situs-situs social-bookmark yang lain ex. detik.com, kompas.com, tempo-interaktif, atau yang lain-lainnya.

Layaknya sebuah blog yang ingin terlihat profesional, harus juga menampilkan yang sederhana tetapi bisa memudahkan penelusuran. Menu navigasi yang mudah bisa membuat pembaca blog merasa nyaman. Untuk itu blog juga menampilkan recent post atau link tulisan-tulisan terbaru kita di blog.

Blog yang bagus adalah tulisan atau postingan dikategorikan dengan rapi. Jika di blogspot kita menggunakan fitur label untuk mengaktegorikan jenis tulisan yang memiliki kesamaan. Misalnya saja kalau di blog ini ada, tutorial blog, tips ngeblog, widget dan sebagainya.

Untuk menyajikan lebih banyak menu dan pilihan, kita bisa membuat atau memasang widget recent post yang di tampilkan berdasarkan kategori atau recent post per label. Dengan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya.

Cara Membuat Recent Post Per Label
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>

<br /> img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}<br /> img.label_thumb:hover{background:#f7f6f6}<br /> .label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}<br /> ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}<br /> .label_with_thumbs a{}<br /> .label_with_thumbs strong{}<br />

5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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/AVvXsEjJOZZa2a-zxOhbLgXnbgRF2kO2WbX9Q0y7ID4u0Qcuw_osUtLjNW-YtZFQD31J0gk111YfAVDJZdxBTCwvYOWWvPxlyewrHhsuISrXQb7exdfConpxDXMui5gN9P9G8cpIn3Cz-xkfbKQn/';}
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('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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>

6. Simpan Template jika sudah selesai.

Langkah-langkah di atas adalah untuk mengkostumisasi template. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu:

7. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript
8. Kemudian masukan kode berikut ini:

<script type='text/javascript'>var numposts = <span style="color: red;">3</span>;var showpostthumbnails = <span style="color: red;">true</span>;var displaymore = <span style="color: red;">false</span>;var displayseparator = <span style="color: red;">false</span>;var showcommentnum = <span style="color: red;">false</span>;var showpostdate = <span style="color: red;">false</span>;var showpostsummary = <span style="color: red;">true</span>;var numchars = <span style="color: red;">80</span>;</script><br /> <br /> <script type="text/javascript" src="/feeds/posts/default/-/<b><span style="color: lime;">NAMALABEL</span></b>?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>

9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks yang berwarna hijau dengan nama label yang akan ditampilkan. Simpan jika sudah selesai.

Sumber inspirasi : http://kurniasepta.blogspot.com/2012/05/membuat-recent-post-per-label.html

Tweet