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 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 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 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 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 Tombol Share di Tengah Gambar Blog dengan Sumo

Setelah sebelumnya saya membagikan cara membuat share button melayang dengan Sumo me , kali ini saya akan membagikan artikel tentang cara membuat tombol share ditengah gambar blog . Apa bisa menampilkan tombol share di gambar blog ? B isa, tetapi tombol share ini di gunakan untuk membagikan gambar yang di tampilkan. Untuk tampilan tombol sharenya bisa di lihat di blog Tutorial Umum . (Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me ) Walaupun tombol share ini akan muncul saat gambar di sentuh kursor, tetapi tombol share di tengah gambar ini tidak mengurangi kecepatan blog, jadi anda tidak perlu khawatir. Sebelum memasang tombol share ini, sebaiknya daftar dulu akun Sumo. Untuk cara daftar Sumo dan cara membuat tombol share melayang , silahkan baca di sini . Bagi anda yang sudah mendaftar akun Sumo, silahkan ikuti langkah-langkah berikut ini untuk menampilkan tombol share di tengah gambar blog . Cara Memasang Tombol Share di Tengah Gambar Blog dengan Sumo Cara Memasang Tom...

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 Author Box dengan Social Media Buttons

Cara Membuat Author Box dengan Social Media Buttons Author box berfungsi untuk memperkenalkan penulis atau pemilik blog yang sedang di kunjungi. Kali ini saya akan membagikan cara membuat author box dengan social media button . Skrip author box ini saya dapatkan di blog Arlina Design , yang terkenal dengan template-template responsive-nya. Author box ini sudah saya modifikasi tampilannya sehingga terlihat lebih menarik dan tidak polos lagi. Saya menambahkan sedikit skrip tambahan diantaranya border radius dan border bottom dari social media button yang ada di dalam author box ini. Author box ini juga sudah saya terapkan di template yang saya desain sendiri, yaitu template Hijau Magazine . (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Bagi ingin tahu cara memasang author box dengan social media, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Author Box dengan Social Media Buttons Masuk ke akun Blogger kalian Pilih menu Tema , pil...

Cara Mudah Membuat Parse HTML Tools di Halaman Blog

P arse HTML di gunakan untuk mengkonversi kode HTML, biasanya parse HTML tools ini di gunakan untuk mengkonversi iklan Google AdSense agar bisa di masukan ke dalam HTML blog anda. (Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis ) Cara Mudah Membuat Parse HTML Tools di Halaman Blog Mengenal Parse HTML Tools Apa itu Parse HTML Tools ? Parse HTML, kata parse dalam Bahasa Inggris berarti mengurai. Namun, secara definisi saya berpendapat bahwa Parse HTML adalah mengubah kode-kode atau tanda-tanda tertentu menjadi kode entitas (kode unik). Kode-kode yang biasanya diubah yaitu tanda lebih kecil (<), petik dua ("), ampersand (&), petik satu ('), tanda lebih besar (>). Kode-kode tersebut akan diubah menjadi kode-kode yang unik (kode entitas) seperti berikut ini. < akan diubah menjadi &lt; " akan diubah menjadi &quot; & akan diubah menjadi &amp; ' akan diubah menjadi &#039; > akan diubah menjadi &gt; Mengapa k...