Cara Membuat Widget Recent Posts Blog Keren ( 2 versi )

Membuat Widget Recent Posts Blog -  Kegunaan dari widget recent posts sendiri adalah untuk menampilkan postingan terbaru. Pemberian widget ini sangat bermanfaat baik bagi pengunjung maupun admin blog dalam memberitahu maupun mengetahui artikel terbaru apa yang dibuat.

Recent posts yang saya bagikan kali ini terdapat dua versi yang dapat dipilih untuk dipasang pada blog agan.

- Versi pertama yaitu menampilkan Judul artikel dan diskripsi.
- Versi kedua yaitu hanya menampilkan Judul artikel.

Pemasangan Widget Recent Posts

Langsung saja, untuk cara pemasangan sangat mudah, silahkan ikuti langkah-langkah dibawah ini:

1. Masuk pada Dashboard blog.
2. Pada menu blog pilih 'Tata Letak.
3. Lalu silahkan klik 'Tambahkan Gadget'.
4. Akan muncul jendela baru terbuka, silahkan klik 'HTML/JavaScript.
5. Tulis judul (bisa juga dikosongkan).
6. Silahkan copy script widget yang dipilih dan paste pada kolom konten.
7. Simpan.

Baca juga : Cara Membuat Widget Multi 3 Kolom

Widget Recent Post Versi 1 

Dibawah ini adalah widget recent post versi 1, dimana terdapat judul, tanggal, dan deskripsi artikel.

Untuk versi pertama yang seperti gambar di atas, silahkah gunakan script dibawah ini:

<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://www.inidulubaruitu.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://inidulubaruitu.com/2017/01/cara-membuat-widget-recent-posts-blog-keren-2-versi.html" rel="nofollow" >Recent post</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.rctitle {padding: 0 14px;}
.rctitle a{color: #2983b7;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: bold;
}#hlrpsa {
color: #999999;
    font-size: 12px;
    border-top: 3px solid #4db2ec;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 38px;
    border-bottom: 3px solid #4db2ec;}
.rcsumm {border-bottom:1px dotted #cccccc; padding: 0 14px; margin-top:5px;}
</style>

 Pengaturan :
- Silahkan ubah url yang saya beri warna merah dengan url situs agan.
- Untuk yang saya beri warna biru, merupakan jumlah postingan yang ingin di tampilkan, silahkan tentukan sesuai yang diinginkan.

Baca juga : Cara Memasang Widget Pada Blog Perlabel Berdasarkan Kategori

Widget Recent Post Versi 2

Untuk versi yang ke 2 tidak jauh beda dengan versi di atas, hanya saja sedikit berbeda dan tidak menampilkan deskripsi postingan.

Berikut script yang dapat digunakan untuk versi yang kedua:

<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = false;var numchars = 100;var standardstyling = true;
</script>
<script src="http://www.inidulubaruitu.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://inidulubaruitu.com/2017/01/cara-membuat-widget-recent-posts-blog-keren-2-versi.html" rel="nofollow" >Recent post</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.rctitle {padding: 0 14px;}
.rctitle a{color: #2983b7;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: bold;
}#hlrpsa {
    color: #999999;
    font-size: 12px;
    border-left: 3px solid #4db2ec;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 38px;
    border-right: 3px solid #4db2ec;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.rcsumm {border-bottom:1px dotted #cccccc; padding: 0 14px; margin-top:5px;}
</style>

  Pengaturan :
- Silahkan ubah url yang berwarna warna merah dengan url situs agan.
- Untuk yang saya beri warna biru merupakan jumlah postingan yang ingin di tampilkan, silahkan tentukan sesuai yang diinginkan.
- Jika ingin merubah atau edit seperti warna text, ukuran text, posisi, dan sebagainya. Silahkan otak-atik dibagian yang saya beri warna ungu.

Demikian widget recent posts yang dapat agan gunakan untuk dipasang diblog, jika ada yang ditanyakan silahkan dengan memberi komentar.

Tweet

Subscribe to receive free email updates: