Cara Membuat Recent Post Gallery di Blogger

Assalamualaikum.
Hariini saya akan kongsikan cara membuat Recent Post Gallery di Blogger, Cara yang saya kongsikan ini sangat senang.

Recent Post Gallery ini juga boleh digunakan di custop error404 page seperti yang saya gunakan di dalam blog ini.

Harini saya cuma kongsikan cara memasang wiget recent post sahaja, Saya akan kongsikan cara memasang recent post di error404 pada posting seterusnya.

Ok kita terus saja ke topik yang ingin di bincangkan.

Login ke blogger anda tab Theme > Edit html dan masukan kod css berikut sebelum </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;}

Selanjutnya tambahkan kod berikut di atas </head>

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function o4ugrid(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"+o4u_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="'+o4u_thumbs+'" height="'+o4u_thumbs+'"/>',p=o4u_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>

Seterusnya buat widget baru dan masukan code berikut:

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

var o4u_thumbs = 72; Ukuran gambar
var o4u_title = true; Menampilkan Title

Na bagaimana?? senang bukan
Caranya sama sahaja sekiranya anda ingin menampilkan recent post di page error404, Sekiranya anda kurang faham, boleh tinggalkan comment di bawah saya sedia membantu anda secara percuma.

Sampai di sini sahaja posting saya pada hari ini,jika diberi kesempatan kita berjumpa lagi di posting akan datang, Wasalam..


Thanks,
O4U Admin.