Widget Recent Post Simple Untuk Blog Minimalis

Memperlihatkan postingan terbaru kita kepada pengunjung adalah salah satu cara agar pageview blog kita meningkat. Apalagi untuk anda yang blognya sudah memiliki banyak pengunjung organik dari search engine google. Anda wajib memasang widget yang satu ini, yaitu widget recent post.

Dengan memasang widget recent post pengunjung bisa melihat postingan atau artikel terbaru di blog kita. dan berpeluang untuk meningkatkan pageview blog kita. Ada banyak sekali widget recent post yang sudah dibagikan oleh teman blogger lainnya.

Read More

Namun kali ini saya akan membagikan salah satu widget saja. Yaitu widget recent post yang simple dan sederhana yang di detakan di bagian sidebar.

Cara pemasangannya pun sangat mudah, Tidak perlu ribet utak-atik kode html, widget langsung bisa dimasang melalui menu layout di blogger.

Hal-hal yang bisa anda sesuaikan atau edit dari widget ini adalah sebagai berikut,

  • Hanya menampilkan judul postingan atau artikelnya saja.
  • Mengganti jumlah postingan yang ditampilkan.
  • Jika anda ingin menapilkan cuplikan atau snippet dari artikelnya, anda juga bisa mengatur panjang cuplikannya.

Widget Recent Post Hanya Judul Postingan

<div id=”hlrpsb”>

<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 d=0;d<r.link.length;d++)if(“alternate”==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]=”Jan”,u[2]=”Feb”,u[3]=”Mar”,u[4]=”Apr”,u[5]=”May”,u[6]=”Jun”,u[7]=”Jul”,u[8]=”Aug”,u[9]=”Sep”,u[10]=”Oct”,u[11]=”Nov”,u[12]=”Dec”,standardstyling||document.write(“”),document.write(‘<div class=”rctitles2″>’),standardstyling&&document.write(“”),document.write(i),standardstyling&&document.write(“”),1==showpostdate&&document.write(” – “+l+” “+u[parseInt(o,10)]+” “+a),standardstyling||document.write(“</div>”),document.write(“</div>”),standardstyling&&document.write(“”)}standardstyling||document.write(‘<div class=”bbwidgetfooter”>’),standardstyling&&document.write(“”),document.write(“”),standardstyling||document.write(“/div”)}

</script>

<script type=”text/javascript”>var numposts = 10;var showpostdate = false;var standardstyling = true;</script>

<script src=”http://domainkamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script></div>

<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}

</style>

Baca Juga :  Cara Membuat Related Post Di Blog AMP Blogspot

Keterangan:

  • 10 untuk mengatur jumlah postingan yang ditampilkan
  • #000000 untuk mengatur warna link (untuk merubah gunakan kode warna html)
  • 13px untuk mengatur ukuran font link

Widget Recent Post Dengan Snippet atau Cuplikan

<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 = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src=”http://domainkamu.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”>

</script></div>

<noscript>Your browser does not support JavaScript!</noscript>

<style type=”text/css”>

.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}

</style>

Keterangan:

  • 5 untuk mengatur jumlah postingan yang ditampilkan
  • 100 untuk mengatur panjang karakter cuplikan atau snippet
  • #000000 untuk mengatur warna link (gunakan kode warna html)
  • 13px untuk mengatur ukuran font link
  • #999999 untuk mengatur ukuran font cuplikan (gunakan kode warna html)
  • 12px untuk mengatur ukuran font cuplikan

Cara memasangnya sangat mudah seperti pemasangan widget pada umumnya,

1. Masuk ke Blogger  >> Lalu masuk ke menu Layout atau Tata letak  >>  Kemudian klik Add a Gadget atau Tambahkan Gadget. lihat gambar berikut,

2. Dari tab yang baru terbuka, pilihlah HTML/Java script

3. Lalu pastekan salah satu kode yang anda pilih di atas kedalam kotak yang tersedia.

Baca Juga :  Widget Recent Post Scroll bar Postingan Acak atau Random

Jangan lupa pada bagian http://domainkamu.blogspot.com diganti dengan url blog anda sendiri.

4. Lalu klik simpan atau save, dan lihat hasilnya di blog anda.

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *