18 June 2013

Membuat Recent Posts 1 Thumbnail Ala Blog Dinamika

Recent Posts 1 Thumnail
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 :
Recent Posts


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


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.
Like This Article:
Share This Article : Facebook Twitter Google+

Artikel Terkait:

19 comments:

  1. keren sob di tunggu come backnya :)

    ReplyDelete
    Replies
    1. trims kunjungannya gan....follow juga ya, hehe....sip segera meluncur ke TKP

      Delete
  2. Replies
    1. trims sudah berkunjung gan...

      Delete
    2. saya sangat berterima kasih banyak MBAH RAWA GUMPALA atas bantuan pesugihan dana ghaib nya kini kehidupan kami sekeluarga sudah jauh lebih baik dari sebelumnya,ternyata apa yang tertulis didalam blok MBAH RAWA GUMPALA itu semuanya benar benar terbukti dan saya adalah salah satunya orang yang sudah membuktikannya sendiri,usaha yang dulunya bangkrut kini alhamdulillah sekaran sudah mulai bangkit lagi itu semua berkat bantuan beliau,saya tidak pernah menyangka kalau saya sudah bisa sesukses ini dan kami sekeluarga tidak akan pernah melupakan kebaikan MBAH,,bagi anda yang ingin dibantu sama MBAH RAWA GUMPALA silahkan hubungi MBAH di 085 316 106 111 insya allah beliau akan membantu anda dengan senang hati,pesugihan ini tanpa resiko apapun dan untuk lebih jelasnya buka saja blok mbah
      BUKA PESUGIHAN PUTIH TAMPA TUMBAL

      Delete
  3. mantap nih, ane mw coba dlu gan, izin sedot.

    ReplyDelete
    Replies
    1. sip gan....jangan lupa link sumbernya ya...gak usah pake eksternal link juga gpp yang penting nama blognya, hehehe...atuuurrrr..

      Delete
  4. keren recent postnya,kalau untuk recent post bergerak,ada tutorialnya gak gan ?

    ReplyDelete
  5. Ikut simak gan keren juga nih recent post nya

    ReplyDelete
  6. mantap mas, kunjungi juga blog adik http://prediksibola888.blogspot.com

    ReplyDelete
  7. info yang menarik dan mudah di pahami. saya bisa memperaktekkan info dari anda ini dengan mudah. Terimakasih

    zie's for you - JalanJalan | Berkunjung | Silaturahmi

    ReplyDelete
  8. Mantap gan w coba dulu cpa tau berhasil mksh gan

    http://triksgratis.blogspot.com

    ReplyDelete
  9. mantap ijin gunakan gan

    ReplyDelete
  10. ijin icip icip gan , thank buat share nya

    ReplyDelete
  11. Manteep sob untuk artikelnya, sangat membantu :)

    ReplyDelete
  12. Mantaap sekali gan artikelnya, sangat membantu sekali
    Izin nyimak saja ya gan :)

    ReplyDelete
  13. Keren sob artikelnya, sangat bermanfaat sekali buat saya
    Ditunggu info yang lainnya, izin nyimak saja ya :)
    http://goo.gl/JFjoOh

    ReplyDelete

TATA CARA BERKOMENTAR :
-------------------------------------
* Silahkan berkomentar dengan sopan, komentar dapat berupa kritik, saran dan masukan, dan menggunakan tata bahasa baku tanpa menyingkat tulisan.
** Tidak menggunakan kata atau kalimat yang mengandung sex dan SARA.
*** Tidak menggunakan link aktif/hidup dan spamming, dan untuk indentitas komentator sebaiknya menggunakan name/URL atau OpenID, bukan anonymous.

Terima Kasih karena telah berkunjung dan berkomentar di halaman ini.
Silahkan ketik komentar anda di comment box >>>

Mau? Rahasia sukses tanpa MODAL.. 0% RESIKO.. 100% GRATIS.. 1000% PROFIT.. Join now!! IndoBOclub <<<||>>> Terima Kasih Telah Berkunjung Ke Blog DINAMIKA