Wednesday, January 20, 2016

Cara membuat widget artikel terbaru

Berikut ini saya akan membagikan cara mudah membuat widget artikel terbaru. Sebelumnya saya sudah pernah membuat artikel tentang cara membuat daftar artikel terbaru bedanya dengan yang sebelumnya, batas postingan yang ditampilkan maksimal hanya 5 artikel saja. Sedangkan cara yang terbaru ini, bisa kita atur batas artikel yang ingin ditampilkan sesuai dengan yang kita inginkan.

cara membuat widget artikel terbaru
Gambar diatas merupakan contoh dari widget artikel terbaru, dengan jumlah tampilan artikel sebanyak 10 artikel. Dan masih bisa di tampilkan lebih banyak lagi. Untuk cara membuat widget artikel terbaru seperti diatas. Silakan Ikuti langkah2 dibawah ini.
  1. Silakan copy script dibawah ini.
  2. <ul id="recent-posts"></ul>
    <script>
    //<![CDATA[
    var homePage = "http://pengguna-komputer.blogspot.co.id/",
    numPosts = 10;
    function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");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="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
    //]]>
    </script>
  3. Lalu buka pengaturan tata letak, klik tambahkan gadget, dan pilih widget HTML/Javascript. Dan pastekan script diatas.
  4. Selanjutnya ganti http://pengguna-komputer.blogspot.co.id/ dengan halaman awal blog kamu dan ganti juga angka 10, dengan jumlah postingan yang ingin kamu tampilkan.
  5. Selesai.
Silakan baca juga artikel2 saya yang lainnya, terima kasih sudah mau berkunjung ke blog sederhana saya ini, Semoga Bermanfaat.
    Share:

    0 comments:

    Post a Comment

    BTemplates.com

    Powered by Blogger.