Membuat Recent Post / Post by Label di Blog

Pada hari pertama di bulan februari ini, saya akan memberikan tutorial tentang 'Cara Membuat Widget Recent Post di Blog' sekaligus 'Membuat Widget Post by Label di Blog' recent post ataupun post by label ini menggunakan gaya atau model galeri. contohnya seperti gambar dibawah ini.


Model ini saya ambil dari blog arlina, ok sebelum kita langsung menuju pointnya, silahkan lihat terlebih dahulu Demonya.
Langsung saja ketahap penerapannya.
1. Login ke Blogger
2. pilih Tema/Themes > Edit HTML
3. Copy CSS dibawah ini, dan simpan diatas </head>

<style type='text/css'>
/* Galeri Label Post */
.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 8px rgba(0,0,0,0.05);border-radius:10px}
.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,0.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;border-radius:10px;}
.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,0.56);color:#222;border-top-color:#cc0000}
.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s;border-radius:10px;height:auto;}
</style>

4. Lalu, Copy JS dibawah ini, dan simpan juga diatas </head>

<script type='text/javascript'>
//<![CDATA[
// Post label galeri
function myargrid(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://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png",s=n.replace("/s72-c/","/w"+myar_thumbs_wid+"-h"+myar_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="'+myar_thumbs_wid+'" height="'+myar_thumbs_hei+'"/>',p=myar_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(""))};var myar_thumbs_wid = 300; 
var myar_thumbs_hei = 190; 
var myar_title = true; 
//]]>
</script>

5. Jika sudah, simpan template lalu pergi ke Tata Letak / Layout.
6. Tambah Gadget > pilih HTML/JavaScript.
7. Masukkan script dibawah ini untuk menambah widget artikel terbaru / Recent Post / Latest Post.

<script src="/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

8. Jika ingin menambah widget Post by Label, masukkan script dibawah ini.

<script src="/feeds/posts/default/-/NamaLabel?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

Ganti NamaLabel tersebut dengan nama label di blog kalian.

*Note
Angka 3 menunjukkan jumlah artikel / post yang ditampilkan. Silahkan ganti angka tersebut dengan jumlah artikel yang ingin kalian tampilkan.

9. Simpan dan lihat blog kalian.

Jika mengalami masalah / bingung dengan penjelasan yang saya buat, silahkan tinggalkan pertanyaan kalian di kolom komentar.

Ok, mungkin sampai disini saja pembahasan tentang Membuat Recent Posts ataupun Post by Label di blog. Terimakasih


Personal Blog.

5 komentar:

  1. Kalau labelnya dari bawaan template,apakah harus di hapus dulu?

    BalasHapus
  2. very good but how add var tags; + and var date:dd/mm/yy/ + and var author_name = ;
    var readmore ;
    var snippet = ?? how??

    BalasHapus
  3. mengapa gambar di blog saya tidak muncul?? mohon bantuannya

    BalasHapus
  4. mengapa gambar tidak muncul??

    BalasHapus

Berikan komentar anda sesuai Topik yang ada.