Cara Membuat Recent Post Gallery di Blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Recent Post Gallery di Blogger

Cara Membuat Recent Post Gallery di Blogger
Also Read
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.
Cara Membuat Recent Post Gallery di Blogger

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.

DONATION Help give donations if the article feels useful. Donations will be used to extend the www.onet4u.com. domain. thanks.

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel