MENAMBAHKAN WIDGET RECENT POST SUPER MANTAB DENGAN THUMBNAIL PADA BLOGGER

Baca Juga

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.

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  

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEiAVn439ftSkq1Gz3ouKs15FghS0q663oYizVdveGO0q4L_3mJFrcjFa8bdUHtWLayik_9QTYNDcD_es3TKsRyZwyYT9_wRRFAby5WBTNd24tu6KitjhUjxjbqEbLQ7dOQkU4FTXniS71/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.

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

loading...

Tweet

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

Nama Depan

Alamat Email Valid