Kode script untuk memasang recent post bergambar sesuai label/kategori

Sebenarnya Cara Memasang Recent Post ini sudah banyak dibahas oleh para master blogger. Namun biasanya dan kebanyakan yang dibahas hanya bisa menampilkan artikel-artikel yang disortir berdasarkan postingan terakhir yang diterbitkan.

Nah, Pada postingan kali ini kita akan coba membahas yang sedikit berbeda. Yaitu Bagaimana Cara menampilkan postingan-postingan terakhir tersebut diurutkan berdasarkan label. Hal ini akan sangat berguna buat kita jika blog yang ingin kita tulis berupa Blog berita. Seperti yang kita ketahui bersama biasanya blog atau web yang berupa berita ini biasanya menggunakan design seperti halnya Magazine atau Majalah.

Perbedaan template ini biasanya dilengkapi dengan kolom yang banyak agar kita bisa memasang widget yang juga tidak sedikit. Dimana nantinya setiap widget ini mempunyai fungsi untuk menampilkan artikel-artikel terdahulu yang di shortir berdasarkan label dari postingan.

Berikut ini adalah fungsi yang bisa kita manfaatkan dengan Memasang Script Recent Post By Labelini.

1. Recent Post By Label Hanya Judul Postingan.
2. Recent Post By Label Judul dan Gambar Postingan.
3. Recent Post By Label Judul, Gambar dan Jumlah Komentar Postingan.
4. Recent Post By Label Judul, Gambar dan Tanggal Postingan.
5. Recent Post By Label Judul, Gambar, Jumlah Komentar dan Tanggal Postingan.
6. Recent Post By Label Judul, Gambar, Jumlah Komentar, Tanggal Postingan dan Baca Selengkapnya.

Cara pemasangannya.
1. Masuk ke Dashboard -> Design -> Edit Html.
2. Cari kode </head>
Kemudian letakkan kode berikut diatasnya.

view plainprint?

1. <script type="text/javascript">  
2. //<![CDATA[  
3. 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/AVvXsEgtaUixRan1AbbuAYfVtFjg8OCialDBGk3iSaeg_hyphenhyphenRsI_w5Ku6PJy85frMhOR9mxbsnMQ6UyJWiqpX7dZE4XgZOCG57ke9TgnsU5xwDg5N-1rQht6_VvchcEpe5_3DOsR9knEc7kdg4ws/s1600/no_thumb.gif"}}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('  
4. <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>  
5. ");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("  
6. ");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>  
7. ");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};  
8. //]]>  
9. </script>  

4. Save Template.
5. Kembali ke Dashboard -> Design -> Add Element -> HTML/JavaScript.

<script type="text/javascript">
var numposts = 4;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = false;
var showcommentnum =   true ;
var showpostdate = true;
var showpostsummary =  true ;
var numchars = 340;
</script>

<script src="/feeds/posts/default/-/LabelPost?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

Keterangan kode:

1. var numposts = 4;  = jumlah Postingan yang ingin ditampilkan
2. var showpostthumbnails = false; = Kode Menampilkan gambar
3. var displaymore = false;  Kode Menampilkan tulisan read more
4. var showpostdate = true; = Kode Menampilkan tanggal posting
5. var showcommentnum =   true ; Kode Menampilkan Jumlah Komentar Postingan
6. var showpostsummary =  true ; Kode Menampilkan sebagian isi Postingan
7. var numchars = 340; Panjang karakter isi postingan yang ditampilkan
8. var displayseparator = false; Kode Untuk memberikan Pembatas setiap tampilan

Ganti false (kode warna merah) dengan  true (kode warna biru) untuk menampilkan, demikian juga sebaliknya.

<script src="/feeds/posts/default/-/LabelPost?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">

Ganti LabelPost (kode warna cokelat) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan %20.
Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:

<script src="/feeds/posts/default/-/Belajar%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">

Tambahan:
Kode ini juga bisa dipakai untuk memanggil feed post blog kita yang lain. Caranya adalah cukup dengan menambahkan URL BLOG dan Label yang ingin ditampilkan.

Contoh:

<script src="http://URL-BLOG-ANDA/feeds/posts/default/-/Belajar%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">

[sumber]

Tweet