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

4 Langkah Untuk Periklanan Gratis

Selalu ada beban keuangan yang signifikan terkait dengan mengiklankan produk, layanan, atau upaya seperti situs web. Omong-omong, saya selalu menjadi penggemar tren iklan gratis. Saya telah sukses dengan dua metode berbeda untuk memperoleh publisitas gratis yang ingin saya bagikan kepada Anda. Salah satu opsi adalah menempatkan iklan di situs web populer dan gratis. Saya telah menulis tentang beberapa situs teratas yang akan beriklan secara gratis. Mulailah dengan mengunjungi internetmarketinglearningcenter.com/classified-ads.html untuk menemukan platform periklanan gratis yang Anda inginkan. Cara kedua agar saya dapat memasang iklan tanpa mengeluarkan uang adalah dengan berinvestasi dalam Kursus Iklan Baris Gratis. Ini adalah kursus yang sangat singkat, dan saya harus membayar Clickbank $19,95 untuk mengakses alat promosi ini. Pergi ke tautan unduhan perangkat lunak gratis yang akan Anda gunakan untuk memposting dan memantau iklan Anda adalah sorotan dari Kursus Iklan Baris Gratis. Ku...

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 Gambar Flat Design Secara Otomatis

Flat Design adalah desain gambar yang cukup populer di kalangan blogger. Selain efeknya yang simple dan menarik, flat design juga memiliki object yang terlihat tampak lebih hidup. Sehingga saya juga menggunakan flat design ini sebagai gambar utama dalam sebuah artikel. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat gambar flat design secara otomatis . Sebelum memulai membuat, ada baiknya saya menjelaskan sedikit tentang flat design. (Baca juga :  Membuat Widget Social Media Button Flat Design di Blog ) Apa itu flat design ? Flat Design adalah desain dengan pendekatan minimalis yang menekankan kegunaan, dengan desain yang bersih tanpa ada bevel, bayangan, tekstur, berfokus pada tipografi, warna-warna cerah dan ilustrasi dua dimensi. Sedangkan yang pertama kali mengenalkan teknik flat design ini adalah perusahaan Microsoft . Kalau masih bingung, dan masih bertanya-tanya apa itu flat design. Lebih baik kita langsung saja praktekan cara membuat ga...

Cara Membuat Contact Form Sederhana Langsung Masuk ke Email

Kita tahu Contact Form adalah hal yang wajib dimiliki oleh sebuah blog atau sebuah situs website. Gunanya adalah untuk memberikan informasi kepada admin sebuah blog atau situs tersebut, baik itu informasi bug ataupun kesalahan dalam blog tersebut. Untuk itu pada tutorial kali ini saya akan memberikan cara membuat contact form sederhana langsung masuk ke email . (Baca juga :  Cara Termudah Membuat Privacy Policy Tanpa Di Ketik ) Tidak hanya memberitahukan hal itu saja, Contact Form juga berfungsi sebagai alat berinteraksi kedua setelah kolom komentar kepada admin suatu blog tersebut. Sehingga pesan rahasia yang kita buat juga tidak terlihat oleh orang lain. Jika kita memiliki Disclaimer , Terms of Services , dan Privacy Policy . Kita pastinya harus memiliki Contact Form, karena 3 halaman tadi sangat berkaitan dengan Contact Form. Jadi itulah kenapa saya bilang Contact Form itu hal yang wajib kalian miliki dalam membuat sebuah blog. Bagi kalian yang ingin tahu cara membuat Contact F...

Cara Membuat Widget Artikel Terbaru Super Ringan di Blog

Widget artikel terbaru adalah widget yang paling penting dalam sebuah blog, karena pengunjung blog harus tahu apa saja artikel yang sedang kita update. Widget artikel terbaru juga sangatlah penting jika kita sedang ingin mendaftar menjadi publisher di Google Adsense . Widget ini sangat di rekomendasikan bagi kalian dalam tahap review adsense. Untuk itulah kali ini saya akan memberikan cara membuat widget artikel terbaru . Baca juga :  Cara Mudah Membuat Widget Artikel Pilihan Di Blog Widget yang saya berikan ini adalah widget yang ringan, jadi tidak perlu takut untuk memasang widget ini. Baiklah untuk cara memasang widget artikel terbaru di blog, ikuti langkah-langkah dari saya berikut ini. Baca juga :  Cara Membuat Widget Recent Comments Ringan di Blog Cara Memasang Widget Artikel Terbaru Super Ringan di Blog Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tata Letak . Kemudian pilih lokasi widget yang kalian inginkan, pilih Tambahkan Gadget . Lalu pilih HTML/Javasc...