Widget recent post (per label) adalah merupakan sebuah menu navigasi artikel atau postingan (yang biasanya diletakkan pada halaman homepage blog), widget ini berguna untuk menginformasikan kepada visitor atau pengunjung tentang artikel atau postingan blog yang memiliki label (kategori) sama. Widget ini sangat bermanfaat untuk mempercantik tampilan blog serta memudahkan pengunjung untuk mengakses artikel atau postingan blog yang berlabel (kategori) sama dari sekian banyak artikel-artikel yang ada dan tersedia dalam sebuah blog. Bila pada bagian bawah masing-masing artikel atau postingan blog (biasanya) terdapat Widget Related Post (with thumbnail), maka pada halaman homepage kita juga dapat memiliki Widget Recent Post per label sebagaimana yang akan kita bahas (cara pembuatannya) berikut ini. Dari sisi fungsi, kedua widget ini memiliki fungsi yang sama yaitu menampilan artikel-artikel dengan label yang sama, perbedaannya adalah untuk Widget Related Post (with thumbnail) biasanya hanya terfokus pada satu label saja, sedangkan untuk Widget Recent Post per label ini dapat dimodifikasi untuk menampilan keseluruhan label (artikel atau postingan) yang ada pada sebuah blog. Tentu saja kita harus menampilkan semua kategori (label) postingan yang ada, baik pada bagian side-bar ataupun pada bagian footer. Namun bisa juga kita hanya menampilkan label-label tertentu yang kita anggap paling penting untuk ditampilkan. Sebagai catatan, Widget Recent Post per label (1 thumbnail) yang akan kita buat ini nantinya hanya akan menampilkan satu thumbnail saja pada bagian awalnya, sedangkan artikel-artikel yang lainnya hanya akan ditampilkan judul-judul artikelnya saja. Semakin bingung juga rupanya, baiklah silahkan anda lihat gambar di bawah ini : Untuk demonya anda dapat melihatnya pada http://duniabloggerku67.blogspot.com, dan lihat pada bagian footernya. Bila anda tertarik untuk membuatnya, beginilah cara membuatnya : Login ke akun blogger anda. Pilih Template, lanjutkan dengan edit HTML (kalau dulu pakai centang expand template widget). Carilah kode Code: ]]></b:skin> gunakan Crtl F atau F3 sebagai alat bantu, kemudian copy kan rangkaian script berikut ini di atasnya. Selanjutnya, masih dalam posisi edit html, carilah kode Code: </head> kemudian copy kan rangkaian script berikut ini di atasnya : Spoiler Code: <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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';} 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> Untuk memperingan loading blog anda, rangkaian script tersebut telah aku sederhanakan dengan yang berikut ini : Kemudian simpan perubahan template anda tersebut, dan langkah awal telah selesai. Langkah berikutnya adalah, anda masuk ke Tata Letak (layout), anda pilih salah satu tempat (sidebar atau footer), tambahkan menu HTML widget, kemudian copy kan rangkaian script berikut ini ke dalamnya : Spoiler Code: <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> <script type="text/javascript" src="/feeds/posts/default/-/OPINI?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://duniabloggerku67.blogspot.com/feeds/posts/summary/-/OPINI?max-results=6&alt=json-in-script&callback=recentpostslist"></script> <a href="http://duniabloggerku67.blogspot.com/search/label/OPINI" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a> Keterangan : Gantilah tulisan duniabloggerku67.blogspot.com dengan alamat url blog anda sendiri, selanjutnya ganti tulisan OPINI dengan nama label artikel blog yang ingin anda tampilkan. Selamat mencoba, semoga berhasil, bila masih ada masalah, silahkan hubungi aku lewat kotak komentar di bawah ini. Sumber asli : http://duniabloggerku67.blogspot.com/2013/01/widget-recent-post-dengan-1-thumbnail.html nawi667, Jul 13, 2013 #1 kaliwungu likes this. hijabcd New Member Joined: Jun 23, 2013 Messages: 21 Likes Received: 0 Trophy Points: 6 Itu hanya bisa bekerja di Itu hanya bisa bekerja di .blogspot atau bisa di wordpress juga yah ? hijabcd, Jul 13, 2013 #2 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author btw soscial media icon yg ada btw soscial media icon yg ada di navbar atas keren juga tuh wphoet, Jul 13, 2013 #3 nawi667 Member Joined: Jul 5, 2013 Messages: 113 Likes Received: 6 Trophy Points: 18 Google+: Author wphoet wrote: Makasih mas bro ..... nawi667, Jul 14, 2013 #4 nawi667 Member Joined: Jul 5, 2013 Messages: 113 Likes Received: 6 Trophy Points: 18 Google+: Author hijabcd wrote: Untuk pengaplikasiannya di wordpress belum saya coba ...., silahkan anda coba. Btw ... ini tutorial untuk blogger mas bro ... nawi667, Jul 14, 2013 #5 ncang Super Level Joined: Feb 7, 2013 Messages: 4,655 Likes Received: 761 Trophy Points: 113 Google+: Author pengen oprek template tapi pengen oprek template tapi masih gaptek koding nya nih ncang, Jul 17, 2013 #6 kaliwungu Member Joined: Jan 7, 2017 Messages: 152 Likes Received: 12 Trophy Points: 18 Apakah widget recen post, tidak akan terjadi duplikat ?.. Terimakasih jawabannya.. kaliwungu, Mar 9, 2017 #7 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Widget Recent Post Tentang 7 Gadget/Widget Blogger Yuyutsu, Sep 4, 2016, in forum: Blogger Replies: 0 Views: 1,377 Yuyutsu Sep 4, 2016 [ Share ] Widget Popular Post Keren Leon Sion Turnip, Jan 11, 2016, in forum: Blogger Replies: 12 Views: 1,645 fikrishare Jan 12, 2016 Cara memasang widget facebook fans page di blog terbaru update 2015 Ana Nurkhasanah, Sep 27, 2015, in forum: Blogger Replies: 9 Views: 1,610 Andrie9_9 Sep 29, 2015 Widget Blogger Yang Super Aneh...Ada Solusi??? Adam Aiyasi, Jul 15, 2015, in forum: Blogger Replies: 11 Views: 1,284 Adam Aiyasi Jul 16, 2015 [ASK] Cara menghapus widget CSS default Blogger ihsansfd, Jun 29, 2015, in forum: Blogger Replies: 4 Views: 1,207 KangAndre Jun 29, 2015 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
hijabcd wrote: Untuk pengaplikasiannya di wordpress belum saya coba ...., silahkan anda coba. Btw ... ini tutorial untuk blogger mas bro ...