Cara Membuat Recent Post Galery Keren Di blogger

Berhubung web haliminfo waktu-waktu lalu berbagi mengenai cara atau tutorial yang yang berhubungan dengan blogger kali ini penulis akan shar...

Berhubung web haliminfo waktu-waktu lalu berbagi mengenai cara atau tutorial yang yang berhubungan dengan blogger kali ini penulis akan share tutorial untuk blogger atau web lagi. Dan pada kesempatan ini penulis akan membagikan tutorial cara memasang atau membuat recent post keren

Recent post atau postingan terbaru atau juga artikel terkini adalah suatu plugin pihak ketiga atau bisa disebut tampilan widget tambahan untuk blogger atau juga bisa untuk web lain, yang memiliki fungsi untuk menampilkan beberapa dari artikel terbaru yang kita buat atau kita tuliskan di blog atau web kita. Recent post untuk blogger ini terbilang cukup mudah untuk kita membuatnya. Recent post keren yang satu ini penulis mendapat referensi dari recent post gallery arlina design.
Langsung saja eksekusi langkah-langkah cara membuat recent post gallery dibawah ini

1. silakan masuk pada halaman admin dari blog sobat, lalu buka menu tema > edit html
2. cari dan temukan kode </head> dan letakan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function haliminfogrid(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/AVvXsEjqpPfw0hr_wzHU6TIP5L1n8aP4cNghD8lVnqGWc-MRC8st98LpSPlg82-x_7BEummfhSM14od-XOMDXg8EoYBLWu4cgIKwaL64eG6DDy-G2as3CH5MXoXbBzJxrQKgMfVsMd2IPiTnljNt/s1600/default.png",s=n.replace("/s72-c/","/w"+halim_thumbs_wid+"-h"+halim_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="'+halim_thumbs_wid+'" height="'+halim_thumbs_hei+'"/>',p=halim_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>

3. jika sudah jangan dulu keluar dari kode template sobat.
4. cari dan temukan lagi kode ]]></b:skin> atau </style>
5. jika sudah ketemu silakan letakan kode dibawah ini tepat diatas kode tersebut.

/* Recent Post www.haliminfo.com */
.recent-galeri {padding:0;clear:both;}
.recent-galeri:after {content:"";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,.85);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;left:0;right:0;color:#444;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-bottom:3px solid #444;transition:all .2s}
.recent-galeri .gallerytem:hover .ptitle{background:salmon;border-bottom:3px solid #fff;color:#fff}
.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s}

6.jika sudah silakan save dan keluar dari kode editor html di blog sobat.
7. selanjutnya masuk ke menu tataletak dan tambahkan widget html untuk penempatanya itu optional, bebas semau diri sendiri.
8. dan masukan kode dibawah ini ke widget html yang kita tambahkan barusan.

<script>
var halim_thumbs_wid = 300; 
var halim_thumbs_hei = 190; 
var halim_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=2&amp;alt=json-in-script&amp;callback=haliminfogrid"></script>

9. jika sudah safe dan lihat hasilnya.

Untuk menyesuaikan jumlah potingan yang akan di tampilkan pada wigetnya, bisa disesuaikan di bagian kode yang terdapat pada tataletak. ganti angka 2 menjadi berapapun semau sobat terserah …. 

Bagaimana? Cukup mudah bukan, sekian dulu arikel ini kurang lebihnya mohon maaf terimakasih . .
Jika mengalami kesulitan bisa di tanyakan melalui kolom komenar dibawah.. terimakasih . . .