Cara Membuat Gadget Postingan Terbaru/Recent Post di Blogger

Tidak semua pengunjung blog Anda datang langsung ke halaman utama / homepage. Mereka biasanya datang melalui artikel yang dicari sesuai kata kunci yang ditulis di mesin pencarian. Dan terkadang pengunjung hanya akan membaca artikel tersebut lalu menutup halaman, jika sudah puas. Sebagai pemilik blog, Anda ingin sekali jika postingan terbaru juga dibaca pengunjung. Maka tak heran Anda melakukan segala cara, salah satunya dengan menampilkan Postingan Terbaru pada halaman artikel yang dikunjungi pengunjung.

Menampilkan Recent Post perlu sebuah Gadget. Jika Anda baru membuat blog lewat platform Blogger.com, Anda tidak akan menemukan Recent Post di menu Add a Gadget. Bukannya tidak ada, sebenarnya Ada dan Bisa. Yaitu dengan menambahkan gadget "Feed", lalu tambahkan Feed URL berikut: https://www.andisyam.web.id/feeds/posts/default (ganti https://www.andisyam.web.id dengan url domain blog Anda). Sayangnya, gadget Feed ini hanya menampilkan maksimal 5 postingan saja. Lalu bagaimana jika ingin lebih dari 5? Anda harus coding sendiri.

Jika Anda memiliki keahlihan tambahan tentang coding, pasti mudah dan bisa melakukannya. Namun, karena baru terjun dalam dunia blogging ternyata Anda tidak paham tentang kode membuat Recent Post. Dalam postingan ini saya akan membantu Anda. Anda hanya perlu copy kode di bawah dan meletakkannya di gadget HTML/Javascript, lalu Save.

Bagaimana Cara Menambahkan Gadget Recent Posts di Platform Blogger?


contoh: recent post tanpa dan dengan gambar

1. Pertama login ke blogger.com dan masuk ke dashboard blog Anda.

2. Buka menu "Layout" template blog Anda.

3. Klik fitur "Add a Gadget" di bagian bilah sisi atau area lain di mana Anda ingin menampilkan gadget Recent Post di blog Anda.

4. Pilih gadget "HTML/JavaScript".

5. Sekarang copy dan paste kode Recent Post di bawah ini.

- Tampilan Recent Post Biasa (Tanpa Gambar)

Kode Recent Post adalah berikut:
<ul id="artikel-terbaru"></ul>
<script type="text/javascript">
//<![CDATA[
var numposts = 10; function ArtikelTerbaru(a){if(document.getElementById("artikel-terbaru")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("artikel-terbaru");for(var i=0;i<numposts;i++){for(var j=0;j<numposts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="artikel-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='https://www.andisyam.web.id/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numposts+'&callback=ArtikelTerbaru';document.getElementsByTagName('head')[0].appendChild(rcp)
//]]>
</script>
Ganti https://www.andisyam.web.id dengan URL blog Anda. Rubah 10 dengan jumlah artikel baru yang ingin Anda tampilkan.

Jika ingin merubah tampilannya supaya elegan, Anda bisa tambahkan kode CSS berikut:
<style type="text/css">#artikel-terbaru ul{list-style:none;margin:0;padding:0}#artikel-terbaru li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0}#artikel-terbaru li:last-child{border-bottom:0}#artikel-terbaru li a{color:#000;text-decoration:none;font-size:14px}#artikel-terbaru li a:hover{color:#000;text-decoration:underline}</style>
Letakkan kode CSS di atas <ul id="artikel-terbaru"></ul>.

- Tampilan Recent Post dengan Gambar

Untuk cara membuat Recent Post dengan Thumbnail / Gambar Mini, kodenya adalah berikut:
<script type="text/javascript">
var posts_no = 10;
var showpoststhumbs = true;
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}
var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQ3Ex6JWoY34ZK1oYfjQOPG9984ZpPgwkEfVtQaUnl3WOz_7X3QpxzYqHbFgWmRCyslmqNK_KT6WNZZ5sh35S8LbEew28l4x0PRpnwZ5mMbzgMfL4NRiZBVpJU3Ln67Mofb9H3b1M98bK/s1600/no-thumb.png"}document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'">'+i+"</a></div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script src="https://www.andisyam.web.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
Ganti https://www.andisyam.web.id dengan URL blog Anda. Rubah 10 dengan jumlah artikel baru yang ingin Anda tampilkan.

Jika ingin merubah tampilannya supaya keren, Anda bisa tambahkan kode CSS berikut:
<style type="text/css">
ul.recent-posts-container{list-style:none;padding:0px}ul.recent-posts-container li{display:inline-block;width:100%;padding:10px 0;border-bottom:1px solid #e3e3e3}.recent-posts-container li:last-child{border-bottom:0}.recent-posts-container a:hover{text-decoration: underline}img.recent-post-thumb{width:72px;height:72px;float:left;margin-right:5px;border-radius:10%}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.recent-post-title a{font-size:14px;color:#000}
</style>
Letakkan kode CSS di atas <script type="text/javascript">.

6. Klik Save dan muat ulang blog blogger Anda.

7. Jika tampilan Recent Post Muncul, itu artinya Sukses. Apabila Tidak Muncul, ada kemungkinan kode yang Anda masukkan kurang lengkap, coba teliti kembali. Namun, jika sudah benar dipasang sesuai dengan kode di atas, berarti kode ini tidak cocok dengan template blog Anda.

Begitulah cara pasang dan menyesuaikan gadget Recent Post di blog platform Blogger. Semoga sukses!

Baca juga:

Perbedaan Widget dan Gadget


Widget dan gadget adalah aplikasi ringan yang memungkinkan pengunjung dapat berinteraksi dengan aplikasi atau website lain yang ditampilkan dalam blog Anda. Satu-satunya perbedaan antara keduanya adalah bahwa widget dirancang untuk bekerja di berbagai platform, sedangkan gadget biasanya fungsinya terbatas.

Related Posts →


Open Disqus Close Disqus

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Blogger Cookies