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

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 Convert Video Menjadi MP3 dengan Software Format Factory

Biasanya kita mendengarkan lagu melalui file dengan format MP3 , namun ada juga yang mendengarkan lagu sekaligus melihat tampilan video aslinya melalui file dengan format MP4 . Saat kita melihat video dengan lagu pasti kita akan merasa lelah, sehingga videopun tidak menjadi maksimal untuk di lihat. Untuk itulah file dengan format MP3 sangat di butuhkan pada saat kita sedang kelelahan. Kali ini saya akan membagikan kepada kalian, cara convert video menjadi MP3 dengan Format Factory. Apa itu Format Factory? FormatFactory adalah sebuah software yang ada di dalam sebuah perangkat komputer, yang berguna untuk mengubah berbagai jenis file baik gambar, video, ataupun suara. (Baca Juga :  Cara Menampilkan Ekstensi File atau Tipe File di Windows 7 ) Saya sendiri memilih software Format Factory karena proses mengconvert filenya cukup mudah dan cepat. Bagi yang belum memiliki softwarenya, silahkan download dan install softwarenya disini . Cara Convert Video Menjadi MP3 dengan Software Format...

Cara Memasang In-Article Ads Google AdSense Secara Otomatis

Baru-baru ini Google AdSense memunculkan fitur iklan yang terbaru. Fitur iklan ini terbilang lebih efektif di bandingkan fitur iklan sebelumnya, karena lebih responsive dan memudahkan pengunjung untuk melihat iklan yang di munculkan di sebuah blog atupun website. Fitur iklan ini antara lain adalah In-feed ads , dan In-article ads . Dimana In-feed ads digunakan untuk memasang iklan di tengah pilihan artikel. Dan In-article ads di gunakan untuk memasang iklan di tengah artikel yang ada. (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Namun pada kesempatan kali ini, saya hanya akan memberikan cara memasang In-articel Ads secara otomatis . Kemudian untuk langkah pemasangannya ikuti langkah-langkah dari saya berikut ini. Cara Memasang In-Article Ads Google AdSense Secara Otomatis L angkah pertama masuk ke akun Google AdSense anda Pilih menu My Ads , kemudian pilih Content , pilih Ad units , pilih tombol Unit iklan baru Masuk ke Unit iklan baru Ke...

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

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