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 Membuat Widget Recent Post Multi Color Keren di Blogger

Recent posts adalah widget untuk menampilkan artikel-artikel terbaru, widget ini adalah solusi terbaik agar pemirsa blog kita dapat melihat postingan terakhir yang kita buat. Pada tutorial kali ini saya akan memberikan cara membuat widget recent post multi color keren di blogger . Di artikel kali ini saya akan membuat recent post yang dapat membuat tampilan blog kalian lebih menarik serta mempermudah bagi viewer blog kalian membaca artikel-artikel terbaru dari blog kalian. (Baca juga :  Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar ) Recent post ini adalah widget yang paling sering dipakai oleh para blogger, karena widget ini dapat meningkatkan view pada suatu blog. Yang membuat recent post ini berbeda dari recent post yang lain adalah gambar thumbnail yang bulat serta setingan yang mudah. Kenapa dikatakan mudah, karena kalian hanya cukup mengaturnya tanpa menambahkan link blog kalian. Jadi widget recent post ini bisa di gunakan secara otomatis. Ti...

Inovasi Teknologi dan Seni Menuju Riau Berbudaya

Inovasi Teknologi dan Seni Menuju Riau Berbudaya - Riau adalah salah satu provinsi yang sedang giat dalam pembangunan jangka menengah, diantara salah satu misinya adalah meningkatkan pelayanan pendidikan. Peningkatan pelayanan pendidikan dilakukan karena peran para generasi muda dalam meningkatkan pembangunan sangatlah di butuhkan baik dari segi Inovasi Teknologi ataupun Seni, agar masyarakat Riau menjadi masyarakat yang berbudaya. Dimanakah peran generasi muda Riau dalam inovasi di bidang teknologi informasi? Peran Generasi Muda Riau Dalam Inovasi di Bidang Teknologi Informasi Program Riau Go.IT , adalah salah satu inovasi terbaru pemerintah dalam bidang teknologi informasi, sehingga memudahkan Pemerintah Provinsi Riau dalam meningkatkan pelayanan masyarakat, dan juga penyebarluasan informasi yang ada di Provinsi Riau. Sumber : http://humas.riau.go.id Program Riau Go.IT , adalah program Pemerintah Provinsi Riau pada saat ini, sehingga kemungkinan besar jika program ini sudah ter...

Cara Membuat Presentasi Menggunakan PowerPoint dengan Cepat

Selamat datang di blog Tutorial Umum, blog yang membahas tetang tutorial software yang ada di komputer. Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Presentasi Menggunakan PowerPoint dengan Cepat . Semoga artikel ini mudah di fahami dan bermanfaat bagi penulis dan pembacanya. Membuat file untuk sebuah presentasi sebenarnya tidak sulit, dan tidak memerlukan keahlian yang memadai. Dikarenakan sekarang sudah banyak software yang mempermudah kita untuk membuat file presentasi itu sendiri. (Baca juga : Cara Mengunci atau Memproteksi Sheet di Microsoft Office Excel ) Sebetulnya saya baru menggunakan file presentasi ini saat perkuliahan saja, itupun karena tuntutan tugas yang mengharuskan saya membuat file presentasi ini dengan menggunakan Microsoft Office PowerPoint. Namun sangat disayangkan Microsoft Office PowerPoint itu berbayar, dan harganya sangat mahal. Jadi banyak yang mengusahakan mendapat software ini dengan cara cracking. Selain Microsoft OfficePowerPoint sebetu...

2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS , untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery . Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS,  karena template AMP ini sangat anti jika di tempelkan script jQuery. (Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll ) 2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya ...

Cara Mudah Menaikan SEO Score di chkme.com

Awalnya saya kaget kenapa SEO Score saya hanya sekitar 30% saja di chkme.com , tapi ternyata saya tau kalau sebenarnya SEO Score yang ada di chkme.com tidak bisa di jadikan acuan pada blog kita. Artinya itu hanyalah sebuah skor biasa yang tidak terlalu efektif dalam mengukur sebuah SEO blog. Pada tutorial kali ini saya akan memberikan cara memudah menaikan SEO score di chkme.com . (Baca juga :  Teknik Cara Memasukan Attribute Alt di Gambar Agar Artikel Menjadi SEO ) Cara-cara ini juga saya tahu dari mas Sugeng , secara kasar mas Sugeng juga bilang bahwa SEO Score di chkme.com itu sama sekali gak penting . Bahkan walaupun seo score kita bisa sampai 100% , jika kualitas konten kita tidak memadai maka tidak berpengaruh terhadap ranking google. Tapi jika kalian yang tetap penasaran dengan SEO Score kalian yang ada di chkme.com, saya akan menunjukan caranya. (Baca juga :  2 Cara Setting Robot.txt di Blogger & Mengatur Tag Tajuk Robot Khusus di Blogger ) Cara Menaikan Skor S...

Cara Membuat Contact Form Sederhana Langsung Masuk ke Email

Kita tahu Contact Form adalah hal yang wajib dimiliki oleh sebuah blog atau sebuah situs website. Gunanya adalah untuk memberikan informasi kepada admin sebuah blog atau situs tersebut, baik itu informasi bug ataupun kesalahan dalam blog tersebut. Untuk itu pada tutorial kali ini saya akan memberikan cara membuat contact form sederhana langsung masuk ke email . (Baca juga :  Cara Termudah Membuat Privacy Policy Tanpa Di Ketik ) Tidak hanya memberitahukan hal itu saja, Contact Form juga berfungsi sebagai alat berinteraksi kedua setelah kolom komentar kepada admin suatu blog tersebut. Sehingga pesan rahasia yang kita buat juga tidak terlihat oleh orang lain. Jika kita memiliki Disclaimer , Terms of Services , dan Privacy Policy . Kita pastinya harus memiliki Contact Form, karena 3 halaman tadi sangat berkaitan dengan Contact Form. Jadi itulah kenapa saya bilang Contact Form itu hal yang wajib kalian miliki dalam membuat sebuah blog. Bagi kalian yang ingin tahu cara membuat Contact F...