Tuesday, February 12, 2013

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.

Labels: , , , ,

35 Comments:

At Tuesday, February 12, 2013 at 6:05:00 PM GMT+7, Blogger Dixy said...

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

 
At Tuesday, February 12, 2013 at 6:11:00 PM GMT+7, Blogger abang ichal said...

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

 
At Wednesday, February 13, 2013 at 5:04:00 AM GMT+7, Blogger Unknown said...

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

 
At Tuesday, February 19, 2013 at 6:12:00 AM GMT+7, Blogger Unknown said...

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

 
At Tuesday, February 19, 2013 at 10:55:00 AM GMT+7, Blogger Taufik Nurrohman said...

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


http://2.bp.blogspot.com/-CllAP1S7fgI/USL3gpmbdfI/AAAAAAAAHD8/sTZkuabm2tk/s1600/popular-post-widget.png

 
At Wednesday, February 20, 2013 at 10:56:00 PM GMT+7, Blogger Unknown said...

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

 
At Wednesday, March 20, 2013 at 1:06:00 AM GMT+7, Blogger AdminBe said...

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

 
At Wednesday, March 20, 2013 at 1:38:00 PM GMT+7, Blogger Unknown said...

thank gan.....

 
At Monday, April 1, 2013 at 9:20:00 PM GMT+7, Blogger Ijal Fauzi said...

Creative ! Makasi mas Taufik ! :-bd

 
At Sunday, April 14, 2013 at 10:52:00 AM GMT+7, Blogger Unknown said...

Wow keren, mksh mz..

 
At Sunday, May 5, 2013 at 10:57:00 PM GMT+7, Blogger Unknown said...

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

 
At Saturday, June 1, 2013 at 5:37:00 PM GMT+7, Blogger Lentera Langit said...

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

 
At Saturday, June 1, 2013 at 9:15:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Saturday, June 22, 2013 at 10:24:00 AM GMT+7, Blogger Andi AF Studio said...

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

 
At Sunday, July 28, 2013 at 3:31:00 PM GMT+7, Blogger Update Campuran said...

wah ini keren \o/

 
At Friday, September 27, 2013 at 9:25:00 AM GMT+7, Blogger Goro said...

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

 
At Friday, September 27, 2013 at 9:58:00 AM GMT+7, Blogger Taufik Nurrohman said...

Hapus baris ini:

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

 
At Sunday, November 24, 2013 at 9:22:00 PM GMT+7, Blogger Rohis Facebook said...

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

 
At Monday, November 25, 2013 at 1:50:00 PM GMT+7, Blogger Taufik Nurrohman said...

Di dalam XML widget posting populer:

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

 
At Saturday, November 30, 2013 at 10:00:00 PM GMT+7, Blogger Rohis Facebook said...

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

 
At Sunday, December 1, 2013 at 7:04:00 PM GMT+7, Blogger Taufik Nurrohman said...

Sepertinya tidak bisa.

 
At Monday, January 6, 2014 at 11:26:00 AM GMT+7, Blogger choluoxy said...

mas punya saya kok gak bisa ya? ada tulisan spt ini
Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 551, kolom 15: The entity name must immediately follow the '&' in the entity reference.
itu apanya mas ya?? thankz

 
At Saturday, February 8, 2014 at 11:13:00 AM GMT+7, Blogger Taufik Nurrohman said...

/2012/01/penolakan-blogger-terhadap-javascript.html

 
At Sunday, July 6, 2014 at 6:05:00 PM GMT+7, Blogger you said...

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

 
At Monday, August 4, 2014 at 7:03:00 AM GMT+7, Blogger Taufik Nurrohman said...

Waalaikumsalam. Sepertinya tidak bisa.

 
At Saturday, August 23, 2014 at 9:59:00 PM GMT+7, Blogger masyulionodotcom said...

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

 
At Monday, October 12, 2015 at 12:02:00 AM GMT+7, Blogger everybodygoesblog said...

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

 
At Monday, October 12, 2015 at 12:55:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Tuesday, October 27, 2015 at 3:06:00 PM GMT+7, Blogger Ardi Handayat said...

Thanks gan berhasil :D :D

 
At Monday, December 21, 2015 at 9:13:00 AM GMT+7, Blogger Erdin Maulana said...

Maaf Gan, Gambarnya kok gk muncul. :D

 
At Wednesday, April 13, 2016 at 10:04:00 AM GMT+7, Blogger Tech Fortune said...

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

 
At Saturday, April 23, 2016 at 8:52:00 PM GMT+7, Blogger Taufik Nurrohman said...

Yop. Semoga bermanfaat.

 
At Sunday, May 21, 2017 at 8:18:00 AM GMT+7, Blogger Harmansyah said...

Tempat kursus para blogger disini :D, thanks kang rohman

 
At Saturday, February 1, 2020 at 11:39:00 PM GMT+7, Blogger nyaasar said...

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

 
At Friday, February 7, 2020 at 7:46:00 PM GMT+7, Blogger Unknown said...

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.

 

Post a Comment

<< Home