Cara Memasang Widget Recent Post Gallery

Cara Memasang Widget Recent Post Gallery - Setelah kemarin membuatkan Cara Memasang Recent Post Widget di Blog , pada postingan kali ini Saya akan membuatkan widget yang juga masih memiliki fungsi yang sama adalah menampilkan artikel terbaru di blog namun dengan tampilan yang berbeda.

Kebetulan untuk widget ini tidak disertakan demo, jadi dapat lihat pola tampilan di bawah ini :

Screenshot tampilan Widget Recent Post Gallery

Ok eksklusif saja berikut cara penerapannya :

1. Buka Blogger > Template > Klik Edit HTML > Salin dan simpan aba-aba di bawah ini sempurna sebelum </head>

<script type='text/javascript'> //<![CDATA[ // Recent Post Gallery function arlinagrid(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"+arlina_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="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="Cara Memasang Widget Recent Post Gallery">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))} //]]> </script>

2. Selanjutnya salin aba-aba di bawah ini sempurna 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 gres lalu salin dan simpan aba-aba di bawah ini di dalamnya :

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

5. Simpan widget dan lihat hasilnya.

Keterangan :

var arlina_thumbs = 72 : Ukuran thumbnail, ganti sesuai selera
var arlina_title = true : Menampilkan judul post dikala kursor menentukan salah satu post pada thumbnail
max-results=9 : Jumlah post yang akan ditampilkan

Tambahan :

Jika ingin menampilkan post menurut label, silakan ganti url feed di atas ibarat ini :

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

BLOGGER merupakan nama label yang akan ditampilkan.

Cukup sekian mengenai Cara Memasang Widget Recent Post Gallery, supaya bermanfaat.