Membuat Custom Popular Post Blogger

Popular Post adalah sebuah widget yang tersedia untuk menampilkan posting yang sering dilihat oleh pembaca blog. Pada dasarnya popular post atau post terpopuler bisa disetting Untuk menampilkan entri populer dari banyak artikel sesuai keinginan pemilik blog.

Pada kesempatan kali ini kita akan sama-sama memahami dan mengubah tampilan popular post pada blog kita dengan menambahkan CSS di atas ]]></b:skin> atau </style> pada template kita.
Untuk tampilan dan kodenya, bisa dilihat di bawah ini :

1. Popular post Abu-abu

CSS :

/*Custom Popular Post*/ .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;color:black;counter-reset:num} .PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative} .PopularPosts ul li a{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!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} /* Pengaturan Warna */ .PopularPosts ul li:nth-child(1){background-color:#3A3A3B;} .PopularPosts ul li:nth-child(2){background-color:#4B4B4C;} .PopularPosts ul li:nth-child(3){background-color:#5D5D5E;} .PopularPosts ul li:nth-child(4){background-color:#6B6B6C;} .PopularPosts ul li:nth-child(5){background-color:#7E7E7F;} .PopularPosts ul li:nth-child(6){background-color:#8C8C8C;} .PopularPosts ul li:nth-child(7){background-color:#9B9B9B;} .PopularPosts ul li:nth-child(8){background-color:#A7A7A8;} .PopularPosts ul li:nth-child(9){background-color:#B8B8BA;} .PopularPosts ul li:nth-child(10){background-color:#C8C8C9;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

2. Popular post warna-warni kotak

CSS :

/*Custom Popular Post*/ .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;color:black;counter-reset:num} .PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative} .PopularPosts ul li a{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!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} /* Pengaturan Warna */ .PopularPosts ul li:nth-child(1){background-color:#f1c40f;} .PopularPosts ul li:nth-child(2){background-color:#f39c12;} .PopularPosts ul li:nth-child(3){background-color:#2ecc71;} .PopularPosts ul li:nth-child(4){background-color:#27ae60;} .PopularPosts ul li:nth-child(5){background-color:#e67e22;} .PopularPosts ul li:nth-child(6){background-color:#d35400;} .PopularPosts ul li:nth-child(7){background-color:#3498db;} .PopularPosts ul li:nth-child(8){background-color:#2980b9;} .PopularPosts ul li:nth-child(9){background-color:#ea6153;} .PopularPosts ul li:nth-child(10){background-color:#c0392b;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

3. Popular post warna-warni mengecil kebawah

CSS :

/* -- POPULAR POST -- */<br /> .PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;}<br /> .PopularPosts .widget-content ul li{position:relative;padding:10px !important;}<br /> .PopularPosts .widget-content ul li:first-child {background:#815540;width:93%}<br /> .PopularPosts .widget-content ul li:first-child:after{content:"01";}<br /> .PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%}<br /> .PopularPosts .widget-content ul li:first-child + li:after{content:"02";}<br /> .PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%}<br /> .PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%}<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}<br /> .PopularPosts .widget-content ul li:first-child:after,<br /> .PopularPosts .widget-content ul li:first-child + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,<br /> .PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after<br /> {position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold}<br /> .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px}<br /> .PopularPosts .widget-content ul li a{color:white;text-decoration:none}

Jika salah satu CSS di atas sudah di tempatkan di atas ]]></b:skin> atau </style>, Simpan Template blog Anda dan setting widget popular post seperti gambar paling atas. Anda juga bisa mengganti sendiri warna-warna background dari post populer tersebut dengan bantuan Tool Kode Warna Html yang telah saya sediakan. Semoga Bermanfaat.

Bagikan ke

Facebook Google+ Twitter

Search