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 Tabel di Blogger dengan Mudah & Responsive

Pada tutorial kali ini saya akan membagikan tutorial cara membuat tabel di blogger dengan mudah . Untuk membuat keterangan dari sebuah artikel di blog, terkadang kita membutuhkan tabel. Tabel tersebut biasanya di gunakan untuk membuat keterangan suatu artikel, agar tabel tersebut bisa memperjelas maksud artikel tersebut. (Baca juga :  Cara Membuat Button Responsive 13 Gaya dengan CSS ) Biasanya artikel itu adalah artikel tentang memperkenalkan sebuah template, agar pengunjung mengetahui fitur-fitur dari template itu, dan pengunjung tertarik dengan template tersebut. Untuk itu kali ini saya akan membagikan cara membuat tabel di blog dengan mudah dan responsive. Cara ini saya dapat dari blog Bung Frangki yang sering menjual template yang super cepat menurut saya. Untuk kalian yang belum melihat bagaimana bentuk dari tabel responsive tersebut, ini dia contohnya. Bagi kalian yang ingin menambahkan tabel responsive ini di blog, ikuti langkah-langkah dari saya berikut ini. (Baca juga :...

Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Kebanyakan blogger mengukur kesuksesan suatu artikel lewat komentar dari para pengunjungnya. Jika pengunjung menyukai artikel yang kita miliki, atau pengunjung ingin bertanya dan berinteraksi langsung dengan pemilik blog atau admin maka mereka akan menginputkan komentar mereka di kolom komentar. Untuk itu di artikel saya kali ini, saya akan memberikan cara membuat widget komentar postingan terbanyak yaitu sebuah widget untuk menampilkan beberapa artikel dengan komentar terbanyak. (Baca juga :  Cara Membuat Widget Komentar Terbaru dengan Avatar ) Widget komentar terbanyak ini akan menampilkan beberapa angka komentar tertinggi di blog kalian, dengan model yang responsive. Sehingga akan membuat para pengunjung blog kita tidak bosan dengan tampilan blog kita. Berikut langkah-langkah cara membuat widget komentar postingan terbanyak responsive di blogger. (Baca juga :  Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger ) Cara Membuat Widget Komentar Postingan T...

Cara Mudah Membuat Banner Iklan Sederhana dengan Paint

Banner iklan adalah hal umum dalam sebuah blog . Dengan iklan yang muncul di sebuah blog, menandakan bahwa blog tersebut sudah terpercaya. Banner iklan ada berbagai ukuran tetapi yang paling umum adalah banner iklan sidebar dan header. (Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog ) Google AdSense adalah sebuah perusahaan yang paling terkenal untuk periklanan . Dengan bergabung menjadi publisher google adsense, hal ini memungkinkan untuk menampilkan iklan di halaman blog yang kita miliki. Lalu bagaimana cara membuat banner iklan sendiri? Sebetulnya caranya sangat mudah. Kita bisa membuat iklan kita sendiri dengan berbagai software ataupun aplikasi editor gambar yang ada. Untuk itu kali ini saya akan membagikan cara membuat banner iklan sederhana dengan software paint. Hanya dengan software Paint? Ya, software yang paling awam ini juga bisa di gunakan untuk membuat banner iklan. Kenapa memilih Paint? Paint adalah software yang pasti selalu ada di dalam se...

Cara Menghapus Tulisan Diberdayakan oleh Blogger

Cara Menghapus Tulisan Diberdayakan oleh Blogger Di dalam setiap blog yang termasuk ke dalam Blogger, kita sering menemukan tulisan Diberdayakan oleh Blogger . Dimana tulisan ini sebenarnya adalah atribusi dari Blogger itu sendiri, dan cukup penting. Akan tetapi banyak sekali para blogger yang ingin menghapus tulisan ini, dengan alasan mengganggu pemandangan. (Baca juga : Cara Mudah Membuat Disclaimer Untuk Blog Dengan Disclaimer Generator ) Sebenarnya jika kita menghapus tulisan atribusi blogger ini, kita sudah melakukan pelanggaran . Akan tetapi pihak blogger tidak terlalu memperdulikan hal ini, jadi tidak menjadi masalah jika kita menghapus atribusi blogger ini. Berikut ini adalah contoh dari atribusi blogger tersebut. Template Hijau Magazine. Diberdayakan oleh Blogger . (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Sebetulnya kita tidak bisa menghapus tulisan atribusi blogger ini, akan tetapi kita bisa menyembunyikannya sehingga tidak bisa...

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 Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Setelah sebelumnya saya membagikan artikel tentang cara membuat widget recent post multi color , dan widget artikel terbaru yang super ringan . Kali ini saya juga akan memberikan cara membuat widget yang sama, yaitu widget recent post dengan gambar, keterangan waktu dan komentar . Bedanya dari widget recent post sebelumnya, widget ini terlihat simple tanpa warna, jadi sangat cocok bagi kalian yang tidak menginginkan warna yang rumit. Widget ini terbilang cukup ringan sehingga sobat tidak perlu takut untuk memasang widget recent post yang satu ini. (Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Di widget recent post ini juga sudah di sediakan beberapa fitur diantaranya pengaturan jumlah artikel yang akan di tampilkan, pengaturan tampilan waktu di buat artikel, dan tampilan jumlah komentar masuk pada artikel tersebut. Nah, bagi sobat yang ingin tahu cara pemasangannya, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Widget Recent Post Dengan Gambar...

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 Membuat Bayangan pada Teks dengan Effect Text-Shadow

Cara Membuat Bayangan pada Teks dengan Effect Text-Shadow Pada kesempatan kali ini saya akan membagikan cara membuat bayangan pada teks dengan menggunakan CSS , lebih tepatnya dengan effect text-shadow . Namun dalam beberapa hal, ada syarat yang harus di lakukan agar efek text-shadow ini muncul secara maksimal. Adapun syarat yang harus di lakukan adalah dengan menggunakan browser dengan versi yang tertera pada tabel di caniuse.com . Bagi anda yang tidak memiliki browser dengan versi yang tertera di caniuse.com , silahkan mendownloadnya terlebih dahulu. Efek text-shadow ini juga sudah saya terapkan di template yang saya desain, yaitu template Tutor Magazine 3D v1.0 . Bagi yang ingin mencoba atau membeli template ini silahkan masuk ke halaman ini . (Baca juga : Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Bagi anda yang ingin menggunakan efek text-shadow ini di template blog anda silahkan ikuti langkah-langkah dari saya di bawah ini. Namun jika anda hanya ...