Cara Membuat Recent Post Seperti Arlina Design di Blogger

Cara Membuat Recent Post Seperti Arlina Design di Blogger - Kali ini saya akan membagikan tutorial cara memasang Recent Post keren di Blogger. Desain ini sama dengan yang saat ini digunakan oleh Arlinadzgn. Recenet post ini bisa kamu atur berapa jumlah yang ingin ditampilkan, juga pengaturan agar widget recent post blogger ini hanya tampil di halaman postingan saja.

Cara Membuat Recent Post Seperti Arlina Design di Blogger

Pertama, yang harus kamu lakukan adalah menambah widget HTML dengan cara pergi ke Dashboard Blogger > Tata Letak lalu tambahkan widget HTML/Javascript pada Sidebar. Masukkan copy dan paste script berikut ini pada widget tersebut.

<script>
var galihd_thumbs_wid = 300; 
var galihd_thumbs_hei = 190; 
var galihd_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=2&amp;alt=json-in-script&amp;callback=galihdgrid"></script>

Agar widget Recent Post hanya tampil di Halaman artikel, tambahkan kode berikut ini dengan cara masuk ke Dashboad Blogger > Tema > Cari widget yang baru saja kamu buat dan letakkan kode berikut seperti gambar dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
...........
      </b:if>

Contoh penempatannya :

Setelah itu, pergi ke Dashboard Blogger > Tema > Edit HTML. Cari kode </head> dan letakan kode berikut ini diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Recent Post
function galihdgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-galeri">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdLE_gQXrmwVrj16VheddMyVoxvI0E72w1HvC0kI_VrghH1vULNDAljC01x0paxTQvDKafRQBL5yr8Hl_h4b8GEvB8XG75AQaZq2mQVhjbZ43r82y-Ch6bsFsDclu2LgOcp2YzS-gnMh6/s1600/default.png",s=n.replace("/s72-c/","/w"+galihd_thumbs_wid+"-h"+galihd_thumbs_hei+"-c/"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+galihd_thumbs_wid+'" height="'+galihd_thumbs_hei+'"/>',p=galihd_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Masih ditempat yang sama, letakkan CSS berikut ini diatas </head>.

<style type='text/css'>
/* Recent Post */
.recent-galeri{padding:0;clear:both}
.recent-galeri:after{content:&quot;&quot;;display:table;clear:both}
.recent-galeri .gallerytem{display:block;float:left;position:relative;margin:0 auto 15px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
.recent-galeri .gallerytem:last-child{margin:0 auto}
.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%}
.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s}
.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#eccc68}
.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s}
</style>

Demo

Selesai.

Related Posts