Widget Recent Post Model Gallery - Widget Recent Post merupakan widget yang dapat menampilkan postingan terbaru terupdate dan artikel terjaman now. Pada blog asis10.com menggunakan Widget Recent Post model news tanpa gambar, namun pada kesempatan kali ini saya akan bagikan cara membuat Widget Recent Post model galery alias menampilkan widget artikel terbaru dengan gambar saja, lihat penampakanya dibawah ini


Sebagai cadangan bila postingan terbaru yang anda buat tidak mempunyai gambar, maka saya sudah sediakan gambar kusus, gambar kusus ini akan tampil apabila postingan yang anda buat tidak memuat gambar

http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png



Widget Recent Post Model Gallery

Masuk ke blogger.com, log in dengan akun google anda, setelah berhasil masuk keberanda blogger silahkan pilih blog yang akan anda modifikasi Popular Post

Kemudin pilih Thema, pilih edit HTML, dijendela ini akan ditampakan banyak sekali kode kode, ada CSS, XML/HTML, dan SCRIPT

Tambahkan kode CSS dibawah , tempatkan kode CSS-nya <style> Tempatkan kodenya disini </style>. Untuk mempermudah melakukan pencarian kode yang diinginkan gunakan kolom pencarian dengan menekan tombol CTRL+F

/* 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;}

Cari kode </head> lalu pastekan kode Java Script dibawah ini tepat sebelum atau diatasnya

<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>

Simpan themplate, lalu pilih menu TATA LETAK, silahkan letakan Widget Recent Post Model Gallery dimanapun anda suka, bisa di sidebar, atau diatas footer

Pilih Add Widget (Tambahkan widget), Pilih HTML/JavaScrip, tambahkan kode dibawah ini

<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>

Perhatikan kode yang dicetak tebal
72 : Ukuran thubnail (Gambar) silahkan sesuaikan dengan ukuran sidebar blog
True : Menampilkan judul postingan ketika mouse pointer diarahkan
9 : Jumlah postingan yang akan ditampilkan

Silahkan dicoba, jika ingin menampilkan berdasarkan Label, ganti kode HTML/JavaScrip dengan kode dibawah ini

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

Perhatikan kode yang dicetak bold
MACRO : Merupakan nama label, silahkan ganti dengan nama label yang sesuai dengan blog kamu, jika nama label lebih dari satu kata maka ganti SPASI dengan simbol %20, misal nama widgetnya Tips Excel : Tips%20Exel

Baca juga cara membuat Popular Post dengan 4 model dan gaya lihat Popular Post Arlina Design

Saya sendiri belum mencoba script ini, akan tetapi banyak yang bilang cara ini work 100% lebih :D, demikianlah cara Widget Recent Post Model Gallery, coba buat kreasi Widget Recent Post Model Gallery dengan meletakan widgetnya ditengah tengah artikel pasti lebih menarik dan tampil beda. Sumber artikel ini bisa dilihat disini.
No comments