Cara Membuat Widget Random Post Dengan Gambar

Cara Membuat Widget Random Post Dengan Gambar
Widget Random Post Dengan Gambar

Membuat Widget Random Post Dengan Gambar pada postingan saya kali ini adalah widget yang berisi daftar posting yang dimuat secara acak yang disertai dengan gambar. Banyak yang mengira widget ini merupakan alat yang cukup memiliki value dalam memperkaya navigasi blog, karena menampilkan daftar yang terduga (maksudnya artikel baru dan lama) memiliki kesempatan untuk disajikan kepada pengunjung, sehingga artikel lama yang sudah dilupakan bahkan oleh anda sendiri dapat dimunculkan kembali.

Selain itu ada juga yang menganggap kalo performa widget random post hanya membuat blog menjadi lambat dan membuang-buang waktu load. Dengan menghiraukan pendapat tersebut, sambil belajar memahami JavaScript, setelah sebelumnya membuat posting tentang membuat widget Widget Recent Post/Posting Terbaru Hanya Judul Saja dan juga Widget daftar posting yang telah diperbaharui, kali ini saya mencoba membuat widget random post dengan gambar, dan juga sedikit memberikan gambaran tentang cara membuatnya.

Cara Membuat Widget Random Post Dengan Gambar

1. Pada akun blogger sobat pilih tata letak kemudian buka form HTML dan JavaScript
2. Kemudian copy dan masukkan kode berikut pada form HTML dan JavaScript yang anda pilih tadi

<ol id="random-posts"></ol>
<style>
     #random-posts li {
      list-style: none;
      width:300px;
      height:100%;
      overflow:hidden;
      margin:5px 0
  }
  .imgupdate {
      float:left;
      margin:5px 10px 0 5px;
      border:1px solid #ccc
  }
  .random-posts a {
      text-decoration:none;
  }
  .random-posts a:hover {
      color:orange;
      text-decoration:underline;
  }
  .author {
      display: block;
      font-size: 90%;
      opacity: 0.7;
      margin-left: 55px;
  }
}
</style>
<script>
    //<![CDATA[
    var homePage = "http://info-kmu.blogspot.com/", // Ganti dengan alamat blog anda
        numPosts = 5; // Konfigurasi untuk mengatur jumlah posting
        //]]>
</script>
3. Simpan
4. Masuk ke menu template kemudian pilih edit HTML 5. Cari kode </body> kemudian copy dan simpan kode berikut tepat di atas </body> Sebagai alternatif anda juga bisa menyimpan kode di bawah ini di hosting eksternal.
// Pengembangan dari http://www.dte.web.id/2012/01/basic-json-feeds-for-blogger.html
// Widget Daftar Posting Diperbaharui
// Modified : yOu w4hyOu
// https://plus.google.com/106933633716411881896/about
// http://info-kmu.blogspot.com/

function randomPosts(a) {
    if (document.getElementById("random-posts")) {
        var e = shuffleArray(a.feed.entry),
            title, link, img, content = "",
            ct = document.getElementById("random-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,
                postAuthor = e[i].author[0].name.$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 = "http://2.bp.blogspot.com/-cNG7GEX_-Tg/USgW8xDqsEI/AAAAAAAAFK4/162ZVB_JFfg/s40/no+image+%25281%2529.jpg"
            }
            content += '<li class="random-posts"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
            content += '<strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong><span class="author"> By <span>' + postAuthor + '</span><time datetime=' + pd.join("-") + '> (' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + ')</time></span></li>'
        }
        ct.innerHTML = content
    }
}

function shuffleArray(arr) {
    var i = arr.length,
        j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';
document.getElementsByTagName('head')[0].appendChild(you_script);

5. Simpan

Konfigurasi Widget

OpsiKeterangan
homePageGanti dengan URL blog Anda.
numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan.

Untuk gaya dan desain tampilannya silahkan edit CSS nya sesuai dengan keinginan dan kreasi anda
Reaksi :
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar