Widget Posting Terbaru Dengan Gambar

Widget Recent Post/Posting Terbaru Dengan Gambar

Widget Recent Post/Posting Terbaru dengan Gambar

Widget recent post/posting terbaru yang saya share kali ini adalah widget yang berisi posting terbaru dengan judul dan gambar thumbnail. Mungkin sudah banyak artikel yang memuat bagaimana cara membuat widget recent post ini, tetapi kali ini saya mencoba menshare ulang.

Semoga posting ini bermanfaat.

Demo

Cara Membuat Widget Recent Post/Posting Terbaru

1. Pada Dasboard akun blogger sobat pilih tata letak

Pilih Tata Letak

2. Tambahkan gadget HTML/JavaScript

3. Salin kode ini dan letakan pada formulir / gadget yang anda tambahkan tadi.

<ol id="recent-posts"></ol>
<style>
     #recent-posts li {
         list-style: none;
         height:100%;
         overflow:hidden;
         margin:5px 0
     }
     .imgupdate {
         float:left;
         margin:5px 10px 0 5px;
         border:1px solid #ccc
     }
     .recent-posts a {
         text-decoration:none;
     }
     .recent-posts a:hover {
         color:orange;
         text-decoration:underline;
     }
     time {
         display:block
     }
</style>
<script type="text/javascript">
   var homePage = "http://info-kmu.blogspot.com/",   // Your blog homepage
       numPosts = 5;                           //Jumlah Posting Yang Ingin ditampilkan

   // Recent Post widget for Blogger
   // Author: yOu w4hyOu
   // https://plus.google.com/106933633716411881896/about

   function recentPosts(a) {
       if (document.getElementById("recent-posts")) {
           var e = a.feed.entry,
               title, link, img, 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,
                   pd = e[i].published.$t.substring(0, 10).split("-"),
                   o = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
               if ("media$thumbnail" in e[i]) {
                   img = e[i].media$thumbnail.url
               } else {
                   img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-T7RYq-JqHH7tk3JLZm4zeY7ER-fXbJxMhjah6-vhM7kEdZ4BUS-D-fTl5HCTFbrxy9HavxzMvRUcODQAAybCVJRCSArwa1l4DRs9q2I59kCAu-wo_cgmI5IUuhhxvrtUJUj0EX7gnU/s40/no+image+%25281%2529.jpg"
               }
               content += '<li class="recent-posts"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong>';
               content += '<time datetime=' + pd.join("-") + '>' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + '</time></li>'
           }
           ct.innerHTML = content
       }
   }
   var you_script = document.createElement('script');
   you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
   document.getElementsByTagName('head')[0].appendChild(you_script);</script>

Konfigurasi Widget

Opsi	Keterangan
homePage	Ganti dengan URL blog Anda.
numPosts	Digunakan untuk menentukan jumlah posting yang akan ditampilkan.

1. Untuk gaya dan desain tampilannya silahkan edit CSS nya sesuai dengan keinginan dan kreasi anda 2. Untuk javascriptnya bisa juga disimpan di dalam HTML atau di upload di hosting eksternal kemudian simpan tepat di atas </body>

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn