Mecha versi 2.6.4 sudah dirilis!

Modifikasi Widget Posting Populer Menjadi Berwarna-Warni

Widget Posting Populer yang Sudah Dimodifikasi

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Custom CSS for Blogger Popular Post Widget */
.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;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Klik Simpan Template. Begitu saja.

35 Komentar

Dixy

wih keren \o/
content:counter(num); itu yang membuat penomoran otomatis ya mas...?

abang ichal

kuncinya pada yg nth-child(n) kan...

Unknown

Nice tutorial! Asyik bener tuh kalau 'block' nya dibikin oval.. :yaya:

Unknown

kalau dibikin populer post horisontal gmn........??

Taufik Nurrohman

.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 {
width:810px;
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
overflow:hidden;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
padding:6px 6px;
counter-increment:num;
position:relative;
float:left;
width:150px;
height:100px;
-webkit-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
-moz-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
box-shadow:-1px -1px 10px rgba(0,0,0,.7);
}
.PopularPosts ul li .item-snippet {display:none}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:100%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
right:0;
bottom:0;
}
/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27}
.PopularPosts ul li:nth-child(5) {background-color:#149A48}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1}
.PopularPosts ul li:nth-child(7) {background-color:#61469C}
.PopularPosts ul li:nth-child(8) {background-color:#863E86}
.PopularPosts ul li:nth-child(9) {background-color:#863E62}
.PopularPosts ul li:nth-child(10) {background-color:#815540}

Unknown

kalau dengan title + thumb + snippet juga menjadi horisontal gmn...!!!??

AdminBe

Thanks for Share, Ilmu yang bermanfaat (Insha Allah!)

Ijal Fauzi

Creative ! Makasi mas Taufik ! :-bd

Unknown

Wow keren, mksh mz..

Unknown

Mantap mas taufik, izin ambil CSS-nya sebagai basis modifikasi tampilan selanjutnya :)

Lentera Langit

mas., klo saya pengen menerapkan nomor2nya pada homepage saya, gmn caranya?, pernah aq nyoba tapi gk jadi2... :(

Taufik Nurrohman

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style> ... kode CSS ... </style>
</b:if>

Andi AF Studio

aha.. :D menggelitik sekali, warna-warni.. sip deh, saya pasang dengan 1% semua, biar adil.. \o/

Goro

mas kalo saya mau ganti nomor background kan bulat diganti persegi gimana ya

Taufik Nurrohman

Hapus baris ini:

-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;

Unknown

mas Taufik, gmn tuh supaya saat diklik link judul pd popular post bs open link new tab?, sama kayak saat diklik gambar

Taufik Nurrohman

Di dalam XML widget posting populer:

<a expr:href='data:post.href' target='_blank'>

Unknown

sdh dr sononya hny 10 judul yg tampil.., klo sy pengen nambah lebih dr 10 judul bs gk mas?

you

Assalamu'alaikum mas taufik, apakah bisa pada widget populer post menambahkan tanggal publikasi di setiap posting. saya coba menggunakan <data:post.timestamp/> tidak bisa.

masyulionodotcom

keren mas, ijin praktek ya mas, kayaknya menarik ini. terima kasih salam yuli

everybodygoesblog

Mau tanya gan:

1. Diblog saya kok nggak warna-warni ya? Putih polos seperti background blog, salah dimananya?
2. Apa harus pakai thumbnail? Kalau judul saja bagaimana?
3. Ukurannya bisa diperkecil lagi nggak? Soalnya pas urutan nomor kepotong gan di blog saya.

Makasih

Taufik Nurrohman

Kalau markup HTML-nya masih sama harusnya bisa jadi warna-warni. Atau mungkin kamu pakai peramban yang tidak pendukung selektor CSS :nth-child(N)

fortunanetworks.com

Salam mas TaufikNurrohman.
Saya sharing artikel ini di blog saya ya mas..
terimakasih sebelumnya..
Salam Sukses selalu.

Harmansyah

Tempat kursus para blogger disini :D, thanks kang rohman

nyaasar

Bang Taufik, kalau semisal widget itu dibuat jadi "Unpopular Post". Apa yang harus dirubah?

Unknown

Untuk menampilkan selain popular post, biasanya orang-orang nampilin Recent Post, coba cari panduan pemasangannya di Google atau di website ini.

Selain Recent post biasa (berdasarkan tanggal), ada juga recent post yang diurut berdasarkan label.

Komentar telah ditutup.