Berikut koleksi Pena Indigo untuk membuat popular post dengan tampilan berwarna, pilih yang paling anda suka dan pasang di blog sekarang juga.
1. Popular Post Warna Hitam dengan Nomor
/*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}.PopularPosts ul li:nth-child(1){background-color:#111;}.PopularPosts ul li:nth-child(2){background-color:#222;}.PopularPosts ul li:nth-child(3){background-color:#333;}.PopularPosts ul li:nth-child(4){background-color:#444;}.PopularPosts ul li:nth-child(5){background-color:#555;}.PopularPosts ul li:nth-child(6){background-color:#666;}.PopularPosts ul li:nth-child(7){background-color:#777;}.PopularPosts ul li:nth-child(8){background-color:#888;}.PopularPosts ul li:nth-child(9){background-color:#999;}.PopularPosts ul li:nth-child(10){background-color:#aaa;}.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}
2. Popular Post Warna-Warni Keren Ala Kang Mousir
/*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 Keren Ala Mas Sugeng
/* 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 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 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:normal;color:#000 !important;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;top:0px;right:0px;padding-right:0px !important;}.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}.PopularPosts .item-thumbnail {margin:0 0 0 0;}.PopularPosts .item-snippet {font-size:11px;}.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed}.widget-content ul li:last-child{border-bottom:medium none !important}.widget-content ul li a{color:#333}.widget-content ul li a:hover{color:#C80441}.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}
4. Popular Post Default dengan Nomor Keren
/* Popular Post */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#5A5F63;}.popular-posts ul li a:hover {text-decoration:none;}
0 komentar:
Post a Comment