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 Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger

Untuk kalian yang gemar membagikan tutorial di blogger pastinya kalian membutuhkan Syntax Highlighter ini, apalagi kalian yang menerapkan blog dengan niche programming. Pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat prism syntax highlighter untuk menampilkan script code di blogger . (Baca juga :  Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger ) Syntax Highlighter ini sudah tidak saya pakai sekarang, tetapi syntax highlighter ini sangat cocok untuk membagikan tutorial-tutorial yang menggunakan coding. Syntax Highlighter ini saya temukan di blog Arlina Design yang menerapkan niche tutorial blog dan sering membagikan template yang responsive. Kata admin blog Arlina Design, syntax highlighter ini adalah kombinasi antara syntax highlighter yang di buat blog Kang Ismet dan fitur penomoran yang di buat blog Kompi Ajaib . Untuk lebih jelasnya ikuti langkah-langkah dari saya mengenai cara membuat prism syntax highlighter untuk menampilkan ...

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 Membuat Button Responsive 13 Gaya dengan CSS

Button atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css . Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja. (Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya : 6 warna Biru Orange Merah Hijau Ungu Putih 4 ukuran XS (Extra Small) SM (Small) MD (Medium) LG (Large) 2 pengaturan Block Buttons Outline(Accessibility) Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/ . Tampilan Gaya Button Slant, Unite, Float Tampilan Gaya Button Pill, Material - flat, Material - circle Tampilan Gaya Button Fill, Gradient, Jelly Tampilan Gaya Button Stretch, Minimal, Bordered...

Cara Membuat Recent Post Berdasarkan Label Di Blogger

Setelah sebelumnya saya sudah membuat popular post berdasarkan label , pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat recent post berdasarkan label di blogger . Yang membedakan dari widget sebelumnya adalah antara widget popular atau populer yang hanya menampilkan artikel populer dan recent post atau artikel terbaru. (Baca juga :  Cara Membuat Widget Popular Post Berdasarkan Label di Blogger ) Ini memungkinkan visitor atau pengunjung blog untuk melihat serta memilih artikel dengan label atau kategori yang mereka sukai. Tidak hanya itu, script yang di pakai juga tidak terlalu banyak sehingga memudahkan kita mengatur widget recent post ini. Masih sama seperti widget popular post per label, widget ini juga memiliki pengaturan yang memudahkan kita untuk menampilkan beberapa fitur yang ada di dalam widget ini. Untuk cara memasang widget recent post berdasarkan label di blogger, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Recent...

Cara Memasang Script Anti AdBlock di Blogger

AdBlock adalah plugin yang biasa di gunakan para pengguna internet agar lebih mudah berkeliling di dunia maya tanpa melihat iklan yang menggangu. Tetapi ini sangat merugikan bagi para pemilik sebuah situs ataupun website-website yang menjadi publisher dari pengiklan, untuk itulah pada tutorial kali ini saya akan memberikan tutorial cara memasang script anti adblock di blogger . Langsung saja untuk cara memasang script anti adblock di blogger, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat ) Cara Memasang Script Anti AdBlock di Blogger Langkah pertama masuk ke akun Blogger agan Kemudian pilih menu Tata Letak , pilih Tambahkan Gadget , pilih HTML/JavaScript Lalu masukan script di bawah ini tepat di kolom Konten , sementara Judul tidak usah di isi <style scoped='' type='text/css'>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?do...

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 ...

Cara Membuat Widget Komentator Terbaik di Blogger

Dalam sebuah blog pasti ada yang namanya pengunjung , jika pengunjung tersebut sudah menyukai blog yang kita miliki, maka bukan tidak mungkin pengunjung blog tersebut sudah menjadi pengunjung tetap dari blog yang kita miliki. Pada tutorial kali ini saya akan membagikan cara membuay widget komentator terbaik di blogger . (Baca juga :  Cara Membuat Widget Recent Comments Ringan di Blog ) Dan pengunjung tersebut pasti sering meninggalkan beberapa komentar untuk blog kita, disini saya akan memberikan cara membuat widget komentator terbaik di blog. Widget komentator terbaik ini gunanya agar pengunjung yang sering memberikan komentar, bisa terlihat di widget blog kita tentunya. Untuk cara membuat widget komentator terbaik ini, ikuti langkah-langkah dari saya. (Baca juga :  Cara Membuat Widget Breaking News 2 Style di Blogger ) Cara Memasang Widget Komentator Terbaik di Blogger Masuk ke akun Blogger kalian Pilih menu Tata Letak , pilih Tambahkan Gadget di lokasi yang di inginkan, ke...

Cara Membuat HTML kbd tag dengan Efek Double click to select

Element <kbd> biasa di gunakan untuk membuat masukan perintah dari keyboard, dan bisa juga di gunakan untuk membuat perintah ( voice command ). Namun tag kbd ini juga di gunakan para pengguna situs web untuk membuat perintah di tengah teks, seperti blog Tutorial Umum sendiri juga menggunakan tag kbd untuk membuat sebuah perintah untuk pengunjung. Untuk itulah pada tutorial kali ini saya akan memberikan cara membuat HTML kbd tag dengan efek double click to select . (Baca juga :  Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Agan juga bisa mengatur warnanya sesuai keinginan agan. Dan juga untuk efek hover teksnya, agan juga bisa menggantinya sesuai keinginan agan. Apabila agan tidak ingin menggunakan JavaScript dari tag kbd ini, agan tidak perlu memasukan JavaScriptnya, karena JavaScript dari tag kbd ini di gunakan agar memudahkan pengunjung untuk memblok text kbdnya. Untuk tampilan element kbd tag ini, silahkan lihat di bawah ini. Langsung saja untuk cara memasang...

Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS

Tag script kbd biasanya di gunakan untuk menampilkan teks dalam bentuk penulisan kode . Kode ini biasa digunakan para pengembang untuk membagikan cara-cara tentang pemrograman. Untuk itu kali ini saya akan membagikan artikel tentang cara membuat efek tombol keyboard di blogger dengan css . kenapa dari awal saya bilang tag script kbd, memang untuk memanggil tombol keyboard ini, kita harus menggunakan tag kbd tersebut. sama seperti pada saat memanggil tag pre ataupun code. (Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger ) Untuk yang ingin tahu bentuknya, berikut ini adalah contohnya. Contoh tag kbd dengan efek tombol keyboard Gimana, keren kan? Bagi yang ingin tahu cara memasang script kbd ini, ikuti langkah-langkah dari saya berikut ini. Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS 1. Cara Memasang Efek Tombol Keyboard Dengan CSS di Template Blogger Langkah pertama masuk ke akun Blogger kalian Pilih menu Tema , kemudian pilih Edi...