Modifikasi Widget Posting Populer Menjadi Berwarna-Warni
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.
32 Comments:
wih keren \o/
content:counter(num); itu yang membuat penomoran otomatis ya mas...?
By Dixy, at Tuesday, February 12, 2013 at 6:05:00 PM GMT+7
kuncinya pada yg nth-child(n) kan...
By abang ichal, at Tuesday, February 12, 2013 at 6:11:00 PM GMT+7
Nice tutorial! Asyik bener tuh kalau 'block' nya dibikin oval.. :yaya:
By Unknown, at Wednesday, February 13, 2013 at 5:04:00 AM GMT+7
.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
By Taufik Nurrohman, at Tuesday, February 19, 2013 at 10:55:00 AM GMT+7
Thanks for Share, Ilmu yang bermanfaat (Insha Allah!)
By AdminBe, at Wednesday, March 20, 2013 at 1:06:00 AM GMT+7
thank gan.....
By Unknown, at Wednesday, March 20, 2013 at 1:38:00 PM GMT+7
Creative ! Makasi mas Taufik ! :-bd
By Ijal Fauzi, at Monday, April 1, 2013 at 9:20:00 PM GMT+7
Wow keren, mksh mz..
By Unknown, at Sunday, April 14, 2013 at 10:52:00 AM GMT+7
Mantap mas taufik, izin ambil CSS-nya sebagai basis modifikasi tampilan selanjutnya :)
By Unknown, at Sunday, May 5, 2013 at 10:57:00 PM GMT+7
mas., klo saya pengen menerapkan nomor2nya pada homepage saya, gmn caranya?, pernah aq nyoba tapi gk jadi2... :(
By Lentera Langit, at Saturday, June 1, 2013 at 5:37:00 PM GMT+7
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style> ... kode CSS ... </style>
</b:if>
By Taufik Nurrohman, at Saturday, June 1, 2013 at 9:15:00 PM GMT+7
aha.. :D menggelitik sekali, warna-warni.. sip deh, saya pasang dengan 1% semua, biar adil.. \o/
By Andi AF Studio, at Saturday, June 22, 2013 at 10:24:00 AM GMT+7
wah ini keren \o/
By Update Campuran, at Sunday, July 28, 2013 at 3:31:00 PM GMT+7
mas kalo saya mau ganti nomor background kan bulat diganti persegi gimana ya
By Goro, at Friday, September 27, 2013 at 9:25:00 AM GMT+7
Hapus baris ini:
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
By Taufik Nurrohman, at Friday, September 27, 2013 at 9:58:00 AM GMT+7
mas Taufik, gmn tuh supaya saat diklik link judul pd popular post bs open link new tab?, sama kayak saat diklik gambar
By Rohis Facebook, at Sunday, November 24, 2013 at 9:22:00 PM GMT+7
Di dalam XML widget posting populer:
<a expr:href='data:post.href' target='_blank'>
By Taufik Nurrohman, at Monday, November 25, 2013 at 1:50:00 PM GMT+7
sdh dr sononya hny 10 judul yg tampil.., klo sy pengen nambah lebih dr 10 judul bs gk mas?
By Rohis Facebook, at Saturday, November 30, 2013 at 10:00:00 PM GMT+7
Sepertinya tidak bisa.
By Taufik Nurrohman, at Sunday, December 1, 2013 at 7:04:00 PM GMT+7
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
By choluoxy, at Monday, January 6, 2014 at 11:26:00 AM GMT+7
⇒ /2012/01/penolakan-blogger-terhadap-javascript.html
By Taufik Nurrohman, at Saturday, February 8, 2014 at 11:13:00 AM GMT+7
Assalamu'alaikum mas taufik, apakah bisa pada widget populer post menambahkan tanggal publikasi di setiap posting. saya coba menggunakan <data:post.timestamp/> tidak bisa.
By you, at Sunday, July 6, 2014 at 6:05:00 PM GMT+7
Waalaikumsalam. Sepertinya tidak bisa.
By Taufik Nurrohman, at Monday, August 4, 2014 at 7:03:00 AM GMT+7
keren mas, ijin praktek ya mas, kayaknya menarik ini. terima kasih salam yuli
By masyulionodotcom, at Saturday, August 23, 2014 at 9:59:00 PM GMT+7
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
By everybodygoesblog, at Monday, October 12, 2015 at 12:02:00 AM GMT+7
Kalau markup HTML-nya masih sama harusnya bisa jadi warna-warni. Atau mungkin kamu pakai peramban yang tidak pendukung selektor CSS :nth-child(N)
By Taufik Nurrohman, at Monday, October 12, 2015 at 12:55:00 PM GMT+7
Thanks gan berhasil :D :D
By Ardi Handayat, at Tuesday, October 27, 2015 at 3:06:00 PM GMT+7
Maaf Gan, Gambarnya kok gk muncul. :D
By Erdin Maulana, at Monday, December 21, 2015 at 9:13:00 AM GMT+7
Salam mas TaufikNurrohman.
Saya sharing artikel ini di blog saya ya mas..
terimakasih sebelumnya..
Salam Sukses selalu.
By Tech Fortune, at Wednesday, April 13, 2016 at 10:04:00 AM GMT+7
Yop. Semoga bermanfaat.
By Taufik Nurrohman, at Saturday, April 23, 2016 at 8:52:00 PM GMT+7
Tempat kursus para blogger disini :D, thanks kang rohman
By Harmansyah, at Sunday, May 21, 2017 at 8:18:00 AM GMT+7
Bang Taufik, kalau semisal widget itu dibuat jadi "Unpopular Post". Apa yang harus dirubah?
By nyaasar, at Saturday, February 1, 2020 at 11:39:00 PM GMT+7
Post a Comment
<< Home