Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa sobat pilih sendiri. Contoh bisa sobat lihat pada gambar di samping ini.




Penulis Bulukumba (Pb) 


Nah kalo sobat blogger tertarik buat masang widget ini, gampang koq. Tinggal ikuti tutorial berikut ini…


1. Seperti biasa, login ke akun blogger / dashbor sobat.
2. Pergi ke tab rancangan >> edit html 


3. EXPAND TEMPLATE WIDGET



4. cari kode 



(*Gunakan F3 di keyboard untuk mempermudah pencarian)


5. Copy paste kode di bawah ini sebelum kode No.4


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







6. Halaman baru akan tampil , seperti contoh gambar di bawah ini.



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





7. Scroll ke bawah dan temukan kode 

8. Copy paste kode di bawah ini sebelum kode No.5
 











  • <script type='text/javascript'>
    //function labelthumbs(json){document.write('class    ="label_with_thumbs">');for(var i=0;iif(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("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('























  • ');if(showpostthumbnails==true)
    document.write('');document.write(''+posttitle+'
    ');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'+commenttext+'';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'More »';flag=1;;}
    document.write(towrite);document.write('













    • ');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('');}
    //]]>




    9. SAVE template.sampai disini belum selesai. 






    10. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript 11. Masukkan kode di bawah ini kedalam contents



















    12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.


    13. Klik Save / Simpan.


    13. Selesai! , Semoga bermanfaat…




    Sumber : daw-xp

    0 komentar