Mengulas Misteri dan Blogging

Modifikasi Widget Popular Posts Keren dan Elegant

Widget Popular Posts

Modifikasi Widget Popular Posts Keren dan Elegant - Kalau saya lihat memang sekarang ini sudah bermacam-macam model modifikasi widget popular posts. Ada yang bisa berjalan sendiri, bisa begerak sendiri, ada yang terdapat nomornya. Dan ada juga yang hanya memanfaatkan kombinasi warna yang sangat keren. 

Sama untuk popular posts ini. Saya juga memodifikasinya dengan memanfaatkan kombinasi warna yang kalem dan elegant. Widget ini juga terdapat nomornya.


Jika ditanya penting apa tidak widget popular posts itu? Saya akan jawab bahwa itu penting sekali. Di blog kita memang harus ada navigasi berupa daftar postingan-postingan blog. Terserah anda, baik berupa Popular Posts, Recent Posts ataupun Random Posts. Apalagi, jika kita memasang semuanya justru akan lebih baik lagi. Tapi, salah satu dari ketiga itu juga sudah cukup.

Dan jika blog kita sudah terdapat popular posts-nya, pengunjung akan melirik apa saja postingan-postingan yang ada di blog kita. Meskipun postingannya tidak menarik, minimal orang itu tau, 'Oh, itu toh postingannya'. Dan syukur-syukur, postingan itu akan dikunjunginya.
Jika fungsi utamanya agar dilirik dan dilihat oleh banyak orang, maka widget popular posts ini juga harus diletakkan di posisi yang strategis yaitu, pada bagian sidebar samping postingan. Jangan sampai, karena peletakkan yang salah dan tidak strategis, akan berdampak buruk pada trafik blog kita. 

Langsung saja, untuk modifikasinya sangat mudah. 

Pertama, pastikan Anda sudah memasang widget popular posts-nya di blog anda dan pastikan posisinya benar dan strategis. Caranya, masuk ke Tata Letak -- Add Gadget -- Entri Populer. Hilangkan centang pada thumbnail gambar dan cuplikan. Jadi, yang tampil ini hanya judul postingannya saja. Seperti gambar di bawah ini.

Pengaturan widget Entri Populer

Kedua, tambahkan CSS di bawah ini dan letakkan di atas ]]></b:skin> atau </style>

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:10px 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0!important;padding:10px 20px 10px 10px!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#ccc!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}
.PopularPosts ul li:nth-child(1){background-color:#555;}
.PopularPosts ul li:nth-child(2){background-color:#697374;}
.PopularPosts ul li:nth-child(3){background-color:#555;}
.PopularPosts ul li:nth-child(4){background-color:#697374;}
.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#697374;}
.PopularPosts ul li:nth-child(7){background-color:#555;}
.PopularPosts ul li:nth-child(8){background-color:#697374;}
.PopularPosts ul li:nth-child(9){background-color:#555;}
.PopularPosts ul li:nth-child(10){background-color:#697374;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-snippet{font-size:11px}

Untuk ukuran font, anda bisa sesuaikan sendiri sesuai keinginan dan sesuai template anda. Jadi, anda bisa memodifikasinya juga nanti. Tapi, jika anda ingin ukuran font-nya sesuai demo di atas, pastikan juga bahwa font sidebar anda adalah PT Sans Narrow dengan ukuran 16px dengan style Bold. Seperti contoh cuplikan kode pada sidebar berikut ini.

.sidebar a:link,.sidebar a:visited{font:bold 16px &quot;PT Sans Narrow&quot;text-decoration:none}

Kode di atas adalah cuplikan kode CSS sidebar blog saya yang saya buat demo tersebut. Jika ingin menerapkannya, letakkan kode di atas pada kumpulan CSS sidebar-nya di Edit HTML. Tapi, sesuaikan juga class sidebarnya. Karena, bisa saja class-nya berbeda setiap template.

Dan apabila anda tidak suka dengan warna background-nya, anda bisa mengubahnya sendiri yang pas dengan template anda.

Inspirasi : kang-mousir.blogspot.com
Tag : Blogging

Artikel Terkait:

7 Komentar untuk "Modifikasi Widget Popular Posts Keren dan Elegant"

terimakasih banyak sob, sangat membantu sekali artikelnya,

http://obattraditional.com/

gan mau nanya , itu cara membuat komentar seperti itu gimana?

Terimakasih~
simple bisa di pelajari juga,
kolom komentarnya bagus,tutor dong

+++
Merasa kurang hoki bermain judi di situs lain ? atau Ingin mendapatkan income tanpa bekerja ?
KAMI HADIR UNTUK ANDA , MARI BERGABUNG BERSAMA KAMI DI RUBYQQ
PRESENTASI KEMENANGAN 80% ( MENANG ATAU KALAH TETAP DAPAT BONUS )
100 % PLAYER vs PLAYER !!
Hanya dengan 1 USER ID anda bisa main 7 GAMES :
* Bandar Poker | Poker Online | Capsa Susun | DominoQQ | BandarQ | AduQ | SAKONG ONLINE |
* Pendaftaran FREE ==> https://goo.gl/AQYhSc
* Minimal Deposit & Withdraw HANYA Rp.15.000,-
* Bonus Turn Over 0,5% SETIAP HARI DIBAGIKAN
* Bonus Referral 20% Seumur Hidup
* MEGA JACKPOT RATUSAN JUTA RUPIAH
* Customer Service siap melayani anda 24 jam

Untuk informasi lebih lengkap silahkan Hubungi Customer Service kami
BBM : 2B8938F7
FACEBOOK : rubyqq
SKYPE : RUBY QQ
LIVECHAT https://goo.gl/AQYhSc

Selamat malam bossku semua...
Kamu Sering Kalah Main Judi?
Sudah Tidak Jaman Lagi Kalah Main Judi
Kami Hadir Dengan Inovasi Terbaru & Tercangih, Dengan Jackpot Yang Super Pasti & Gampang Untuk Menang Terus Di Setiap Hari .
Transaksi Cepat, Aman & Terpercaya.
Tersedia 7 Games Dalam 1 User ID :
New Game ------>> GAME SAKONG
Poker, Domino, BandarQ, Capsa, Sakong
Minimal Deposit Rp.15.000,-
Minimal Withdraw Rp.15.000,-

Komentar ini telah dihapus oleh pengarang. - Hapus

Ayo segera bergabung dengan Agen Judi Poker Online Terbaik dan Terpercaya di Indonesia KacangMasPoker | www.kacangmaspoker.net | . Dapatkan Jackpot hingga Jutaan rupiah setiap harinya !!

• Bonus New Member & Next Deposit s/d Rp. 1.000.000,-
• Bonus Jackpot s/d Rp. 200.000,-
• Bonus TurnOver 0,5%
• Bonus Referral 20%

# LINE : pokerkcm
# BBM : pokerkcm
# WHATSAPP : +6287819742741
# Twitter : kcm__poker
# IG : kcm_p0ker

• 7 Games dalam 1 ID
| Texas Poker | Capsa Susun | Ceme | Domino QQ | Bandar Ceme | Super 10 | Omaha |

• BCA - BNI - BRI - CIMB - Danamon - Mandiri.
• Menerima Deposit via Go-Pay, Ovo & Pulsa Telkomsel / XL

Link Alternatif:
• www.kacangmaspoker.xyz
• www.kacangmaspoker.club
• www.kacangmaspoker.live

Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.

Emoticon : :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak: