Menampilkan Widget Recent Post atau Postingan Artikel Terbaru merupakan satu hal terpenting dalam menata sebuah blog, sebab widget ini gampang dipakai (User friendly) oleh pengunjung untuk melihat atau mencari postingan terbaru (Recent articles) di blog tersebut.
Banyak macam cara dan versi tampilan Recent Posts yang dapat dipilih oleh blogger perlabel atau keseluruhan kategori, begitupun dengan tampilannya lengkap dengan box bergambar (Thumbnail) ada pula yang simpel cukup daftar judulnya saja semua tergantung selera pemilik blog yang atur.
 |
| Cara Memasang Widget Recent Post/Artikel Terbaru Blog |
Selain untuk menampilkan urutan Artikel teranyar dan seterusnya Widget Recent articles juga sebagai alat navigasi untuk memudahkan pengunjung yang dipasang pada Sidebar semua platform blog.
Menurut aku sendiri memasang widget bawaan blogspot banyak pilihan juga problem, kalau tidak benar akan Artikel tidak tampil disemua hanya di Home atau hanya satu Artikel saja.
Untuk itu aku akan memperlihatkan cara menciptakan widget Recent Posts atau Artikel Terbaru dengan bermacam Versi dan arahan khusus.
Cara Membuat atau memasang Widget Recent Posts pada Sidebar Blog
#1 Cara paling simpel memanfaatkan Widget Feed
Menu ini tersedia di blogspot (cuman cara ini hanya menampilkan daftar judul saja simpel) tapi sangat ringan efektif membuatnya.Langkahnya:
- Buka blog yang akan dibentuk ---> klik Layout/Tataletak ---> pilih Feed
- Masukan Link/URL atau alamat blog Anda ---> kemudian klik Countinue
- Rubah judulnya dengan Artikel Terbaru atau Recent Posts
- Tinggal klik Save/Simpan
#2 Memakai JavaScript Khusus
Cara ini merupakan cara simpel Anda cukup menciptakan Widget dengan Rancangan JavaScript dan hanya daftar Judul artikel.Perhatikan langkahnya:
- Kembali pilih hidangan Latout/Tata Letak ---> kemudian pilih Tambah Gadget ---> kemudian pilih HTML/JavaScript
- Isi atau rubah judul menjadi Artikel Terbaru atau terserah ----> kemudian
- Pasang arahan dibawah ini caranya copy kemudian pastekan
<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" sasaran ="_top" title="Cara Membuat Recent Post/Artikel Terbaru Blog">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" sasaran ="_top" title="Cara Membuat Recent Post/Artikel Terbaru Blog">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>
Kode diatas widget hanya tampil daftar judul saja, kalau dirsa kurang anggun pakai cara berikut:
#3 Tampilan Daftar terbaru berikut gambar atau Thumbnail lengkap
Cara dan langkahnya menyerupai cara 2:- Pilih hidangan Layout ---> Add Gadget ---> pilih HTML/JavaScript
- Isi saja kolom titel dengan judul teladan Recent Articels
- Jika sudah siap Copy semua arahan pada kotak dibawah pribadi Paste pada kolom konten
<style>
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:12px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1gH9hM1ELOKITuo55-bqYqL12aO9entgPeypvTz-jbCRmVSa5ohOWwD9b6jXFoELqt5cIZvsj98MpFyvkesfmCfAkW6XqS3_nZbk58WM6OkNyaOiyGqevfTRqoLQJsHeLuQcWmBmMkbH/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog"><img class="rct-thumb" alt=" Menampilkan Widget Recent Post atau Postingan Artikel Terbaru merupakan satu hal terpenti Cara Membuat Recent Post/Artikel Terbaru Blog" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://www.bloganda.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:12px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1gH9hM1ELOKITuo55-bqYqL12aO9entgPeypvTz-jbCRmVSa5ohOWwD9b6jXFoELqt5cIZvsj98MpFyvkesfmCfAkW6XqS3_nZbk58WM6OkNyaOiyGqevfTRqoLQJsHeLuQcWmBmMkbH/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog"><img class="rct-thumb" alt=" Menampilkan Widget Recent Post atau Postingan Artikel Terbaru merupakan satu hal terpenti Cara Membuat Recent Post/Artikel Terbaru Blog" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://www.bloganda.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
Kode diatas akan menampilkan semua Artikel terbaru, jikalau Anda ingin menmpilkan Artikelnya itu hanya perlabel/kategori caranya hanya cukup mengganti arahan paling bawah saja
Hapus arahan mulai <script> ganti dengan arahan ini:
<script>
document.write("<script src=\http://www.bloganda.com"/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
document.write("<script src=\http://www.bloganda.com"/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
Perhatian!
- Ubah atau ganti penggalan Link/URL (http://www.bloganda.com) dengan Alamat blog milik Anda.
- Serta tulis nama Label yang akan ditampilkan, jikalau label 2 kata menggunakan spasi tinggal tambah arahan %20 contoh: kalau label blog Anda Tips blogging maka menulisnya Tips%20blogging.
Kesimpulan dalam menciptakan Widget Recent Post
Diatas merupakan tampilan widget dengan Gadget sederhana blogger, mungkin Anda ingin memasang tampilan Recent Posts lebih keren lagi itu dapat saja memanfaatkan situs HelploggerUntuk menemukan arahan untuk menciptakan Recent Posts bermacam versi dan variasi.