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

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 Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage

Pada tutorial kali ini saya akan memberikan cara menambah dan menghapus admin atau pengurus di facebook fanpage . Seperti kita ketahui facebook fanpage di gunakan sebagai tempat berkumpulnya sebuah kelompok yang menyukai suatu hobi ataupun tokoh masyarakat. (Baca juga :  Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger ) Didalam dunia blog, kita sering menggunakan fanpage facebook agar kita lebih dekat dengan pengunjung blog, dan juga agar lebih mudah mendapatkan visitor dari fanpage yang kita miliki. Facebook fanpage biasanya di urus oleh beberapa admin jika fanpage tersebut berasal dari sebuah perusahaan atau kelompok tertentu. Untuk cara menambah dan menghapus admin ataupun pengurus di facebook fanpage , ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Tombol Share Bergaya Flat di Blogger ) Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage Cara Menambah Admin atau Pengurus di Facebook Fanpage Langkah pertama login ter...

Cara Membuat Share Button Melayang Dengan Sumo Me

Share button atau tombol share sangatlah penting dalam sebuah blog, tombol share ini berfungsi untuk membagikan artikel kita di sebuah situs jejaring sosial . Biasanya setelah setelah mengklik tombol share, maka tampilan situs jejaring sosial tersebut langsung akan muncul. Tombol share ini juga berguna untuk meningkatkan view, karena blog kita sudah ada di situs jejaring sosial yang kita miliki. Tombol share ada banyak jenisnya, dari yang bawaan template yang kita pakai, ataupun yang bisa kita pasang secara manual. (Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger ) Tetapi kali ini saya tidak akan menjelaskan tentang tombol share bawaan template, tetapi tentang tombol share yang bisa di pasang secara manual. Disini saya akan memakai tombol share dari Sumo Me. Sumo Me adalah tombol share yang sangat populer, karena banyak blog-blog yang sudah terkenal memakai tombol share ini. Untuk contoh tampilannya, kalian bisa lihat di samping kiri pada blog Tutorial Umum. Terlihat ...

Cara Membuat Filter Gambar Dengan CSS

Filter gambar biasanya digunakan pada saat kita mengedit gambar. Biasanya juga kita hanya menggunakan aplikasi untuk memfilter gambar tersebut sehingga dapat berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan menggunakan CSS , untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat filter gambar dengan CSS . (Baca juga :  Cara Membuat Gambar Flat Design Secara Otomatis ) Beberapa filter gambar yang bisa di gunakan antara lain. Filter Gambar yang Bisa di Gunakan dengan CSS 1. Blur Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar. 2. Brightness Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar. 3. Contrast Kontras. Secara umum kontras diartikan sebagai perbedaan gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang, atau warna...

Cara Menambah Kode Iklan AdSense Di Blog Lain

Google AdSense biasanya di daftarkan hanya untuk 1 buah blog saja, namun tahukah anda bahwa kode iklan adsense bisa di masukan ke blog lain . Untuk itulah kali ini saya akan memberikan cara menambah kode iklan adsense di blog lain . Namun ada hal yang harus di perhatikan dalam pemasangan kode iklan adsense ini. Berikut adalah hal-hal yang harus diperhatikan untuk memasang iklan adsense di blog lain. (Baca juga : Cara Membuat Kode Iklan AdSense di Samping Text Artikel ) Hal yang Harus di Perhatikan Saat Memasang Iklan Google AdSense di Blog Lain 1. Jumlah Pemasangan Iklan Biasanya untuk jumlah pemasangan yang aman hanya 3 buah saja maksimal, tetapi jika ingin lebih silahkan saja, tetapi resiko di tanggung sendiri. 2. Blog Sesuai Kebijakan AdSense Jika sobat ingin menambahkan kode iklan adsense di blog lain, ini adalah hal yang penting. Karena jika blog yang ingin di tambahkan tidak sesuai kebijakan adsense, maka akan terjadi hal yang fatal seperti banned akun. 3. Blog Tidak dalam Tahap...

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 Membuat Pop Up Like Box Facebook di Blogger

Pada artikel kali ini saya akan memberikan tutorial tentang cara membuat pop up like box facebook fanpage di blogger . Perlu kalian ketahui script pop up adalah script yang paling di benci pengunjung karena sangat menghalangi pengelihatan mereka, oleh karena itu sebaiknya kalian memikirkan para pengunjung blog juga. Baca juga :  Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger Namun jika kalian ingin meningkatkan like atau pengunjung facebook fanpage kalian, hal ini sangat di rekomendasikan karena visitor dari facebook juga di perlukan. Dengan tampilan yang sudah saya modifikasi sehingga facebook fanpage ini terlihat lebih menarik di lihat mata, dan saya menggunakan tombol close yang jelas agar pengunjung juga tidak kebingungan saat ingin menutup pop up like facebook ini. Kurang lebih tampilannya seperti ini. Nah untuk cara memasang pop up like box facebook di blogger, ikuti langkah-langkah dari saya berikut ini. Baca juga :  Cara Membuat Widget Breaking News ...

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