Membuat Popular Post Pelangi yang Keren di Blog

Assalamua'alaikum wr. wb.

Popular post/artikel terpopuler adalah artikel yang paling banyak dilihat oleh pengunjung. Pada kali ini saya mencoba modifikasi popular post menjadi keren yaitu berwarna-warni seperti pelangi dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat.

Tampilannya akan terlihat seperti ini :

Gimana keren bukan ?

Cara untuk memasangnya di blog kita ikuti saja langkah-langkah dibawah ini :
1. Silahkan masuk akun blogger Anda.

2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya judul saja.

3. Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Selamat sekarang Anda mempunyai tampilan popular post keren, menarik dan unik seperti pelangi yang berwarna-warni. Anda juga bisa mengedit tampilannya sesuai selera, untuk mengganti warna dengan mengubah nilai pada css pengaturan warna.

Semoga bermanfaat, jangan lupa like dan share artikel ini.

Wassalammu'alaikum wr. wb.

Related Posts:

Tweet

18 Trik Internet Keren yang Belum Tentu Kita Ketahui

Browsing merupakan seuatu kegiatan hobi dan kebutuhan hampir semua orang, tetapi diantara kegiatan browsing tersebut, masih terdapat "hidden trick" yang belum tentu semua orang mengetahui nya.

Berikut adalah "hidden trick" dari aktivitas browsing yg mesti kita coba, mohon maaf kalo banyak trick-trick yg agan-agan udah ketahuin sebelumnya, ane cuma pingin bahas lagi disini. Ane juga gak tau masih bisa work semua apa gak, hehe.
Okelah, berikut beberapa trik yang bisa kita coba, cekidot gan.

1. Membuka Tab yang Sebelumnya Kita Tutup

Cara :
Ctrl + shift + T
-atau-
Kalau di mac “Cmnd + Shift + T”
Works in Chrome and Firefox.

Klik untuk memperbesar

2. Image Searching

Cara :
Tahan tombol S + klik kanan pada gambar untuk mencari gambar yg kita klik
Cuma bisa di chrome, kalo di firefox jadinya malah set as desktop background.

3. Image Searching dengan Menarik Image

Cara :
Bisa juga tarik gambar ke search bar.

4. Nama Domain Otomatis

Cara :
Ketik web yang agan mau, trus ctrl + enter akan menambahkan www. didepan dan .com dibelakang otomatis, contoh www.ilmu-lengkap.com
-atau-
Contoh shortkey lain :
shift + enter = www.ilmu-lengkap.net
ctrl + shift + enter = www.ilmu-lengkap.org
(Chrome/Firefox/Opera).

5. Membuka Link New Tab

Cara :
Tahan tombol ctrl pada link yang agan tuju + klik kiri
-atau-
Biasanya ane menekan mouse tengah yang scroll untuk membuka link new tab
-atau-
Mac users, hold down “Apple Key/Command”.

6. Merubah Browser Menjadi Notepad

Cara :
Copy code dibawah ini kedalam url

data:text/html,%20<html%20contenteditable><Title>Notepad</Title>

7. Merubah Browser Menjadi Notepad Night Mode

Cara :

Copy code dibawah ini kedalam url

data:text/html;charset=utf-8,%20<title>Notepad%20(Nightmode)</title><body%20contenteditable%20style="font-family:%20DejaVu;font-weight:bold;background:#1E1E1E;color:#FFFFFF;font-size:1rem;line-height:1.4;max-width:80rem;margin:0%20auto;padding:2rem;"%20spellcheck="false">

Di firefox ane gak bisa, tapi di chrome works.

8. Get google.com Outside The Us

Gak tau sekarang masih work atau gak :D

9. Browsing pada Mode Incognito (Private Browsing)

Cara :

Tekan ctrl + shift + N

Nah yg ini buat yang suka browsing, tapi gak pengen history nya ke record, bisa mencoba cara ini

ane coba di chrome berhasil.

-atau-

(Mac users press “Command + Shift + N”). Also works in Opera. 

-atau-

Works in Firefox by pressing “Ctrl/Command + Shift + P”.

10. Menonaktifkan Autoplay Youtube pada Facebook

How :

Go to facebook.com/settings, click “video” on the left tool bar, then select “Off”. Auto-play video be gone!

11. Mute Email yang Mengganggu pada Gmail

How :
On an email, click “More” and then “Mute” to make reply-allpocalypses history.

12. Kalkulasi dengan Bacon Number

How :
Just google their name + Bacon number. Challenge: Try and find someone with a Bacon number above “2”.

13. Get Retro Google

Cara :
Coba ketik "google in 1998" nanti bakalan nongol google taun 98.
Tapi gak tau ini masih work apa gak :D

14. Halaman Google Jadi Berputar (Barrel Roll)

Cara :
Ketik "do a barrel roll" pada google search.

15. Maenin Game Retro di Google Images

How :
Search for “Atari Breakout” in Google Images. Enjoy! (All browsers).

16. Maenin Game Arcade di Google

How :
Google “zerg rush”, and try and stop the “o” invasion. A Zerg Rush is an overwhelming attack in a video game. More fun than it sounds. (Chrome/Firefox/Safari).

17. Ngancurin Web

How :
Go to daskeyboard.com, click “destroy this site” at the bottom of the page, and blow the page to pieces, Space Invaders style! (All browsers).

18. Easter Eggs Tersembunyi dengan Konami Code

Cara :
Sebenarnya banyak website dengan konami code tersembunyi, tetapi saya ambil satu contoh, buka web www.vogue.co.uk kemudian masukkan konami code "up, up, down, down, left, right, left, right, B, A" (pencel tombol keyboard sesuai code) maka akan muncul dinosaurus pada web tersebut.

DAN BONUS 1 LAGI DARI SAYA

19. Bermain Game Dinosaurus di Google Chrome Offline

Pastikan dulu chrome agan versi 38.0.2125.122 keatas.
Saat tidak ada internet, agan buka chrome dan coba buka situs pasti akan muncul seperti gambar diatas.

Selanjutnya tinggal tekan spacebar (spasi) pada keyboard agan kemudian tinggal maenin aja lompat-lompat, bisa pake' arah atas atau spasi.

Gimana ? Menarik-menarik bukan ? Silahkan dicoba untuk hiburan.
Jika agan menyukai artikel ini silahkan di like dan di share ke temen-temen yang lain.
Semoga bermanfaat.

Related Posts:

Tweet