Cara Memasang Widget Recent Post Gallery

8/09/2015
Cara Memasang Widget Recent Post Gallery di Blog

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

Kebetulan untuk widget ini tidak disertakan demo, jadi bisa lihat contoh tampilan di bawah ini :

Screenshot tampilan Widget Recent Post Gallery

Widget Recent Post Gallery

Atau bisa kunjungi blog Twisted Shape jika belum dihapus widgetnya.


Ok langsung saja berikut cara penerapannya :

1. Buka Blogger > Template > Klik Edit HTML > Salin dan simpan kode di bawah ini tepat 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="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

2. Selanjutnya salin kode di bawah 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 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 saat kursor memilih salah satu post pada thumbnail
  • max-results=9 : Jumlah post yang akan ditampilkan


Tambahan :

Jika ingin menampilkan post berdasarkan label, silakan ganti url feed di atas seperti 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, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

28 comments

keren mba....:) loadingnya gmn mba....?

Balas

Cukup ringan, tergantung jumlah post dan ukuran thumbnail yang ditampilkan

Balas

great arlina thanke you b-(

Balas

kalo thumbnailnya diatur jadi bentuk segi empat (bukan kotak) yang lebarnya sesuai dengan container widgetnya, bisa ga mba?

Balas

Bisa, sesuaikan dengan lebar widget dan atur kembali cssnya

Balas

wah langsung di share, makasih mba :-d

Balas

Bagus sekali designnya , sangat mendukung flat UI buatan mbak arlina yang lain

Balas

Kenapa di mozilla ga nampil nya ? browser lain nampil.. apa yg salah ya ?

Balas

Hemmm. rupanya kena addon ABP di mozilla.. adoi... ada apa scriptnya kok kena ADsBlock ya ?

Balas

sesuai label bisa gk mbak??

Balas

Hehe, ya mas sama2

Balas

Cb lihat tambahan

Balas

Kurang tau saya, memang scriptnya seperti itu

Balas

Iya mas, bisa disesuaikan

Balas

Boleh tau ngubahnya yang mana mba? Udah saya ganti cssnya malah gambarnya jadi melar ke samping. Apa ada yang perlu di rubah di javascriptnya?

Balas

Iya, scriptnya memang khusus untuk gambar kotak

Balas

kak..kira-kira buat recent post kayak gini, di hompage bisa gak ya ?? hehe....

<i rel="image">http://1.bp.blogspot.com/-fO4va7Tpyis/VckKylQXXtI/AAAAAAAAGHo/O9J_-yllx7g/s1600/Snapshot_13.png</i>

Balas

Itu yang pakai plug-in slider

Balas

langsung di pasang mbak, terima kasih :)

Balas

Not show latest google chrome web browser but work latest mozila..

Balas

Work fine here, both

Balas

mbak kalau pasang sesuai popular post gimana?

Balas

çok teşekkürler yaptım oldu :D http://blogbakkali.blogspot.com.tr/

Balas

Ternyata saya sudah tau penyebabnya.. ABP memang yg block, karena di scriptnya ada "ad-item", setelah diganti dengan nama lain, termasuk yg di css nya, kini aman terkendali, tak di block lagi.

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.