Thursday, June 1, 2017

Tutorial Membuat Widget Posting Terbaru Berdasarkan Label atau Kategori

Salam blogger,
Kini postingan yang telah di buat tidak hanya bisa ditampilkan dalam popular post, atau recent post, tapi yang lebih menariknya, anda bisa menampilkan posting tersebut berdasarkan label. Jadi cara ini lebih memudahkan kepada pengunjung untuk mencari artikel yang di maksud, dan juga lebih mempercantik blog
Trik ini biasanya kalau saya tinjau lebih banyak digunakan dalam template template yang berisi berita, seperti liputan6, kompas, tribun, atau juga situs berita luarnegeri. 
 Ada salah cara untuk Membuat Widget Posting Terbaru Berdasarkan Kategori/Label tertentu, yaitu dengan memasukkan URL Blog dan Memasukkan kode HTML/Javascript serta memasukan url dari blog yang dimaksud.

CARA 1
1. Layout > Add a gadget > Feed
2. Masukkan url:

http://staf-online.blogspot.com/feeds/posts/default/-/Label
3. Save!
Cara 1 ini sangat jarang cocok dengan template pada umumnya, telah saya coba dan hasilnya kosong, artinya script diatas tidak diterjemah oleh google

CARA 2
1. Layout > Add a gadhet > HTML/Javascript
2. Masukkan (Copas) salah satu kode berikut ini, pilih saja, atau tes satu-satu, mana yang cocok menurut selera dan pasa dengan template blog Anda.
3. Save!

Berikut ini Kode-Kode Posting Terbaru Berdasarkan Label yang harus Anda Copas di langkah kedua cara 2 di atas:

KODE 1 : Posting Terbaru Berdasarkan Label  Simple

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>
Kode 1 ini juga sama jarang cocok dengan template pada umumnya, dikarenakan di dalam scrip kita hanya memasukan url label saja tanpa mendetek alamat dari blog yang dituju.

KODE 2 : Posting Terbaru Berdasarkan Label Simple
Kode 2 ini, telah saya coba, dan ternyata mudak cocok dengna semua template blog. Hasil dari percobaan saya seperti :
Dari contoh di atas, ada yang perlu dirubah untuk menambah keindahan blog, yaitu memperkecil jarak pada setiap baris dari label yang ditampilkan, tapi sampai saat ini saya belum bisa merubah scriptnya. Jika anda telah menemukan caranya, bisa sharing ke alfidie11@gmail.com. Kode ini lebih minimalis tapi bisa menampilkan semua posting dari label tertentu, karena diringkas dengan adanya tombol scroll

<div style="border: 1px solid rgb(000, 000, 000); height: 200px; overflow: auto; padding: 10px; width: 90%;">
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="http://staf-online.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>
</div>

KODE 3 : Posting Terbaru Berdasarkan Label Tanpa Gambar Thumbnail
Kode 3 ini telah saya coba ditemplate blog pribadi dan hasilnay seperti gambar di bawah ini :
Jadi kode 3 ini tidak jauh berbeda dengan kode 2, perbedaannya hanya terletak pada tidak memakai garis dan tanpa adanya scroll. Sehingga kalo jumlah posting yang ditampilkan banyak, ini sangat memboroskan dari ruang blog anda.
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<script src="http://stafonline.blogspot.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>
KODE 4 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail
Alhamdulilah kode 4   ini telah saya coba dan hasilnya woow lebih keren dari dari kode di atas. Mengapa ? karena labelnya disertai dengan thumbail. Hasilnya seperti di bawah ini

Tapi sebelum anda mencoba, ada beberapa hal yang perlu anda perhatikan sebelum mempraktekkan dan mencobanya, yaitu :
1. Diharapkan anda muncul postingan berjumlah ganjil, kenapa ? karena salah satunya ditempatkan menyendiri di atas, sedangkan sisanay ditempatkan dibawah salah berpasangan. Jadi postingan ini akan berjumpah genap sehingga pasa berpasangan.
2. Letakkan pada gadget dengan ukuran 640 atau dua kali lipat dari contoh kode 2 dan 3

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><script type="text/javascript" src="http://yourjavascript.com/71374511518/recent-post-label-thumbnail.js"></script><script>
var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://staf-online.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

KODE 5 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail
Alhamdulilah pada kodoe 5 terakhir saya sudah mencoba dan ternyata wow sama kerennya dengan kode 4, hasilnya bisa anda lihat dibawah :

 Perbedaannya sudah jelas dari tampilan dan peletakkan gambar, namun sebelum andan mencoba perlu saya kabarkan hal penting yang tentu belum anda ketahui :
1. Masukan jumlah posting genap supaya terlihat berpasangan, berbeda dengan kode sebelumnya
2. Kodek 5 ini tanpa memakai nama blog, jadi artinya anda hanya diperbolehkan memasukan label internah yaitu yang terdapat pada blog itu sendiri.
<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

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">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Catatan: Perhatina yang warna merah
1. Ganti contohblognih dengan alamat blog
2. Ganti Label dengan Label Posting yang akan ditampilkan
3. Label Dua Kata gunakan kode pemisah %20 sehingga menjadi Nama%20Label
4. Kode yang berisi nama blog, itu diperboleh anda mengabil dari blog luar jadi bukan dari blog itu sendiri, meskipun ditempat dialah lain alamat blog
Nah itu dia Cara Membuat Widget Posting Terbaru Berdasarkan Label alias Artikel Per Kategori.
Previous Post
Next Post

0 komentar: