MENAMBAHKAN WIDGET RECENT POST SUPER MANTAB DENGAN THUMBNAIL PADA BLOGGER

Artikel ini adalah lanjutan dari artikel sebelumnya yang juga berjudul hampir sama, yakini Menambahkan Widget Recent Post pada blogger. Bedanya, di sini  widget yang akan dipasang sedikit lebih variatif dan dijamin terlihat mantab, karena disertai Thumbnail (Gambar kecil khusus yang mewakili isi blog) dan deskripsi singkat (summary post) dari postingan terbaru yang ditampilkan.

Seperti yang telah dijelaskan sebelumnya, widget Recent Post adalah widget pada blogger yang menunjukkan kumpulan artikel yang terakhir dipublish atau baru aja dipublish. Dengan adanya widget ini, maka beberapa artikel yang baru kita publish akan terkumpul dalam suatu daftar dalam widget di sidebar blogger Anda. Pemasangan widget ini di blog Anda akan sangat bermanfaat dan bisa meningkatkan jumlah kunjungan pada halaman blog Anda. Selain itu akan membuat blog anda menjadi lebih berwarna dan tampak lebih menarik perhatian pengunjung untuk mengklik dan membaca isi dari posting yang disediakan. Contoh widgetnya adalah seperti contoh di gambar di bawah ini.

cara menambahkan widget recent post mantab
Contoh widget recent post with thumbnail
Oke jika Anda tertarik untuk memasang widget recent post mantab dengan thumbnail ini, bisa ikuti tutorialnya berikut ini:
1. Log in ke akun blogger Anda. Kemudian setelah masuk dashboard blogger masuk ke menu "Layout" atau "Tata Letak"
2. Klik Tambahkan Gadget pada bagian sidebar, lalu pilih HTML/JavaScript  
cara menambahkan widget recent post pada blogger

3. Setelah muncul jendela baru, copy semua kode di bawah ini dan paste-kan di bidang konten/isi. Klik simpan.
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>

<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://www.indravedia.com/2015/04/menambahkan-widget-recent-post-blogger-mantab.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

var numposts = 5 adalah jumlah post yang akan tampil dalam widget
var showpoststhumbs  untuk mengatur apakah akan menampilkan thumbnail atau tidak, jika tidak ingin tampilkan thumbnail, ganti tulisan "true" menjadi "false"
var showcommentslink : untuk menampilkan link komentar + Jumlah komentar dari postingan yang tampil.
var posts_date > untuk pengaturan menunjukkan tanggal posting 
var post_summary > untuk pengaturan apakah ingin menampilkan summary atau tidak
var summary_chars > mengatur jumlah karakter awal posting yang muncul dalam summary. Bisa dikurangi atau ditambah.


Silahkan diedit sesuai kehendak. Intinya "true" berarti perintah tampilkan dan "false" perintah sembunyikan. Paste semua code di bagian isian konten.Kemudian klik Simpan.

4. Oke setelah Anda edit, silahkan cek kembali blog Anda. Jika berhasil, maka tampilan widget nya kurang lebih seperti di bawah ini. Bagaimana, cukup mantab, bukan.
cara menambahkan widget recent post pada blogger
widget Recent Post with Thumbnail

Dan selamat, blogger anda sekarang sudah terpasang widget Recent Post yang keren dan mantab. Tentunya bisa mempercantik tampilan blog Anda dan meningkatkan kunjungan pastinya. Oke sekian tutorial sederhana tentang menambahkan widget recent post mantab dengan thumbnail ini. Semoga bermanfaat. Terima kasih. Jangan lupa baca juga Cara Membuat Readmore Pada Postingan Blog

Code source : http://helplogger.blogspot.co.id


Berlangganan dan Dapatkan 5 Ebook Dahsyat tentang Motivasi, Personal Developement dan Financial Freedom - Gratis


71 Responses to "MENAMBAHKAN WIDGET RECENT POST SUPER MANTAB DENGAN THUMBNAIL PADA BLOGGER"

  1. makasih atas tutorialnya, lengkap banget. balas kunjungi dong http://jeparanizme.blogspot.com/

    ReplyDelete
  2. Sama-sama. terima kasih juga kunjungannya.
    sip

    ReplyDelete
    Replies
    1. coy ini ga responsive yah dan title sama altnya ga ada.. kunbalnya yah dan thanks sharingnya

      Delete
  3. Thx bang RUSMAN, atas tutoNya.. Izin Copy ya bang.. Hehehe

    ReplyDelete
  4. Makasih tutorialnya dan sangat keren

    ReplyDelete
  5. ijin copy kode skrip HTMLnya ya Bang...
    Suwun

    ReplyDelete
  6. makasih tutor nya mas, minta tutor untuk menampilkan random post dong bang. tapi dengan cara yg sama kayak tutor abg.

    ReplyDelete
  7. Trimakasih tutorialnya...dicoba dulu bang.

    ReplyDelete
  8. makasii gan udah ane terapkan hehe

    ReplyDelete
  9. terima kasih gan, informasi sudah diuji coba dan berhasil.. ditunggu kunjungan baliknya ke dokuku.info - software kasir android

    ReplyDelete
  10. Pake kode yg ini baru sukses, yg lain gak muncul recent postnya, thanks gan.

    ReplyDelete
  11. terima kasih telah berbagi ilmu. Tipsnya sudah dipraktekkan dan hasilnya OK. Loading widgetnya ringan.

    ReplyDelete
  12. mas, setelah saya coba kok ngga muncul ya widget nya ?

    ReplyDelete
  13. Bagaimana caranya agar widget ini responsive? karena bila showpostsummary tidak ditampilkan, susunan recent postnya jadi tidak rapih

    ReplyDelete
  14. gak muncul gan widgetnya pake theme evomagz

    ReplyDelete
  15. sepertinya tidak semua template bisa gunakan scriptnya, soale terlalu lebar formnya

    ReplyDelete
  16. Makasih gan, udah dicoba dan work.

    ReplyDelete
  17. Tutorialnya bagus, thank dah share...
    d tunggu kunjungan balik ya www.yunisiklil.top

    ReplyDelete
  18. Gan ini script saya sudah pasang di blog saya ericabelinda dan sukses , izin copy paste sciptnya tuk post saya karena ada script yg error

    ReplyDelete
  19. makasih min recent post nya bagus...
    untuk yang lagi nyari ide usaha bisa buka ww.berwirausaha.net

    ReplyDelete
  20. nice gan , udah ane coba di blog ane dan work
    https://ceritakin.blogspot.com/

    ReplyDelete
  21. ijin copy script nya mas

    thanks

    ReplyDelete
  22. ternyata ga bisa ya,,, padahal ga ada yang dirubah scriptnya

    ReplyDelete
  23. Mantap infonya gan...kalau bisa, tambahan untuk widget ini yang pake script sticky biar lebih keren

    ReplyDelete
  24. Ijin comot gan,,,pake buat blogkuw

    ReplyDelete
  25. kalau besarin ukuran gambarnya gimana ini mas??

    ReplyDelete
  26. makasih om scriptnya sangat membantu sekali.. script di blog2 lain sudah kadaluarsa.. tapi script disini masih jossssss,, sekarang sudah terpasang di blog saya ^_^ thx http://irdaud.blogspot.com semoga berkenan untuk mampir ^_^

    ReplyDelete
  27. @0m Daud: Sama-sama om.
    Siap meluncur.. :)

    *maaf tombol reply commentnya lagi error :)

    ReplyDelete
  28. makasih bro ! akhirnya bisa tampil juga recent postnya. sebelumnya saya telah mencoba banyak script dari blog lain tapi recent postnya tidak tampil. Begitu saya coba script yang ada di blog ini akhirnya bisa tampil juga recent postnya. hihihi sekali lagi makasih banyak broo !!!

    ReplyDelete
  29. Makasih om. saya sudah pasang di blog saya. kalo berkenan silahkan tengok. hehe

    ReplyDelete
  30. tanya gan kok kalo setiap dikasih recent pos atau popular post itu punya saya yang ada cuman satu doank yang masuk ke popular post/recent post. itu juga yang kerecent postnya blog yang dikasih recent post. masa popular post nya satu doank padahal blog sayakan banyak gan T_T gimana tuh gan,mohon info

    ReplyDelete
  31. hahaha, keren gan. langsung jadi.

    ReplyDelete
  32. ijin simpan scriptnya gan... kalau boleh tau ini bisa untuk wordpress juga atau khusus untuk blogger saja ya?

    ReplyDelete
  33. Thank mas infonya.. tapi saya ingin belajar ngedit javascriptnya gimana ya?

    ReplyDelete
  34. gan cara ngilangin nomor yang disamping judul gimana?

    ReplyDelete
  35. terimakasih... tutor+tipnya kang...sangat bermanfaat bagi saya yang taunya cuma pakai saja... hhheee...

    ReplyDelete
  36. terimakasih... scriptnya kang indra... ijin langsung praktek... tutornya...

    ReplyDelete
  37. thanks alot mas artikelnya, tampilannya apik tenan.

    ReplyDelete
  38. kalau buat popular posts gimana mas? biar seragam sama widget yang ini

    ReplyDelete
  39. Mas minta tutorial cara mengatasi page yang tidak terload di di bagian kategori dong soalnya blog saya www.netheri.net gak keload pas saya klik page 2 dan seterusnya.. Mohon bantuannya ya

    ReplyDelete
  40. gan cara ngilangin nomor di samping judull gimana

    ReplyDelete
  41. Terima kasih, sangat membantu bagi pemula bagi saya :D

    ReplyDelete
  42. Terimakasih bos atas ilmunya,sangat membantu sekali bagi saya, semoga bermanfaat bos

    ReplyDelete
  43. oke.. lumayan bagus bray.. thanks

    ReplyDelete
  44. terimakasih tutornya gan, penjelasannya mudah dipahami

    ReplyDelete
  45. cara menampilkan ringkasannya bagaimana gan? dan cara menghilangkan nomor urut,, terima kasih

    ReplyDelete
  46. Cara Ngilangin Nomornya Gimana Bang -_-

    ReplyDelete
  47. Maksih gan berhasil di terapkan di blog saya

    ReplyDelete
  48. COOL script nya tinggal saya edit edit sdikit aja. kwkwkw.

    ReplyDelete
  49. terima kasih banget mas ydah simple keren lagi pas banget saya suka yang simple simple widget recent postnya #MANTAP JIWA

    ReplyDelete
  50. terima kasih atas postingan yang sangat bermanfaat,,, saya sudah mencoba tetapi tidak sepenuhnya berhasil karena posisi widgetnya tidak centrin. mungkin bisa kasih saya tips bagaimana cara mengatur posisi dan ukuran widgetnya?? terima kasih

    ReplyDelete
  51. itu script yg dibawah gk bisa dicopas gan... mungkin gegara script anti kopas nya������

    ReplyDelete
    Replies
    1. Terima kasih gan koreksinya. Sudah diperbaiki.

      Delete
  52. Terima kasih....
    Sangat bermanfaat...

    ReplyDelete

Terima kasih telah berkunjung. Silakan berkomentar dengan bijak terkait artikel yang Anda baca di atas.
Mohon maaf, Spammy Comments dan/atau mengandung Active Link tidak akan ditampilkan.