Widget Recent Post Gallery? Begini Cara Buatnya di Blog

Mungkin kawan udah pada tau, Apa itu Recent Post Blog ?
iya, itu adalah postingan terbaru yang ada diblog kawan. Yang paling umum ketika kawan mengunjungi website atau blog orang lain, bentuk dari widget Recent Postnya terlihat biasa-biasa saja atau standar dalam bentuk Vertikal di Sidebar maupun Horizontal di Bawah Postingan.

Pernah tidak? kawan terpikir untuk membuat Recent Post dalam bentuk Gallery yang berjajar tersusun rapi. Dan tentunya hal itu akan mempercantik Blog kawan, Seperti yang kawan lihat di Blog ini saya juga menggunakan Recent Post Gallery. Terlihat lebih Simple dan enak dipandang.

Jika kawan ingin tampilan Recent Post seperti itu.
Maka ikuti Langkah-langkah diBawah ini :

1. Buka Blogger > Template > Klik Edit HTML > Salin dan simpan kode dibawah ini tepat sebelum </head>


<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function iqbalfpgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],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"+iqbalfp_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="'+iqbalfp_thumbs+'" height="'+iqbalfp_thumbs+'"/>',p=iqbalfp_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

2. Selanjutnya salin kode dibawah ini tepat sebelum ]]></b:skin> atau </style>


/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

3. Simpan Template.

4. Langkah selanjutnya buka Tata Letak > Tambahkan Widget baru kemudian salin dan simpan kode dibawah ini di dalamnya :


<script>
var iqbalfp_thumbs = 72; 
var iqbalfp_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=iqbalfpgrid"></script>

5. Simpan Widget dan lihat hasilnya..

var iqbalfp_thumbs = 72 : Ukuran thumbnail, ganti sesuai selera kawan.

var iqbalfp_title = true : Menampilkan judul post saat kursor memilih salah satu post pada thumbnail.

max-results=9 : Jumlah Post yang akan ditampilkan.

Tambahan :
Jika kawan ingin menampilkan Post berdasarkan Label, silahkan ganti url feed diatas seperti ini :



<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&amp;alt=json-in-script&amp;callback=iqbalfpgrid"></script>

BLOGGER adalah label yang akan ditampilkan

Cukup sekian postingan mengenai pembuatan Recent Post Gallery, semoga bermanfaat untuk kawan semua.

Iqbal Fp

Widget Recent Post Gallery? Begini Cara Buatnya di Blog

1 komentar: