Cara Membuat Widget Artikel Pilihan Di Blog

 Widget adalah suatu komponen yang bisa dikatakan sangat penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya.

 Pada Umumnya widget yang digunakan para blogger untuk merekomendasikan artikel terbaiknya adalah popular post. Selain itu, widget artikel sesuai label juga sering dimanfaatkan untuk menarik pengunjung agar betah membaca artikel di blog tersebut.

 Sebenarnya cara terbaik dalam menarik pengunjung dengan tampilan blog yang keren adalah dengan memasang feature highlight. Highlight adalah fitur yang sangat menarik dengan tampilannya berbeda dari postingan lainnya.

 Yang paling umum ditemui adalah fitur highligh yang menampilkan satu gambar besar dengan permalink dan deskripsi, lalu disusul dengan artikel lainnya yang hanya berisikan permalink dan deskripsi tanpa gambar.

 Sayangnya fitur tersebut cukup banyak memakan waktu dalam membuka artikel. Alhasil konten yang dibuka menjadi lambat dan tidak ramah pengunjung. Loading pun lambat karena terlalu banyak meminta http requests.

 Terkadang sebagai penulis atau editor kita juga ingin merekomendasikan artikel yang kita suka kepada pembaca. Tetapi karena artikel tersebut tidak menjadi artikel yang paling banyak dibaca, akhirnya kita tidak bisa memunculkannya.

 Mungkin banyak blogger yang mencari cara untuk menampilkan artikel pilihannya untuk dibaca. Sayangnya, masih banyak blogger yang tidak tau caranya.

 Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja.

Cara Memasang Widget Artikel Pilihan Di Blog

1. Pertama masuk ke akun blogger anda terlebih dahulu.

2. Kemudian pilih menu Tata Letak atau Layout.

3. Selanjutnya pilih Add Gadget atau Tambah Gadget, lalu pilih HTML/JavaScript.

4. Setelah itu, masukan kode CSS berikut ini.

<style scoped='' type="text/css">
#tamboenman-random ul{list-style:none;margin:0;padding:0}#tamboenman-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#tamboenman-random li:last-child{border-bottom:0;}
#tamboenman-random li a{color:#444;}#tamboenman-random li a:hover{color:#ff4f4f;text-decoration:none}
</style>
<div id='tamboenman-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'https://www.tamboenman.xyz',
   maxResults = 7,
   containerId = 'tamboenman-random';
function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
}
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;
}
function tamboenmanRandomPosts(json) {
   var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
   // 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>');
}
function randomPosts(json) {
   var link, ct = document.getElementById(containerId),
       entry = shuffleArray(json.feed.entry),
       skeleton = "<ul>";
   for (var i = 0, len = entry.length; i < len; i++) {
       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 += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
   }
   ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=tamboenmanRandomPosts"></scr' +'ipt>');
//]]>
</script>

5. Selesai

Keterangan : 

● Tulisan yang ditandai yaitu  'https://www.tamboenman.xyz' diganti dengan alamat blog anda.

● Angka 7 yang di tandai adalah jumlah artikel pilihan yang akan ditampilkan di blog anda.

 Demikian tutorial singkat dari saya, mengenai cara mudah membuat widget artikel pilihan di blog. Jika ada pertanyaan mengenai cara memasang ataupun mengenai widget artikel pilihan ini, silahkan masukan kedalam kolom komentar. 

Berbagi :