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?
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>Ganti https://www.andisyam.web.id dengan URL blog Anda. Rubah 10 dengan jumlah artikel baru yang ingin Anda tampilkan.
<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>
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">Ganti https://www.andisyam.web.id dengan URL blog Anda. Rubah 10 dengan jumlah artikel baru yang ingin Anda tampilkan.
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>
Jika ingin merubah tampilannya supaya keren, Anda bisa tambahkan kode CSS berikut:
<style type="text/css">Letakkan kode CSS di atas <script type="text/javascript">.
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>
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.
Open Disqus Close Disqus