Modifikasi Widget Popular Posts Keren dan Elegant

Oleh Unknown

Rabu, 21 Mei 2014

Bagikan :

Tweet

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.

DEMO

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.

Baca juga : Simple Related Posts Valid HTML5

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.

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 "PT Sans Narrow"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