Kumpulan Popular Post Keren No Thumbnail. Kali ini saya ingin berbagi tentang Kumpulan Popular Post Keren No Thumbnail. Sebenarnya beberapa...
Kumpulan Popular Post Keren No Thumbnail. Kali ini saya ingin berbagi tentang Kumpulan Popular Post Keren No Thumbnail. Sebenarnya beberapa script di bawah ini saya dapatkan dari berbagai sumber di internet. Beberapa di antaranya sudah saya rombak sedikit agar tampilan lebih menarik. Semoga beberapa popular post di bawah ini dapat menjadi referensi bagi anda yang sedang hobby mengotak atik tampilan blog. Untuk cara penerapannya cukup mudah, jika anda tertarik silahkan simak tutorial di bawah ini.
2. Pilih widget popolar post dan atur agar thumnail tidak tampil
2. Selanjutnya Klik Template >> Edit Html
3. Cari kode ]]></b:skin> atau </style> untuk mempermudah pencarian gunakan Ctrl F.
4. Kemudian letakkan salah satu kode di bawah ini tepat di atas kode tersebut
4. Klik simpan
[.PopularPosts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}.popular-posts a{color:#fff}.popular-posts a:hover{color:#fff}.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%}.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-bottom:none}.PopularPosts li:hover{background:#0FB9BB}.PopularPosts li a{text-decoration:none}#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}.PopularPosts ul li{padding:3px 7px;border:none}.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}]
[/*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}]
[.popular-posts ul li a {background: none repeat scroll 0 0 #222222;color: #FFFFFF;display: block;margin: 10px 0;padding: 25px 15px 30px;position: relative;text-decoration: none;transition: all 0.3s ease-out 0s;width: 85%;}.popular-posts ul li a:before {background: none repeat scroll 0 0 #2DB3E9;color: #FFFFFF;font-weight: 700;height: 2em;line-height: 2em;margin-left: 88%;padding: 4px;position: absolute;text-align: center;width: 2em;transition: all 0.2s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;}.popular-posts ul li a:hover {opacity: 0.8;}.popular-posts ul li a:hover:before {border-left-color: #CCCCCC;left: -1px;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {content: "10";}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {content: "9";}.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {content: "8";}.popular-posts ul li:first-child + li + li + li + li + li + li a:before {content: "7";}.popular-posts ul li:first-child + li + li + li + li + li a:before {content: "6";}.popular-posts ul li:first-child + li + li + li + li a:before {content: "5";}.popular-posts ul li:first-child + li + li + li a:before {content: "4";}.popular-posts ul li:first-child + li + li a:before {content: "3";}.popular-posts ul li:first-child + li a:before {content: "2";}.popular-posts ul li:first-child a:before {content: "1";}.item-snippet {display: none;}.PopularPosts .item-thumbnail {display: none;}]
[.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: #359bed;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;}.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;}]
[#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}]
COMMENTS