WIDGET RECENT POST DENGAN 1 THUMBNAIL

Widget recent post per label adalah merupakan sebuah menu navigasi (yang biasanya diletakkan pada bagian homepage blog), berguna untuk menginformasikan kepada visitor atau pengunjung tentang artikel atau postingan blog yang memiliki label (kategori) sama. Widget ini sangat bermanfaat serta memudahkan pengunjung untuk mengakses artikel atau postingan blog yang berlabel sama dari sekian banyak artikel-artikel yang ada dan tersedia dalam sebuah blog.

Bila pada bagian bawah masing-masing artikel atau postingan blog terdapat Widget Related Post (with thumbnail), maka pada halaman homepage kita juga dapat memiliki Widget Recent Post per label sebagaimana yang akan kita bahas 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 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 penting saja.

Sebagai catatan, Widget Recent Post per label (plus satu 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.

Beginilah cara membuatnya  :

Login ke akun blogger anda.
Pilih Template, edit template (kalau dulu pakai centang expand template widget)
Carilah kode ]]></b:skin> gunakan Crtl F atau F3 sebagai alat, kemudian copy kan rangkaian script berikut ini di atasnya.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Langkah selanjutnya, masih dalam posisi edit html, carilah kode </head> kemudian copy kan rangkaian script berikut ini di atasnya.

<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/AVvXsEjNfj5VTr5BSvnVICeUJai9L84tDVZg27I7BlJApGen75EJ0xDzSqS1pdV7l6fVcIF0Nfqcyby9vWzqfsDLEF-NxvXGGhGRDqQi2gsOUouWyknDWYPCgJHyuRAWNX4HGojK3Qh49z5zP9AM/';}
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>

Atau anda dapat menggunakan script yang telah saya sederhanakan berikut ini  :

<script type="text/javascript" src="http://yourjavascript.com/41538161731/recentpost1thumb.js"></script>

Kemudian simpan perubahan template anda tersebut, langkah awal telah selesai.

Langkah berikutnya adalah, anda masuk ke Tata Letak (layout), anda pilih salah satu tempat (sidebar atau footer), tambahkan menu html gadget, kemudian copy kan rangkaian script berikut ini ke dalamnya  :

<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://duniablog99.blogspot.com/feeds/posts/summary/-/opini?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://duniablog99.blogspot.com/search/label/opini" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Keterangan :
Tulisan yang tercetak tebal dan berwarna merah adalah judul label yang akan kita tampilkan, sedangkan tulisan berwarna biru tebal adalah alamat blog anda. Gantilah semuanya sesuai dengan keinginan anda.

Selamat mencoba, semoga berhasil, bila masih ada masalah, silahkan hubungi kami lewat kotak komentar di bawah ini.

Related Posts:

• Strategi meningkatkan loading blog
• Dunia Blogger, memaksimalkan SEO score blog
• MENAMPILKAN WIDGET/GADGET PADA HALAMAN TERTENTU
• MEMBUAT WIDGET TWITTER KEREN
• Dunia Blogger, membuat halaman otomatis

Get free daily email updates!

Follow us!