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 Menggunakan Google Webmaster Tools Terbaru

Kita sering melihat banyak blog yang muncul di google.com . Biasanya untuk mencapai posisi teratas dari google, seorang blogger menggunakan berbagai cara seperti menggunakan Webmaster tools . Untuk itu, pada tutorial kali ini saya akan memberikan cara menggunakan google webmaster tools . Sebetulnya banyak webmaster tools yang bisa digunakan para blogger, tetapi untuk mempermudah para blogger, google telah menyediakan Webmaster Tools agar para blogger dapat dengan mudah mengideks artikel-artikel mereka. (Baca juga :  Cara Menggunakan Bing Webmaster Tools Terbaru ) Apa itu Google webmasters tools ? Seperti yang sudah saya jelaskan tadi, Google Webmaster tools adalah fasilitas yang di berikan google agar mempermudah para pemilik sebuah situs dalam mesin pencari. Dalam hal ini Google juga memperlihatkan kinerja dari website atau situs yang kita miliki. Tidak usah panjang lebar menjelaskan, berikut adalah cara menggunakan Google webmaster tools. (Baca juga :  Cara Mengatasi Webmas...

Ganti Target Negara di Search Console Agar Artikel Blog Naik Peringkat

Search Console atau yang biasa kita sebut webmaster tools , adalah sebuah alat agar artikel blog yang kita milik bisa masuk ke mesin pencarian seperti google. Di dalam search console banyak sekali hal yang kita perlukan agar artikel blog yang kita miliki bisa naik peringkat di pencarian. Salah satunya adalah Penargetan Internasional , menu yang satu ini tidak boleh di lewatkan oleh kita. Di menu penargetan internasional ini ada 2 tab, yaitu tab pertama untuk Bahasa , kemudian tab kediua ada Negara . Banyak sekali manfaat yang bisa kita dapatkan dari menu Penargetan International ini. Untuk itulah kali ini saya akan membahas tentang cara ganti target negara di search console agar artikel blog naik peringkat. Bagi anda yang belum mengaktifkan tab bahasanya, anda bisa mengaktifkannya dengan Tag Hreflang . Untuk cara memasang tag hreflang ini, anda bisa baca artikelnya di sini . (Baca juga : Cara Memasang Tag Hreflang di Blog ) Apa manfaat dari mengganti target negara di search console?...

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

2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS , untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery . Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS,  karena template AMP ini sangat anti jika di tempelkan script jQuery. (Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll ) 2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya ...

Cara Menggunakan Bing Webmaster Tools Terbaru

Webmaster tools sudah menjadi bagian dari para blogger , web master tools ini berguna untuk mengindeks sebuah artikel agar berada di situs pencarian. Namun kita biasanya hanya memakai Google webmaster tools saja, padahal ada banyak tempat untuk mengindeks artikel kita. Oleh karena itu sekarang saya akan membagikan salah satu webmaster tools selain Google webmaster tools, yaitu Bing webmaster tools. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menggunakan bing webmaster tools terbaru . (Baca juga :  Cara Menggunakan Google Webmaster Tools Terbaru ) Cara menggunakan Bing webmaster tools ini hampir mirip seperti Google webmaster tools , kita hanya memasukan url artikel kita Bing webmaster tools kemudian akan muncul di situs pencari Bing itu sendiri. Tetapi jika ada yang ingin mengetahui cara menggunakan Bing webmaster tools atau belum tahu cara menggunakan Bing webmaster tools, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Memas...