WIDGET RECENT POST DENGAN 1 THUMBNAIL

Dunia BloggerWidget 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='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>

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:

Get free daily email updates!

Follow us!

5 Responses to "WIDGET RECENT POST DENGAN 1 THUMBNAIL"

  1. Widget blog yang mantap, trims telah berbagi

    ReplyDelete
  2. terima kasih informasi nya mas, kunjungi juga blog adik http://prediksibola888.blogspot.com

    ReplyDelete
  3. Recent Post dengan 1 thumbnail memang membuat tampilan blog lebih profesional

    ReplyDelete
  4. Widget Recent Post ini cukup menarik dan membuat tampilan blog lebih profesional .....

    ReplyDelete
  5. Widget Recent Post ... menarik untuk dipraktekkan, trims.

    ReplyDelete

Komentar yang anda tinggalkan mencerminkan pribadi anda sendiri, oleh karenanya hindari spam, pornografi, SARA, promosi produk, Anonimous dan jangan OOT.
Komentar yang sesuai pasti akan aku terbitkan dan anda akan mendapatkan backlink.
Mohon maaf bilamana terjadi keterlambatan balasan komentar.