Membuat Recent Posts Thumbnail/Gambar Keren

Recent PostsThumbnail/Gambar

Materi Pendidikan – Hai... semua, apa kabarnya? Pasti baik-baik kan. Kali ini materi pendidikan akan berbagi informasi seputaran blog. Siapa sih yang tak mau kalo blognya tampil cantik, keren, dan menarik pastinya para blogger ingin seperti itu. Memasang widget ini dan itu diletakkan di tempat yang pas agar blognya tampil elegan dan waw... hehe.

Pada postingan ini materi pendidikan akan memberi saran mengenai widget ‘Recent Posts’  yang bisa dibilang menariklah sedikit dan widget ini pun saya pakai di blog saya. Recent posts ini hanya menampilkan thumbnail/gambar yang saling tersusun rapi yang bisa anda lihat pada gambar posingan yang saya tampilkan di atas. Tanpa panjang lebar lagi berikut ini adalah code html dan cara pemasangan widgetnya.

• Buka blogger anda, maka akan tampil branda blogger.
• Selanjutnya ke Tata Letak
• Klik tambahkan gadget, letakan di mana yang anda inginkan
• Kemudian pilih html/javascript, maka akan tampil menu seperti di bawah ini

• Proses terakhir isilah judul
• kemudian masukan Script di bawah ini kedalam konten
<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 72;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>
• Klik simpan, dan lihat hasilnya

Itulah tadi cara membuat recent post yang menarik dan berbeda pada umumnya, semoga dapat bermanfaat untuk para blogger semua, terimakasih