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 ialah menampilkan artikel terbaru di blog namun dengan tampilan yang berbeda.

Kebetulan untuk widget ini tidak disertakan demo, jadi dapat lihat teladan 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 instruksi 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 instruksi 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 instruksi 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.

Tweet

Subscribe to receive free email updates: