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 Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage

Pada tutorial kali ini saya akan memberikan cara menambah dan menghapus admin atau pengurus di facebook fanpage . Seperti kita ketahui facebook fanpage di gunakan sebagai tempat berkumpulnya sebuah kelompok yang menyukai suatu hobi ataupun tokoh masyarakat. (Baca juga :  Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger ) Didalam dunia blog, kita sering menggunakan fanpage facebook agar kita lebih dekat dengan pengunjung blog, dan juga agar lebih mudah mendapatkan visitor dari fanpage yang kita miliki. Facebook fanpage biasanya di urus oleh beberapa admin jika fanpage tersebut berasal dari sebuah perusahaan atau kelompok tertentu. Untuk cara menambah dan menghapus admin ataupun pengurus di facebook fanpage , ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Tombol Share Bergaya Flat di Blogger ) Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage Cara Menambah Admin atau Pengurus di Facebook Fanpage Langkah pertama login ter...

Cara Memperbaiki Banner Iklan Header Right Hijau Magazine

Bagi yang sudah mendownload template Hijau Magazine , jika kalian ingin menampilkan banner iklan header agar tampil maksimal, ikuti langkah-langkah berikut ini. (Baca juga :  Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Cara memperbaiki banner iklan Header Right template Hijau Magazine Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tema , kemudian piih Edit HTML . Cari script kode @media only screen and (max-width:925px){ , masukan script kode berikut ini tepat di bawahnya . .header-right { float: none; padding: 0; overflow: hidden; margin: 15px 0; width: 100%; max-width: 728px; } (Baca juga :  Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Bagi yang belum mendownload template Hijau Magazine dari saya, silahkan download di tutorialumum.com . Terima kasih bagi kalian yang sudah mendownload template Hijau Magazine.

Cara Mudah Install XAMPP 1.7.3 di Komputer

Setelah sebelumnya ane memberikan tutorial tentang cara mudah uninstall XAMPP di komputer , kali ini ane akan memberikan tutorial tentang cara mudah install XAMPP 1.7.3 di komputer . (Baca juga :  Cara Mudah Uninstall XAMPP di Komputer ) Pengertian XAMPP XAMPP merupakan beberapa penggabungan beberapa program, yang berfungsi sebagai web server yang bisa berdiri sendiri. XAMPP terdiri atas beberapa program yaitu,  Apache HTTP Server , MySQL database, dan bahasa pemrograman PHP dan Perl . XAMPP sebenarnya adalah singkatan dari beberapa kata yaitu. X = Maksud dari huruf X adalah software ini dapat di jalankan di berbagai sistem operasi. A = Apache, apache adalah web server yang di gunakan untuk menjalankan sebuah halaman dengan kode PHP. M = MySql, MySql adalah database server yang di gunakan untuk menyimpan data-data yang di buat dengan bahasa Sql. P = PHP adalah bahasa pemrograman untuk menampilkan halaman web, dan membuat halaman web. P = Perl adalah bahasa pemograman yang ...

Cara Membuat Iklan Tautan AdSense Responsif di Blog

Iklan tautan yaitu iklan yang muncul dengan tampilan seperti tombol . Awalnya saya juga sempat bingung bagaiman cara memasang iklan seperti tombol ini, kemudian saya bertanya kepada teman saya. Lalu ia menjawab itu adalah iklan tautan, karena saya juga ingin memberikan ilmu yang saya dapat, untuk itu pada tutorial kali ini, saya akan memberikan tutorial cara membuat iklan tautan adsense responsif di blog . Sebelumnya saya sudah jelaskan bahwa iklan tautan ini berbentuk seperti tombol, namun teks dari tombol iklan ini bisa menyesuaikan dengan isi artikel blog, sehingga sangat menguntungkan untuk menambah nilai CTR( Clickthrough Rate ). Namun untuk masuk langsung ke dalam halaman pengiklan, pengunjung yang mengklik iklan tautan ini harus mengklik iklan lagi agar pengunjung blog agan bisa masuk ke halaman pengiklan. Kurang lebih contoh stepnya seperti ini. (Baca juga :  Cara Memasang In-Article Ads Google AdSense Secara Otomatis ) Ukuran Iklan Tautan Google AdSense Untuk ukuran dar...

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 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 Menambah Slot Widget Sidebar Template Evo Magz

Cara Menambah Slot Widget Sidebar Template Evo Magz - Widget adalah hal yang sangat penting dalam sebuah blog. Dengan sebuah widget, maka kelayakan dari blog tersebut untuk menjadi blog yang baik akan semakin terlihat. Banyak widget yang dapat di gunakan agar pengunjung dapat dengan mudah melihat halaman lain dari blog tersebut. Untuk itu menambah slot widget sangatlah di perlukan. (Baca juga : Cara Menghilangkan Garis Warna Warni Template Evo Magz ) Template Evo Magz buatan Mas Sugeng adalah template yang paling mudah untuk di kembangkan. Untuk itulah saya membuat tutorial cara menambah slot widget sidebar template evo magz . Tidak usah panjang lebar langsung saja ikuti langkah-langkah dari saya berikut ini. Cara Menambah Slot Widget Sidebar Template Evo Magz 1. Cara Menambah Slot Widget Sidebar Masuk ke akun blogger kalian Pilih menu Tata Letak , hapus semua widget yang ada di sidebar template evo magz Kemudian pilih menu Tema , pilih Edit HTML Cari skrip <b:section class='...

Cara Membuat Widget Social Media Button Efek Berputar

Sebelumnya saya sudah banyak membagikan beberapa tutorial tentang cara membuat widget sosial media dalam berbagai bentuk juga, yang ini pasti tidak asing bagi agan-agan karena widget sosial media ini bisa agan temukan di template yang di buat oleh Arlina Design . Karena belum ada tutor cara membuat widget ini, untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat widget social media button dengan efek berputar . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Karena kebetulan hobi saya adalah mencari tau bentuk-bentuk CSS terbaru, jadi saya mulai mempelajari widget ini, dan kemudian saya menemukan script untuk membuat widget sosial media ini. Widget sosial media ini tidak membutuhkan JavaScript jadi untuk pemakaiannya cukup simple dan tidak mengurangi kecepatan blog agan. Berikut adalah tampilan bentuk widget social media button ini. Maaf jika tampilan Gif kurang maksimal. Sebelumnya saya juga membuat tutorial cara membuat widget so...

Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Setelah sebelumnya saya membagikan artikel tentang cara membuat widget recent post multi color , dan widget artikel terbaru yang super ringan . Kali ini saya juga akan memberikan cara membuat widget yang sama, yaitu widget recent post dengan gambar, keterangan waktu dan komentar . Bedanya dari widget recent post sebelumnya, widget ini terlihat simple tanpa warna, jadi sangat cocok bagi kalian yang tidak menginginkan warna yang rumit. Widget ini terbilang cukup ringan sehingga sobat tidak perlu takut untuk memasang widget recent post yang satu ini. (Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Di widget recent post ini juga sudah di sediakan beberapa fitur diantaranya pengaturan jumlah artikel yang akan di tampilkan, pengaturan tampilan waktu di buat artikel, dan tampilan jumlah komentar masuk pada artikel tersebut. Nah, bagi sobat yang ingin tahu cara pemasangannya, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Widget Recent Post Dengan Gambar...