Membuat Widget Artikel Acak Seperti Suara.com

Siapa yang tidak kenal dengan Situs berita yang satu ini yaitu suara.com dengan tampilan situs yang sederhana bersih, rapi, dan pokoknya oke deh tampilan situsnya. Dan yang paling saya minati dari situ suara.com ini adalah dari segi tampilan Widget artikel acaknya yang ada dibawah menu horizontal nya itu sobh hehe.

Selain membuat web/blog kita menjadi lebih profesional dan rapi juga pastinya, widget artikel acak ini bisa membantu menurunkan Bounce rate, mengapa? ya jelas dong apabila ada pengunjung yang tertarik dengan gambar tersebut pengunjung akan melihatnya alias penasaran. Baiklah nggak harus panjang lebar jelasinnya langsung saja kita lihat bagaimana penampakannya.
Memasang Widget keren
Widget keren mirip Suara.com
Atau anda bisa melihatnya diblog ini dibawah menu. Bagaimana? apakah anda tertarik untuk memasang widget keren seperti ini, baiklah bagi anda yang ini memasangnya silahkan ikuti tutorial sederhana saya kali ini.

Membuat Widget Artikel Acak Seperti Suara.com

  • Loggin Akun blogger anda
  • Pilih Menu Edit HTML , masukkan kode dibawah ini tepat di atas kode </style> atau kode ini jika tidak ada ]]></b:skin> .
.focus-content {margin: 0 auto;display: inline-block;}
.fokus{width:100%;height:66px}.fokus-img-cont{float:left;position:relative;width:117px;height:66px;margin-right:5.714px;overflow:hidden}.fokus-img-cont:last-child{margin-right:0}.fokus-img{width:117px;height:66px}.fokus-img-overlay{position:absolute;background:#e83a3b;background:rgba(232,58,59,0.8);width:100%;height:100%;left:0;right:0;bottom:0;top:100%;overflow:hidden;transition:.2s;-webkit-transition:.2s;opacity:.8}.fokus-img-cont:hover .fokus-img-overlay{top:0;transition:.2s;-webkit-transition:.2s}.fokus-img-title{position:absolute;width:105px;bottom:0;left:0;color:white;font-size:12px;font-family:'Open Sans Semibold',Arial,sans-serif;line-height:15px;padding:2px 6px}
  •  Setelah itu tambahkan lagi kode dibawah ini, tepat di atas kode </body> kode terletak paling bawah
<script type='text/javascript'>//<![CDATA[
// Feed configuration
var homePage = 'http://multiajaib.blogspot.com',
maxResults = 8,
noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
containerId = 'thumbnail-focus';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
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;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<div class='focus-content'>";
for (var i = 0, len = entry.length; i < len; i++) {
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<div class="fokus-img-cont">';
        skeleton += '<a href="' + link + '">';
skeleton += '<img src="' + img + '" alt="" width="117" height="66">';
        skeleton += '<div class="fokus-img-overlay"><div class="fokus-img-title">' + entry[i].title.$t + '</div></div>';
skeleton += '</a>';
skeleton += '</div>';
}
ct.innerHTML = skeleton + '</div>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');//]]></script>
  •  Setelah itu, kita pindah kemenu Tata Letak, silahkan anda tambahkan Widget baru HTML/Javascipt , lalu masukkan kode dibawah ini
<div class="fokus clearfix" id='thumbnail-focus'></div>
  • Selesai, dan lihat hasilnya!
Bagitulah cara memasang Widget artikel acak yang mirip dengan situs Suara.com, bagi anda yang belum tahu caranya coba ikuti tutorial saya dengan teliti, pasti akan jadi kok, apabila ada kesalahan harap laporkan dengan komentar dibawah yang telah saya sediakan. Semoga bermanfaat... 

Membuat Widget Artikel Acak Seperti Suara.com Rating: 4.5 Diposkan Oleh: Munawir Alfikri

10 komentar:

  1. pengen nyoba mas, nanti mau saya pasang yang rencananya pengen bikin blog yang kontennya arahnya ke berita gitu tapi masih angan angan, nanti kalau sudah pasti bisa saya coba tips ini.

    ReplyDelete
  2. Kalau mas pengen buat blog baru..
    coba aja pasang dulu ini kode heheh... nantikan kalau sudah punya blog baru bisa pasang Widget keren ini dengan mudah, karena sudah tau caranya, tinggal copy aja lagi codenya diblog ini ;)

    ReplyDelete
  3. wah banyak juga ya mas scrif nya, ijin simpan dulu informasi nya :)

    ReplyDelete
    Replies
    1. Menurut saya itu tidak terlalu banyak mas Nabil...

      Delete
  4. Keren Mas, jadi ngiler nih pengen nyoba :)

    ReplyDelete
    Replies
    1. Hehehe kalau mas Heri ngiler mau nyoba, silahkan aja mas...
      lumayan jugakan buat nambah-nambah ilmu hehe, makasih atas kunjungannya

      Delete
  5. Dicoba gan keren amat :D

    NB: (lain kali buat keterangan pembuat widget) :3

    ReplyDelete
    Replies
    1. wkwkwkw yang buat kayaknya Esmosi nih :p

      Delete

Apa tanggapan anda tentang artikel diatas?