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>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/AVvXsEjRQzKiPLWZvWfaki4RPE8Mjgru6n0Z3VQwm5dkIIaYaNEUhNSV5OwAesAcq-vW6Z4TOuLRlJak7JQeCL_A5JzSoFEyKffY70ql5yAOIr8m1tLrNnGCHBBigww2IkOgqienRhe6ExjgCbFz/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!
Social Plugin