Cara Membuat Grid Recent Post Berdasarkan Label Tertentu Di Blogspot
Grid recent post sangat cocok untuk blog download,terutama blog download game dan software. Karena tidak ada cuplikan. Recent post ini bisa anda letakkan di sidebar atau di bawah postingan. Cara membuat/memasang recent post grid sangatlah mudah seperti anda menambahkan gadget lainnya.
Recent post memiliki banyak fungsi terutama jika anda ingin mendaftarkan blog anda untuk menjadi mitra Google Adsense. Jika anda membuat template/blog magazine tentu blog anda harus ada recent post untuk melengkapi dan mengisi blog anda.
Recent post ini bisa ditampilkan dimana saja disidebar atau dibawah postingan. Grid recent bisa muncul berdasarkan label tertentu.Jika anda tertarik untuk memasang grid recent post anda bisa langsung ikuti langkah dibawah ini.
Recent post ini bisa ditampilkan dimana saja disidebar atau dibawah postingan. Grid recent bisa muncul berdasarkan label tertentu.Jika anda tertarik untuk memasang grid recent post anda bisa langsung ikuti langkah dibawah ini.
Cara Membuat Grid Recent Post
Langkah 1
Buka blogger,klik Tata Letak → Tambahkan Gadget → HTML/JavaScript
Langkah 2
Beri judul untuk gadget yang akan ditambahkan ,lalu salin kode dibawah ini dan letakkan pada gadget yang akan dibuat
<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;}
</style>
<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 rel="nofollow" rel="noreferrer"href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=arlinagrid"></script>
lalu Simpan gadget
Selesai dan coba lihat hasilnya,anda bisa mengatur style CSS sesuka anda untuk menyesuaikan dengan tema blog sobat. Cukup sekian tutorial cara membuat widget grid recent post di blog,semoga bermanfaat.
Related Posts :
Cara Membuat Widget Recent Post Berdasarkan Label Tertentu Di BlogRecent post merupakan widget yang berisi daftar post/artikel terbaru di blog sobat. Recent merupakan property blog yang harus ada jika anda … [Read More]
Cara Membuat Widget Melayang/Sticky Ketika Di Scroll SidebarWidget yang melayang/menempel di sidebar blog ini sangat cocok jika anda seorang blogger yang suka membuat artikel tutorial atau panjang. De… [Read More]
Cara Membuat Random Post Dengan Gambar/Thumbnail Keren Di BlogspotHai gais! Widget random post sangatlah penting untuk ditempatkan di blog. Apalagi jika blog anda bertemakan magazine pasti akan melengkapi p… [Read More]
Cara Membuat Grid Recent Post Berdasarkan Label Tertentu Di BlogspotGrid recent post sangat cocok untuk blog download,terutama blog download game dan software. Karena tidak ada cuplikan. Recent post ini bisa … [Read More]
Cara Membuat Kotak Berlangganan (Subscription Box) Keren dan ResponsiveCara Membuat Kotak Berlangganan (Subcription Box) di Blog - Sangatlah penting untuk membuat kotak berlangganan email/subcription box,seperti… [Read More]
Ini yang saya cari, makasih y gan
ReplyDeleteSama-sama ,thanks atas kunjungannya
DeleteWah makasih gan tutorialnya bermanfaat 😊
ReplyDeleteSama-sama gan
Deleterecent postnya unik, beda dari yang lain. Mantap gan...
ReplyDeleteCocok buat yang belum dapet fiture Adsense
ReplyDeletebagus juga tampilannya, makasih bang :D
ReplyDeleteSama-sama gan
DeleteNah ini nih tutor yang ane cari... thx bang
ReplyDeleteSama-sama gan
DeleteKalau recent post untuk label tertentu gimana ya mas?
ReplyDelete