Artikel ini yaitu 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, alasannya yaitu 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 yaitu widget pada blogger yang mengatakan kumpulan artikel yang terakhir dipublish atau gres aja dipublish. Dengan adanya widget ini, maka beberapa artikel yang gres kita publish akan terkumpul dalam suatu daftar dalam widget di sidebar blogger Anda. Pemasangan widget ini di blog Anda akan sangat bermanfaat dan dapat meningkatkan jumlah kunjungan pada halaman blog Anda. Selain itu akan menciptakan blog anda menjadi lebih berwarna dan tampak lebih menarik perhatian pengunjung untuk mengklik dan membaca isi dari posting yang disediakan. Contoh widgetnya yaitu ibarat pola di gambar di bawah ini.
 |
| Contoh widget recent post with thumbnail |
1. Log in ke akun blogger Anda. Kemudian sehabis masuk dashboard blogger masuk ke sajian "Layout" atau "Tata Letak"
2. Klik Tambahkan Gadget pada bab sidebar, kemudian pilih HTML/JavaScript
3. Setelah muncul jendela baru, copy semua instruksi 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/AVvXsEgNCAr5-rtJuUhuNFPltZ7uXCHzoUBSPTcmdvfOjFJeKT4x0TmVXu01RWNZ6Bux9ZDTRIVCaEgjHphfFLv5fZKaY-Lmb0AO1PDg7NdjdbXsUaybe0-iYga5zfUaZHzDH3R-Is3_esHuqZWu/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+'" sasaran ="_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" sasaran ="_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+'" sasaran ="_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=" " 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 yaitu jumlah post yang akan tampil dalam widget
var showpoststhumbs untuk mengatur apakah akan menampilkan thumbnail atau tidak, kalau tidak ingin tampilkan thumbnail, ganti goresan pena "true" menjadi "false"
var showcommentslink : untuk menampilkan link komentar + Jumlah komentar dari postingan yang tampil.
var posts_date > untuk pengaturan mengatakan tanggal posting
var post_summary > untuk pengaturan apakah ingin menampilkan summary atau tidak
var summary_chars > mengatur jumlah abjad 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 bab isian konten.Kemudian klik Simpan.
 |
| widget Recent Post with Thumbnail |
Dan selamat, blogger anda kini sudah terpasang widget Recent Post yang keren dan mantab. Tentunya dapat mempercantik tampilan blog Anda dan meningkatkan kunjungan pastinya. Oke sekian tutorial sederhana wacana 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
Code source : http://helplogger.blogspot.co.id
