Langsung ke konten utama

Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Widget adalah suatu komponen yang penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya. Pada kesempatan kali ini, saya akan memberikan cara mudah membuat widget artikel pilihan.

Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Widget artikel pilihan ini adalah widget yang di rekomendasikan, bagi anda yang ingin mendaftar menjadi pusblisher Google AdSense.

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja. Bagi anda yang ingin menampilkan widget ini dengan tampilan gambar thumbnail silahkan gunakan widget ini.

(Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger)

Jika anda penasaran bagaimana bentuk atau tampilan dari widget artikel pilihan ini, di bawah ini saya tampilkan bentuk tampilan dari widget artikel pilihan tersebut.
Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Langsung saja saya akan memberikan cara memasang widget artikel pilihan ini, silahkan ikuti langkah-langkah dari saya berikut ini.


Cara Memasang Widget Artikel Pilihan Di Blog

  • Langkah pertama masuk ke akun blogger anda
  • Pilih menu Tata Letak, pilih Tambahkan Gadget di tempat yang kalian inginkan, pilih menu HTML/JavaScript
  • Masukan Judul, kemudian masukan kode di bawah ini di kolom Konten
<style scoped='' type="text/css">
#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-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;}
#arlina-random li:last-child{border-bottom:0;}
#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='arlina-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://www.tutorialumum.com',
maxResults = 10,
containerId = 'arlina-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 ArlinaRandomPosts(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=ArlinaRandomPosts"></scr' + 'ipt>');
//]]>
</script>
  • Pengaturan widget :
    • http://www.tutorialumum.com : Ganti dengan URL blog anda.
    • 10 : Digunakan untuk menampilkan jumlah artikel yang ingin di tampilkan, silahkan ganti dengan jumlah yang anda inginkan.
  • Setelah selesai mengatur pilih Simpan
  • Jika berhasil maka tampilannya akan muncul seperti ini.
Cara Memasang Widget Artikel Terbaru yang Simpel dan Ringan

(Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog)

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.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya tentang berbagai macam widget blogger, silahkan tetap kunjungi blog Tutorial Umum.

Source : http://www.arlinadzgn.com/2016/02/cara-memasang-widget-random-post-di-blog.html

Postingan populer dari blog ini

Cara Mudah Membuat Sitemap Untuk Blog

Sitemap sangatlah di butuhkan di setiap blog, apalagi sitemap memudahkan bagi pengunjung yang ingin tahu apa saja isi dari artikel yang kita miliki. Untuk itulah kali saya akan memberikan tutorial tentang cara mudah membuat sitemap untuk blog .   Sitemap ini di bagi berdasarkan label sehingga memudahkan pengunjung mencari berdasarkan label yang ada. (Baca juga : Inilah Cara Mudah Memasukan Halaman Statis(Laman) Di Menu Navigasi ) Apa lagi di tambah fitur tanda tulisan New! Apabila kita baru membuat sebuah artikel, sehingga pengunjung mudah membedakan mana artikel yang baru dibuat, dan mana yang artikel lama. Bagi yang ingin tahu cara memasangnya, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Sitemap Untuk Blog Masuk akun Blogger kalian Pilih menu Laman , kemudian pilih Laman baru Di Laman pilih tab HTML , kemudian masukan skrip di bawah ini <style> p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;} a.post-titles {color: #0000FF;} ol li{list-...

Cara Membuat Sitemap Berdasarkan Label Dengan Mode Show Click

Setelah sebelumnya saya membagikan artikel tentang cara mudah membuat sitemap untuk blog . Kali ini saya akan membagikan cara membuat sitemap berdasarkan label dengan mode show click. Dimana artikel akan tampil, apabila kita klik label atau kategori yang ada di daftar sitemap tersebut. Cara ini saya dapat kan dari blog Arlina Design yang banyak membuat template-template responsive. (Baca juga : Cara Mudah Membuat Sitemap Untuk Blog ) Kemudian admin Arlina Design juga bilang bahwa, sitemap atau daftar isi blog ini merupakan hasil modifikasi yang di buat oleh Mas Taufik Nurrohman di blognya yaitu DTE :] . Untuk lebih lanjut tentang cara pemasangannya, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Sitemap Berdasarkan Label Dengan Mode Show Click 1. Cara Memasang Sitemap dengan Warna Biasa Langkah pertama masuk ke akun Blogger Pilih menu Laman , pilih Laman Baru Masukan Judul laman , kemudian masukan skrip di bawah ini di dalam Tab HTML <div dir="ltr" style=...

