Membuat Widget Artikel Terbaru / Recent Post


Membuat Widget Artikel Terbaru (Recent Post) Di Blog - Artikel Terbaru atau sering disebut Recent Post adalah menu yang ada pada sidebar blog jika anda memasangnya. Menu ini berdasarkan artikel yang terbaru atau yang paling baru yang akan di tampilkan di menu ini. Ini sangat berguna untuk pengunjung yang ingin melihat lebih banyak tentang isi blog anda. karena tidak semua pengunjung yang datang dari search engine langsung ke artikel pertama anda, bisa saja pengunjung melihat artikel anda adalah artikel yang paling lama, sehingga jika pngunjung ingin melihat artikel terbaru anda harus mengunjungi halaman beranda atau home page. tetapi jika anda memasang widget artikel terbaru (Recent Post) Maka pengunjung akan lebih mudah untuk melihat artikel terbaru di menu recent post tanpa membuka halaman beranda terlebih dahulu.

Selain memasang widget Recen Post pada blog, anda juga harus memperhatikan dan memilih script yang tidak terlalu membuat loding blog anda semakin berat. karena faktor yang banyak biasanya sobat blogger tidak suka memasang banyak widget karena dengan alasan akan menggangu loading blog. tetapi disini anda tidak usah khawatir tentang loading blog anda. karena saya akan memberikan Script recent post yang tidak memberatkan loading blog anda. karena script ini sngat simple dan tidak memuat js, recent post ini juga tidak menampilkan thumnail, melainkan hanya menampilkan judul artikel saja, sehingga loading blog anda akan tetap terjaga dan tidak berat.

Sebenarnya Script ini saya dapatkan dari postingan mas adhy suryadi, Admin dari blog kompiajaib.com.

jika anda ingin memasangnya di blog blog anda, mari ikuti cara nya seperti di bawah ini.

1. Yang pertama anda harus masuk akun blogger anda.

2. Di dasbor klik opsi lain dan pilih Tempate ==> Edit Html dan simpan CSS di bawah ini tepat di atas kode </head>

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 10px;
    margin:0 auto;
    border:1px solid #ddd;}
#recent-posts ul,#recent-posts li{
    list-style:none;}
#recent-posts a{
    text-decoration:none;}
#recent-posts li{
    border-top:1px solid #ddd;
    padding:6px 0}
#recent-posts li:first-child{
    border-top:none;}
</style>

Setelah itu klik simpan template dulu. sekarang anda tinggal menambah kode pada widget blog anda dengan cara masuk pada Tata Letak dan pilih Tambah Gadget terus pilih HTML/JavaScript.
Dan coppy kode di bawah ini dan paste ke dalam widget baru tadi.

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;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+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></scr" + "ipt>");
//]]>
</script>

Jangan lupa ganti angka 5. Angka 5 menunjukan banyak nya jumlah artikel yang akan di tampilkan pad widget artikel baru tersebut. Anda bisa mengaturnya sesuai keinginan anda sendiri. Setelah semua selesai, silahkan simpan, dan di ulangi dengan simpan setelan.

Demikian artikel tentang Cara Membuat Widget Recent Post/Artikel Terbaru Di Blog Semoga bermanfaat.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser