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

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 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 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 Membuat Tombol Share di Tengah Gambar Blog dengan Sumo

Setelah sebelumnya saya membagikan cara membuat share button melayang dengan Sumo me , kali ini saya akan membagikan artikel tentang cara membuat tombol share ditengah gambar blog . Apa bisa menampilkan tombol share di gambar blog ? B isa, tetapi tombol share ini di gunakan untuk membagikan gambar yang di tampilkan. Untuk tampilan tombol sharenya bisa di lihat di blog Tutorial Umum . (Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me ) Walaupun tombol share ini akan muncul saat gambar di sentuh kursor, tetapi tombol share di tengah gambar ini tidak mengurangi kecepatan blog, jadi anda tidak perlu khawatir. Sebelum memasang tombol share ini, sebaiknya daftar dulu akun Sumo. Untuk cara daftar Sumo dan cara membuat tombol share melayang , silahkan baca di sini . Bagi anda yang sudah mendaftar akun Sumo, silahkan ikuti langkah-langkah berikut ini untuk menampilkan tombol share di tengah gambar blog . Cara Memasang Tombol Share di Tengah Gambar Blog dengan Sumo Cara Memasang Tom...

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 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 Script Anti AdBlock di Blogger

AdBlock adalah plugin yang biasa di gunakan para pengguna internet agar lebih mudah berkeliling di dunia maya tanpa melihat iklan yang menggangu. Tetapi ini sangat merugikan bagi para pemilik sebuah situs ataupun website-website yang menjadi publisher dari pengiklan, untuk itulah pada tutorial kali ini saya akan memberikan tutorial cara memasang script anti adblock di blogger . Langsung saja untuk cara memasang script anti adblock di blogger, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat ) Cara Memasang Script Anti AdBlock di Blogger Langkah pertama masuk ke akun Blogger agan Kemudian pilih menu Tata Letak , pilih Tambahkan Gadget , pilih HTML/JavaScript Lalu masukan script di bawah ini tepat di kolom Konten , sementara Judul tidak usah di isi <style scoped='' type='text/css'>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?do...

Cara Membuat Widget Popular Post Dengan Rating Bintang

D i dalam sebuah blog terdapat berbagai macam widget , dari widget recent post , random post , dan popular post . Karena sebelumnya saya sudah sering memberikan cara membuat widget recent post dan random post dengan berbagai jenis style , untuk pertama kalinya saya akan membagikan cara membuat widget popular post dengan rating bintang . E fek bintang ini sebetulnya sebagai tanda rating, rating ini bukan di dapat dari pengunjung tetapi di dapat dari banyaknya jumlah view dari artikel tersebut. Efek bintang ini di buat dengan font awesome . (Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome ) Jika sobat sering memodifikasi blog sobat, maka sobat pasti sudah mengerti tentang font awsome ini. Dimana terdapat icon yang bisa di masukan dengan mudah, dan juga font awesome ini sangat di gemari bagi para web developer khususnya pada tampilan sebuah website. Untuk lebih jelasnya mengenai cara pemasangan widget popular post ini, ikuti langkah-langkah dari saya berikut ini....

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