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 Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang , pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget. (Baca juga :  Cara Membuat Widget Popular Post Dengan Rating Bintang ) Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut. Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Popular Post Berdasarkan Label di...

Cara Menggunakan Google Webmaster Tools Terbaru

Kita sering melihat banyak blog yang muncul di google.com . Biasanya untuk mencapai posisi teratas dari google, seorang blogger menggunakan berbagai cara seperti menggunakan Webmaster tools . Untuk itu, pada tutorial kali ini saya akan memberikan cara menggunakan google webmaster tools . Sebetulnya banyak webmaster tools yang bisa digunakan para blogger, tetapi untuk mempermudah para blogger, google telah menyediakan Webmaster Tools agar para blogger dapat dengan mudah mengideks artikel-artikel mereka. (Baca juga :  Cara Menggunakan Bing Webmaster Tools Terbaru ) Apa itu Google webmasters tools ? Seperti yang sudah saya jelaskan tadi, Google Webmaster tools adalah fasilitas yang di berikan google agar mempermudah para pemilik sebuah situs dalam mesin pencari. Dalam hal ini Google juga memperlihatkan kinerja dari website atau situs yang kita miliki. Tidak usah panjang lebar menjelaskan, berikut adalah cara menggunakan Google webmaster tools. (Baca juga :  Cara Mengatasi Webmas...

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger - Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, kali ini saya akan membagikan widget yang sama tapi dalam bentuk yang berbeda. Apa bedanya ? Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini. (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini. Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger Langkah pertama masuk ke akun blogger kalian Kemudian pilih menu Tata Letak , kemudian pilih lokasi widgetnya Pilih Tambahkan Gadget , kemudian pili...

Cara Menghilangkan Garis Warna Warni Template Evo Magz

Tutorial Umum Template Evo Magz adalah template yang paling di kenal oleh setiap blogger. Template ini adalah buatan seorang blogger yang sudah sangat senior, walaupun dia selalu bilang dirinya masih pemula, yaitu adalah Mas Sugeng . (Baca juga : Cara Membuat Recent Posts Blogger Berdasarkan Label Seperti Evo Magz Template ) Sejak awal peluncuran template ini, evo magz sudah langsung di buru oleh para blogger-blogger profesional. Kenapa template ini sangat diminati oleh para blogger? Karena template yang simple dan mudah di kembangkan, atau kasarnya “ gampang di edit ”. Oleh Karena itu banyak blogger-blogger yang mengincar template evo magz ini. Pada artikel kali ini saya akan menjelaskan bagaimana cara menghilangkan garis warna warni yang ada di template evo magz . Posisinya berada tepat di bawah primary menu. Sebenarnya itu bukanlah garis, melainkan adalah gambar yang panjang berbentuk warna warni. Bagi kalian yang ingin menghilangkan garis tersebut, ikuti langkah-langkah dari saya ...

Cara Mudah Membuat Parse HTML Tools di Halaman Blog

P arse HTML di gunakan untuk mengkonversi kode HTML, biasanya parse HTML tools ini di gunakan untuk mengkonversi iklan Google AdSense agar bisa di masukan ke dalam HTML blog anda. (Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis ) Cara Mudah Membuat Parse HTML Tools di Halaman Blog Mengenal Parse HTML Tools Apa itu Parse HTML Tools ? Parse HTML, kata parse dalam Bahasa Inggris berarti mengurai. Namun, secara definisi saya berpendapat bahwa Parse HTML adalah mengubah kode-kode atau tanda-tanda tertentu menjadi kode entitas (kode unik). Kode-kode yang biasanya diubah yaitu tanda lebih kecil (<), petik dua ("), ampersand (&), petik satu ('), tanda lebih besar (>). Kode-kode tersebut akan diubah menjadi kode-kode yang unik (kode entitas) seperti berikut ini. < akan diubah menjadi &lt; " akan diubah menjadi &quot; & akan diubah menjadi &amp; ' akan diubah menjadi &#039; > akan diubah menjadi &gt; Mengapa k...

Cara Membuat Kode Iklan AdSense di Samping Text Artikel

Setelah sebelumnya saya membagikan beberapa cara memasang kode iklan adsense seperti berada di tengah artikel ataupun di tengah menu beranda , pada kesempatan kali ini saya akan memberikan cara memasang kode iklan adsense di samping teks artikel . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Berikut adalah contoh iklan yang berada di samping teks artikel. Cara pemasangan ini adalah cara yang paling di anjurkan, karena pengunjung blog bisa langsung melihat iklan yang ada. Cara ini juga sangat di rekomendasikan oleh adsense sendiri karena tidak terlalu merusak pemandangan dari para pengunjung blog tersebut. Untuk ukuran iklan yang di gunakan agar posisi teks artikel rata dan bisa dengan mudah di baca, adalah ukuran 300x250 . Dengan format responsif atau yang terlihat logo smartphone di dalam pilihan iklan tersebut. (Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading ) Cara pemasangannya cukup mudah, untuk cara memasangnya ikuti langkah-langkah ...

Cara Memasang SSL HTTPS di Blogger Gratis

Pada tutorial kali ini saya akan membagikan cara memasang SSL HTTPS di Blogger Gratis . Kita tau SSL ( Secure Socket Layer ) adalah sebuah keamanan untuk melindungi sebuah situs dengan teknologi enkripsi yang cukup canggih. Pada saat kita menggunakan SSL atau HTTPS maka akan muncul tulisan Secure atau Aman dan akan ada icon Gembok atau Lock di sampingnya. (Baca juga :  Cara Memasang Komentar Disqus di Blogger dengan Mudah ) Sebelum saya memberikan caranya, sebaiknya kalian tau kekurangan dan kelebihan memasang SSL ini, karena bisa berdampak baik dan buruk bagi blog kalian. Berikut adalah kelebihan dan kekurangan menggunakan SSL. Kelebihan dan kekurangan menggunakan SSL Kelebihan menggunakan SSL Menambah kepercayaan pengunjung pada situs web kita, bahwa website yang kita gunakan aman. Mengamankan aktifitas untuk bertransaksi karena sistem enkripsi yang canggih. Meningkatkan rangking SEO kalian. Google menganjurkan kita menggunakan HTTPS. (Baca juga :  Teknik Cara Memasukan Att...

2 Cara Termudah Mengganti Template Blog di Blogger

Template blog adalah hal yang paling penting dalam sebuah blog. Karena dengan template yang bagus, maka pengunjung akan sangat betah berada di dalam blog kita. Mengganti template blog adalah hal yang paling penting, apabila kita ingin membangun sebuah blog yang bagus di mata pengunjung. Untuk itulah pada tutorial kali ini, ane akan memberikan tutorial tentang 2 cara termudah mengganti template blog di blogger . Loh kok ada 2 cara gan? Bukannya ganti template itu cuma di upload aja? Ya betul sekali, cara mengganti template memang ada hanya di upload, tapi sebetulnya ada cara lain yang lebih baik tanpa merusak tampilan tamplate blog tersebut. nah, bagi yang belum tau caranya, ikuti langkah-langkah dari ane berikut ini. (Baca juga :  3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita ) Cara Mengganti Template Secara Otomatis (Upload) Langkah pertama download dulu templatenya, disini ane pakai template Hijau Magazine , untuk template Hijau Magazine dan Tutor Magazine 3D , sil...