Widget Popular Post Warna-warni, Vertikal dan Horizontal

Widget Popular Post

Lagi-lagi modifikasi widget popular post, jangan bosan-bosan nyimak ya?, untuk modifikasi kali ini dijamin bikin mata blink-blink *smile, di blog Rohis Facebook (ER-EF) sudah ada artikel tentang modifikasi widget popular post, yang kemarin belum sempat nyimak silahkan dibuka Widget Popular Post Yang Di Modifikasi. Part. 1 dan Widget Popular Post Yang Di Modifikasi. Part. 2.

Cara membuatnya.Widget Popular Post Warna-warni (Vertikal)

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed
5. Centang Expand Widget Templates

6. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

7. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>

/* 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 & 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%}

Preview Widget Popular Post Warna-warni (Vertikal)

Cara membuatnya.Widget Popular Post Warna-warni (Horizontal)

Ikuti langkah-langkah diatas (1-7) lalu copy kode ini dan masukkan kode dibawah ini diatas taq ]]></b:skin>

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

Preview Widget Popular Post Warna-warni (Horizontal)

Sumber:
http://www.dte.web.id/ (gambar dan script)

+ Create Comment + 8 Responses so far.

Djangkaru Bumi

5 Juni 2013 pukul 20.55

Jika warna warni lebih enak dipandang mata. Oh iya seharusnya tahapan caranya di edit, karena tampilan edit HTML sekarang sudah berubah.

Ivan Mantovani S

7 Juni 2013 pukul 07.50

Wah ijin colek nih sob :)

Rizal Uye

9 Juni 2013 pukul 22.06

keren

Ririe Khayan

12 Juni 2013 pukul 10.55

ijin datang dan mengisi absen, maap komen-nya OOT deh

Unknown

13 Juni 2013 pukul 15.04

horizontal juga cantik, belum sempet buat coba, pakenya yang marquee doang :D .

dedetea66

20 Agustus 2013 pukul 19.02

keren juga nih sob tutornya,,,,ijin untuk mencoba sob,,,terimakasih

Rohis Facebook

20 Agustus 2013 pukul 19.16

@Dede Theasilahkan pak.., smg berhasil. Tuk yg vertikal itu aq sdh coba dan brhasil tp klo yg horisontal blom prnah nyoba.. *smile

Wahyu Eka Prasetiyarini

1 September 2013 pukul 16.45

Wah bagus banget mas widget popular post nya. Saya tertarik dengan yang horizontal. Sangat elegant dan kelihatan responsif. Thanks mas rohis atas sharing nya :)

Posting Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup

Rohis Facebook