Widget Recent Post per Label with 1 thumbnail

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

 

Itu hanya bisa bekerja di

Itu hanya bisa bekerja di .blogspot atau bisa di wordpress juga yah ?

 

btw soscial media icon yg ada

btw soscial media icon yg ada di navbar atas keren juga tuh

 

wphoet wrote:

Makasih mas bro .....

 

hijabcd wrote:

Untuk pengaplikasiannya di wordpress belum saya coba ...., silahkan anda coba. Btw ... ini tutorial untuk blogger mas bro ...

 

pengen oprek template tapi

pengen oprek template tapi masih gaptek koding nya nih

 

Apakah widget recen post, tidak akan terjadi duplikat ?..
Terimakasih jawabannya..