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 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 Widget Breaking News 2 Style di Blogger

Breaking News atau headline news biasa kita lihat di televisi. Breaking news ini biasanya menayangkan berita-berita terbaru secara sekilas, namun tidak hanya di televisi saja kita bisa melihat breaking news atau headline news ini, di website berita juga selalu ada. Untuk itu pada tutorial kali ini saya akan memberikan tutorial cara membuat widget breaking news 2 style di blogger . Widget breaking news ini biasanya di gunakan oleh situs atau blog dengan niche berita, namun bagi agan yang mau menggunakan widget ini selain niche berita juga di perbolehkan, karena berdampak positif bagi blog seperti menambah view dan memberitahukan kepada visitor bahwa ada artikel lainnya di dalam blog atau situs agan. (Baca juga :  Cara Membuat Widget Random Post Warna Warni dengan Counter di Blog ) Style Widget Breaking News Widget breaking news yang saya bagikan ini memiliki 2 style, berikut tampilan widget breaking news 2 style : Style 1 Widget breaking news ini memiliki cara pemasangan yang tida...

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 Membuat Widget Social Media Button Efek Berputar

Sebelumnya saya sudah banyak membagikan beberapa tutorial tentang cara membuat widget sosial media dalam berbagai bentuk juga, yang ini pasti tidak asing bagi agan-agan karena widget sosial media ini bisa agan temukan di template yang di buat oleh Arlina Design . Karena belum ada tutor cara membuat widget ini, untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat widget social media button dengan efek berputar . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Karena kebetulan hobi saya adalah mencari tau bentuk-bentuk CSS terbaru, jadi saya mulai mempelajari widget ini, dan kemudian saya menemukan script untuk membuat widget sosial media ini. Widget sosial media ini tidak membutuhkan JavaScript jadi untuk pemakaiannya cukup simple dan tidak mengurangi kecepatan blog agan. Berikut adalah tampilan bentuk widget social media button ini. Maaf jika tampilan Gif kurang maksimal. Sebelumnya saya juga membuat tutorial cara membuat widget so...

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 Widget Popular Post Dengan Rating Bintang

D i dalam sebuah blog terdapat berbagai macam widget , dari widget recent post , random post , dan popular post . Karena sebelumnya saya sudah sering memberikan cara membuat widget recent post dan random post dengan berbagai jenis style , untuk pertama kalinya saya akan membagikan cara membuat widget popular post dengan rating bintang . E fek bintang ini sebetulnya sebagai tanda rating, rating ini bukan di dapat dari pengunjung tetapi di dapat dari banyaknya jumlah view dari artikel tersebut. Efek bintang ini di buat dengan font awesome . (Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome ) Jika sobat sering memodifikasi blog sobat, maka sobat pasti sudah mengerti tentang font awsome ini. Dimana terdapat icon yang bisa di masukan dengan mudah, dan juga font awesome ini sangat di gemari bagi para web developer khususnya pada tampilan sebuah website. Untuk lebih jelasnya mengenai cara pemasangan widget popular post ini, ikuti langkah-langkah dari saya berikut ini....

Cara Instal Adobe After Effect CC 2017 dengan Mudah di Komputer

Adobe After Effect adalah sebuah produk software yang di kembangkan oleh perusahaan yang sudah tidak asing lagi, yaitu Adobe System . Sebelumnya adobe after effect ini adalah produk Macromedia tetapi sekarang sudah menjadi produk dari Adobe . Kita tahu Adobe After Effect adalah software yang sering di gunakan para editor video untuk mengedit video mereka, agar video kelihatan lebih menarik dan meningkatkan  perhatian para pemirsa video mereka. Dengan banyaknya fitur yang di miliki adobe after effect, maka para editor bebas mengkreasikan video mereka sebagus dan seunik mungkin. Adobe after effect ini juga sudah memiliki lebih dari 50 effect standar, sehingga kita tidak perlu repot-repot menambahkan plugin lagi ke dalam software ini. (Baca juga :  Cara Mudah Install XAMPP 1.7.3 di Komputer ) Adobe after effect ini juga memiliki fitur Expression yang bisa digunakan hanya menggunakan script untuk menghasilkan gerakan-gerakan yang dinamis. Bagi kalian yang ingin mengetahui bagaima...

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