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

Cara Mengganti Icon Favicon di Blogger

Pada tutorial kali ini saya akan membagikan tutorial tentang cara mengganti icon favicon yang ada di Blogger . Kita sering melihat icon favicon ini di atas address bar, biasanya pada saat awal pembuatan sebuah blog, kita akan mendapati tampilan default dari icon favicon tersebut. Baca juga :  2 Cara Termudah Mengganti Template Blog di Blogger Favicon sendiri berasal dari kata " Favorites Icon " yang berarti ikon favorit, tetapi jangan takut gambar yang kalian ingin masukan tidak sesuai, karena untuk mengupload icon ini, bisa menggunakan gambar format png ataupun gif . Favicon Icon ini bisa kalian buat sendiri menggunakan berbagai macam tools, asalkan ukuran tinggi dan lebar dari gambar tersebut sama. Kenapa sih kita harus mengganti Icon Favicon? Jawaban yang paling tepat adalah karena Icon ini melambangkan secara umum bagaimana karakter dari blog yang kita miliki, seperti dari warna, bentuk gambar ataupun bentuk teks. Lalu bagaimana cara membuat Favicon seperti blog Tutorial...

Cara Membuat Judul Blog dengan Gambar Teks Keren

Pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat judul blog dengan gambar teks keren . Kita sering melihat header judul sebuah blog menggunakan teks dengan bentuk font biasa seperti Arial , tetapi kita juga sering melihat judul blog berupa gambar , tetapi menggunakan font yang unik. (Baca juga :  Cara Membuat Slideshow di Blogger Keren ) Lalu bagaimana cara membuat judul blog dengan gambar teks keren? Kita sebenarnya juga bisa menggunakan aplikasi atau software editor gambar seperti Adobe Photoshop , Corel Draw , dan editor gambar lainnya. Namun jika kalian tidak memiliki skill membuat judul blog dengan gambar teks yang bagus, kalian bisa menggunakan cara dari saya. Nah, untuk cara membuat judul blog dengan gambar teks keren, silahkan kalian ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Cara Membuat Judul Blog dengan Gambar Teks Keren Karena di sini saya tidak bilang ingin menggunak...

Cara Membuat Floating Widget Breaking News / Headline News di Blogger

Setelah sebelumnya saya membagikan widget breaking news 2 style , pada artikel kali ini saya akan memberikan tutorial tentang cara membuat floating widget breaking news atau headline news di blogger . Sebelumnya saya menempatkan braking news ini pada area header dari blog, tetapi kali ini saya akan membuat widget ni menjadi melayang di bawah layar pengunjung blog. Baca juga :  Cara Membuat Widget Breaking News 2 Style di Blogger Sebenarnya sudah jelas dari judul artikel ini adalah floating widget berarti widget mengambang atau mengapung. Jadi floating widget breaking news adalah widget mengambang breaking news, saya menempatkan widget ini di bawah, karena biasanya template atau tampilan blog rata-rata menggunakan floating menu navigasi jadi pandangan pengunjung akan berkurang di atas. Dilihat dari fungsi, floating widget braking news atau headline news ini sangat berguna sekali, apalagi bagi pengunjung agar mengetahui informasi-informasi terbaru dari situs atau blog tersebut. Nah,...

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