Cara Menggunakan Bing Webmaster Tools Terbaru

Webmaster tools sudah menjadi bagian dari para blogger , web master tools ini berguna untuk mengindeks sebuah artikel agar berada di situs pencarian. Namun kita biasanya hanya memakai Google webmaster tools saja, padahal ada banyak tempat untuk mengindeks artikel kita. Oleh karena itu sekarang saya akan membagikan salah satu webmaster tools selain Google webmaster tools, yaitu Bing webmaster tools. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menggunakan bing webmaster tools terbaru . (Baca juga :  Cara Menggunakan Google Webmaster Tools Terbaru ) Cara menggunakan Bing webmaster tools ini hampir mirip seperti Google webmaster tools , kita hanya memasukan url artikel kita Bing webmaster tools kemudian akan muncul di situs pencari Bing itu sendiri. Tetapi jika ada yang ingin mengetahui cara menggunakan Bing webmaster tools atau belum tahu cara menggunakan Bing webmaster tools, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Memas...

Cara Mudah Uninstall XAMPP di Komputer

XAMPP merupakan server yang berdiri sendiri, yang sering di pakai oleh web developer . Tapi yang harus di ketahui adalah XAMPP selalu update, jadi hal yang harus kita lakukan adalah meng-uninstall XAMPP dari komputer kita. Untuk itu pada tutorial kali ini, ane akan memberikan cara mudah uninstall XAMPP di Komputer . (Baca juga :  Cara Membuka phpMyAdmin 4.6.5.2 ) Namun yang agan harus lakukan sebelum meng-uninstall XAMPP ini adalah agan harus membackup semua file yang sudah ada di dalam XAMPP. Seperti file database dan script-script yang sudah agan buat. Untuk cara membackupnya cukup mudah, agan hanya harus memindahkan file-file yang ada di dalam folder XAMPP ke luar folder tersebut. Tidak usah panjang lebar, langsung saja ikuti langkah-langkah dari ane di bawah ini. (Baca juga :  Cara Export Database MySql dengan phpMyAdmin 4.6.5.2 ) Cara Uninstall XAMPP di Komputer Langkah pertama masuk ke tempat penyimpanan XAMPP agan, biasanya ada di Local Disk C Jika sudah ketemu, masuk...

Cara Membuat Widget Random Post Warna Warni dengan Counter di Blog

Setelah sebelumnya saya memberikan cara membuat widget random post dengan thumbnail di blog & Widget Artikel Pilihan , kali ini saya akan membagikan widget yang sama tetapi dengan tampilan yang berbeda yaitu widget random post warna-warni . (Baca juga : Cara Membuat Widget Random Post dengan Thumbnail di Blogger ) Widget random post ini berguna untuk menampilkan artikel di widget secara random , sehingga memudahkan pengunjung melihat artikel kita yang berbeda. Tidak hanya warna-warni, widget ini juga memiliki fitur counter atau tampilan nomor pada widget. Widget random post ini sangat cocok di gunakan bagi sobat yang memiliki blog dengan niche campuran, karena bentuk artikel sobat yang bermacam-macam. Bagi sobat yang ingin memasang widget random post ini silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Random Post Warna-Warni dengan Counter di Blog Langkah pertama masuk ke akun Bl...