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 Presentasi Menggunakan PowerPoint dengan Cepat

Selamat datang di blog Tutorial Umum, blog yang membahas tetang tutorial software yang ada di komputer. Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Presentasi Menggunakan PowerPoint dengan Cepat . Semoga artikel ini mudah di fahami dan bermanfaat bagi penulis dan pembacanya. Membuat file untuk sebuah presentasi sebenarnya tidak sulit, dan tidak memerlukan keahlian yang memadai. Dikarenakan sekarang sudah banyak software yang mempermudah kita untuk membuat file presentasi itu sendiri. (Baca juga : Cara Mengunci atau Memproteksi Sheet di Microsoft Office Excel ) Sebetulnya saya baru menggunakan file presentasi ini saat perkuliahan saja, itupun karena tuntutan tugas yang mengharuskan saya membuat file presentasi ini dengan menggunakan Microsoft Office PowerPoint. Namun sangat disayangkan Microsoft Office PowerPoint itu berbayar, dan harganya sangat mahal. Jadi banyak yang mengusahakan mendapat software ini dengan cara cracking. Selain Microsoft OfficePowerPoint sebetu...

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 Memasang SSL HTTPS di Blogger Gratis

Pada tutorial kali ini saya akan membagikan cara memasang SSL HTTPS di Blogger Gratis . Kita tau SSL ( Secure Socket Layer ) adalah sebuah keamanan untuk melindungi sebuah situs dengan teknologi enkripsi yang cukup canggih. Pada saat kita menggunakan SSL atau HTTPS maka akan muncul tulisan Secure atau Aman dan akan ada icon Gembok atau Lock di sampingnya. (Baca juga :  Cara Memasang Komentar Disqus di Blogger dengan Mudah ) Sebelum saya memberikan caranya, sebaiknya kalian tau kekurangan dan kelebihan memasang SSL ini, karena bisa berdampak baik dan buruk bagi blog kalian. Berikut adalah kelebihan dan kekurangan menggunakan SSL. Kelebihan dan kekurangan menggunakan SSL Kelebihan menggunakan SSL Menambah kepercayaan pengunjung pada situs web kita, bahwa website yang kita gunakan aman. Mengamankan aktifitas untuk bertransaksi karena sistem enkripsi yang canggih. Meningkatkan rangking SEO kalian. Google menganjurkan kita menggunakan HTTPS. (Baca juga :  Teknik Cara Memasukan Att...

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 Menghapus Icon Gambar Obeng dan Tang di Blogger

Pada artikel ini saya akan membagikan tentang cara menghapus icon gambar obeng dan tang di blogger . Sebenarnya cara ini sudah saya berikan di artikel saya tentang cara mudah menaikan SEO score di chkme.com , tetapi hanya sekilas, jadi tidak terlalu terlihat. Baca juga :  Cara Mudah Menaikan SEO Score di chkme.com Icon obeng dan tang ini sebenarnya berfungsi untuk mengedit widget yang ada di blog tersebut, jadi kita tidak perlu khawatir ini akan merusak blog kita, karena sebenarnya icon gambar obeng dan tang ini hanya bisa di lihat oleh admin blog tersebut saja. Tetapi dalam hal tertentu, terkadang ada juga icon gambar obeng dan tang ini tetap muncul di halaman blog walaupun orang tersebut bukan admin dari blog atau situs tersebut, hal inilah yang harus di hindari bagi setiap blogger. Sebenarnya icon obeng dan tang ini hanya menggunakan satu script saja yaitu <b:include name='quickedit'/> . Jika kalian merasa terganggu dengan icon gambar obeng dan tang ini, silahkan ikuti...

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