Membuat Recent Posts 1 Thumbnail Ala Blog Dinamika

DINAMIKA - Cara Membuat Recent Posts Unik Ala Blog Dinamika. Nah sobat, mumpung lagi santai kami coba share topik ini, siapa tahu sobat tertarik untuk mencobanya.

Buat para master blogger (maksud saya para penggiat blog yang udah mapan dan ahli) khususnya dalam desain template dan lay out blog, cara membuat widget ini tentunya bukan barang baru dan termasuk hal sepele. Namun tidak ada salahnya bila saya dan blog Dinamika mencoba untuk mengulas dan membagi topik ini buat teman-teman blogger yang masih baru (pemula atau newbie), contohnya seperti saya (hehehe...). 

Sebelumnya telah dishare dan diulas mengenai widget popular posts, yaitu Modifikasi Popular Posts Unik Dengan Animasi 3 Dimensi, dan juga telah diposting artikel Modifikasi Popular Posts Unik Dengan Efek Pelangi Aneka Warna. Tentunya bagi para blogger yang ingin memperindah blognya dengan berbagai widget, artikel blog ini mungkin akan memiliki daya tarik tersendiri.

Membuat widget recent posts unik dengan 1 thumbnail ala blog Dinamika ini sebenarnya gampang-gampang susah, gampangnya ya tinggal copy paste, tapi susahnya ya butuh konsentrasi juga dalam memposisikan widget dengan lay out blog baik ukuran sidebar, ukuran widget, ukuran gambar (thumbnail atau icon), dan komposisi atau kombinasi warna (maksud saya dalam hal degradasi warna). 

Cara membuat widget recent posts unik dengan 1 thumbnail ala blog Dinamika ini terinspirasi dari artikel blog Maskolis dan sequel templatenya. Ini contoh gambarnya :

Setiap blog memiliki lebar halaman dan sidebar yang berbeda. Oleh karena itu silahkan sobat menyesuaikan ukuran widget recent posts ini dengan ukuran sidebar blog sobat sendiri.  

Nah, penasaran ? kalo menarik, ini nih cara membuat widget recent posts unik ala blog Dinamika (sambil santai aja ya...hehe) :

1. Pertama tentunya sobat harus sign in dulu ke akun (bagi pengguna blog Blogger.com tentunya pake akun Google ).

2. Setelah sign in, masuk ke  design, dan klik template, masuk ke edit HTML.

3. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

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}

perhatikan kode berwarna biru adalah ukuran lebar dan tinggi icon/thumbnail yang sobat inginkan tampil di blog sobat.  

4.  Masih dalam halaman edit HTML , cari kode </head> dengan menggunakan tombol F3 di keyboard komputer atau laptop sobat, dan masukkan kode 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/AVvXsEhFNo1fcy4X540LCLAeYZB5WhFQ-vnziksJeVJDY_64P9yjDlu78goOms6PB4SFre4q0jdcmXPZiMpTO_9GA1lu_exRZpeqPn2ymyawLWmnIDZ62W_zVIp-b2IaaAzxWuUtiC6RC90QI9XZ/';}
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>

dan klik save. 

5. Kemudian masuk ke halaman lay out, akan muncul jendela yang berisi daftar widget yang disediakan Blogger.com. Klik Add Gadget >> HTML/Javascript. 

6. Copy paste kode 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 = 125;</script>

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

perhatikan tulisan berwarna biru adalah (url) atau alamat label blog sobat yang ingin ditampilkan, ganti sesuai dengan label yang sobat miliki di blog. 

8. Klik save dan selesai. 

Itu dia cara membuat recent posts unik dengan 1 thumbnail ala Blog Dinamika, mudah-mudahan memiliki manfaat buat teman-teman blogger.