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 Random Post dengan Thumbnail di Blogger

Di dalam sebuah blog kita membutuhkan sebuah widget yang menunjang agar pengunjung dapat melihat semua artikel yang kita miliki. Untuk itulah kali ini saya membuat tutorial tentang cara membuat widget random posts dengan thumbnails di blogger. Di widget ini juga di sediakan keterangan waktu artikel di buat, banyaknya komentar, serta menampilkan sedikit isi artikel tersebut, dan yang paling penting widget random posts ini memiliki thumbnail gambar agar widget terlihat menarik. Untuk kalian yang ingin tahu cara memasang widget random posts ini, ikuti langkah-langkah dari saya berikut ini. (Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog ) Cara Memasang Widget Random Posts dengan Thumbnails di Blogger Langkah pertama buka akun Blogger kalian Pilih menu Tata Letak , kemudian pilih Tambahkan Gadget , lalu pilih HTML/Javascript Masukan Judul widget, lalu masukan skrip di bawah ini <style> #random-posts img { border-radius: 10px; float: left; margin-...

Cara Menghilangkan Garis Warna Warni Template Evo Magz

Tutorial Umum Template Evo Magz adalah template yang paling di kenal oleh setiap blogger. Template ini adalah buatan seorang blogger yang sudah sangat senior, walaupun dia selalu bilang dirinya masih pemula, yaitu adalah Mas Sugeng . (Baca juga : Cara Membuat Recent Posts Blogger Berdasarkan Label Seperti Evo Magz Template ) Sejak awal peluncuran template ini, evo magz sudah langsung di buru oleh para blogger-blogger profesional. Kenapa template ini sangat diminati oleh para blogger? Karena template yang simple dan mudah di kembangkan, atau kasarnya “ gampang di edit ”. Oleh Karena itu banyak blogger-blogger yang mengincar template evo magz ini. Pada artikel kali ini saya akan menjelaskan bagaimana cara menghilangkan garis warna warni yang ada di template evo magz . Posisinya berada tepat di bawah primary menu. Sebenarnya itu bukanlah garis, melainkan adalah gambar yang panjang berbentuk warna warni. Bagi kalian yang ingin menghilangkan garis tersebut, ikuti langkah-langkah dari saya ...

Cara Menambahkan Icon di Menu Navigasi Blog

Kita tahu icon biasanya berbentuk kecil, biasanya untuk melambangkan suatu judul. Icon di sebuah blog biasanya digunakan untuk menambah kesan menarik pada tampilan blog. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menambah icon di menu navigasi blog . Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome . Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya. Langsung saja untuk cara menambahkan icon di menu navigasi blog , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Tombol Back To Top di Blog dengan Font Awesome ) Cara Menambahkan Icon di Menu Navigasi Blog Cara Memasukan Icon di Script Menu Navigasi Langkah pertama, buka akun Blogger kalian. Masuk ke menu Tema , kemudian pilih Edit HTML . K...

Cara Mendaftar dan Submit URL Website ke Yandex Webmaster Tools

Sebelumnya saya sudah membahas tentang cara mendaftar serta menggunakan beberapa situs pencarian agar website atau blog yang kita miliki dapat masuk ke dalam mesin pencarian, di antaranya adalah Google Webmaster Tools dan Bing Webmaster Tools . Sebenarnya ada banyak sekali situs pencarian yang bisa kita gunakan untuk mendatangkan pengunjung serta menampilkan website yang kita miliki, namun pada artikel kali ini saya akan membahas tentang cara mendaftar dan submit URL website atau blog ke yandex webmaster tools . Baca juga :  Cara Menggunakan Google Webmaster Tools Terbaru Apa itu Yandex Webmaster Tools ? Yandex Webmaster Tools adalah mesin pencari yang berasal dari negara Rusia , mesin pencarian ini sama seperti Google , Bing , dan Yahoo . Walaupun yandex webmaster tools ini tidak terlalu di kenal, tetapi banyak para pemilik website atapun blog juga menggunakan webmaster tools yang satu ini untuk menambah pengunjung website mereka. Saya sendiri mengetahui yandex webmaster tools i...

Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Kebanyakan blogger mengukur kesuksesan suatu artikel lewat komentar dari para pengunjungnya. Jika pengunjung menyukai artikel yang kita miliki, atau pengunjung ingin bertanya dan berinteraksi langsung dengan pemilik blog atau admin maka mereka akan menginputkan komentar mereka di kolom komentar. Untuk itu di artikel saya kali ini, saya akan memberikan cara membuat widget komentar postingan terbanyak yaitu sebuah widget untuk menampilkan beberapa artikel dengan komentar terbanyak. (Baca juga :  Cara Membuat Widget Komentar Terbaru dengan Avatar ) Widget komentar terbanyak ini akan menampilkan beberapa angka komentar tertinggi di blog kalian, dengan model yang responsive. Sehingga akan membuat para pengunjung blog kita tidak bosan dengan tampilan blog kita. Berikut langkah-langkah cara membuat widget komentar postingan terbanyak responsive di blogger. (Baca juga :  Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger ) Cara Membuat Widget Komentar Postingan T...

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 Iklan AdSense Berada di Antara Tag Heading

Seiring berkembangnya periklanan di dunia blog, Google AdSense semakin meningkatkan kualitas iklan yang di buat. Dari mulai In-feed Ads sampai In-article Ads , ada berbagai macam cara memasang iklan google adsense ini, tetapi kali ini saya akan membahas tentang cara membuat iklan adsense berada di antara tag heading , atau biasa di sebut tag h2. (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Tag H2 ini biasanya memiliki ukuran font yang lebih besar di bandingkan ukuran font lain yang berada di sebuah artikel. Walaupun ukurannya besar, tag h2 ini berbeda dengan judul artikel, karena jika judul artikel dan tag heading/tag h2 ini sama, maka template dari blog tersebut bisa di katakan tidak SEO . Jika sebelumnya saya sudah memberikan cara memasang in-article ads di tengah artikel maka kali ini kita juga menggunakan in-article ads ini di bawah tag heading. (Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis ) Untuk cara memasang iklan adsense ag...

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