Rabu 9 Apr 2025

Notification

×
Rabu, 9 Apr 2025

Indeks Berita

 


Tag Terpopuler

cara memanipulasi atau modifikasi popular post

| Desember 03, 2023 WIB

 kodenya seperti berikut pilih satu saja dan pasang di atas css



cara 1

#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}

#PopularPosts1 ul li{padding:7px!important;margin:0;list-style:none;border-bottom:1px solid #fafafc;font-size:11px;line-height:normal}

#PopularPosts1 ul li:first-child{border-top:none}

#PopularPosts1 ul li:last-child{border-bottom:none}

#PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active{font-size:13px;color:#555!important;display:block;font-weight:700;padding:0!important;margin:0!important;line-height:1.4em}

#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}

.PopularPosts h2{padding:5px 0}

.popular-posts ul{padding-left:0;counter-reset:trackit}

.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}

.PopularPosts li:first-child{border-top:1px solid #f0f0f0}

.PopularPosts li:nth-child(odd){background:#f5f5f5}

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}

.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}

#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}

.widget.PopularPosts{padding:1.2em 0!important}


cara 2


#sidebar .PopularPosts h2{padding:0;margin:0 0 10px}

#sidebar .popular-posts ul{padding-left:0;counter-reset:trackit}

#sidebar .popular-posts ul li{border-bottom:1px solid #999;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}

#sidebar .PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 0;font-size:20px;font-weight:bold;color:#ffffff;float:left;margin-right:10px}

#sidebar .PopularPosts li:first-child{border-top:1px solid #000000}

#sidebar .PopularPosts li:nth-child(even){background:#2C87F0}

/*define background color for even number lists*/

#sidebar .PopularPosts li:nth-child(odd){background:#000000}

/* define background for odd number lists */

#sidebar .PopularPosts .item-thumbnail{display:true!important}

,#sidebar .PopularPosts .item-snippet{display:true!important}

/* Hides Thumbnail and Snippet */

#sidebar .PopularPosts a,#sidebar .PopularPosts a:hover{color:#ffffff!important;font-size:.9rem}

#sidebar #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;margin:0}

#sidebar .widget.PopularPosts{padding:1.2em 0!important}



cara 3

#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}

#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}

#PopularPosts1 ul li:first-child  {  border-top:none;  }

#PopularPosts1 ul li:last-child  {  border-bottom:none;  }

#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #2b2b2b !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}

#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}

.PopularPosts h2{padding-right:.4em;padding-left:1em}

.popular-posts ul{padding-left:0;counter-reset:trackit}

.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}

.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 10px;font-size:20px;font-weight:bold;color:#F66;float:left;margin-right:10px}

.PopularPosts li:first-child{border-top:1px solid #f0f0f0}

.PopularPosts li:nth-child(odd){background:#f5f5f5}

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}

/* Hides Thumbnail and Snippet */

.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}

#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}

.widget.PopularPosts{padding:1.2em 0em !important} 



cara  4

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display: block;transition:all .3s ease-in-out}

#PopularPosts1 ul li {padding:8px 0 4px !important;margin:0; list-style: none; border-bottom: 1px solid #fff;font-size:12px;line-height: normal;}

#PopularPosts1 ul li:first-child  {  border-top:none;  }

#PopularPosts1 ul li:last-child  {  border-bottom:none;  }

#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #000000 !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.2em}

#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}

Premium By Raushan Design With Shroff Templates

cara  5

<style type='text/css'>

/* Widget popular Post1 */

.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}

.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}

.popular-posts ul li:nth-child(1){background-color:#f44336;}

.popular-posts ul li:nth-child(2){background-color:#e91e63;}

.popular-posts ul li:nth-child(3){background-color:#9c27b0;}

.popular-posts ul li:nth-child(4){background-color:#673ab7;}

.popular-posts ul li:nth-child(5){background-color:#3f51b5;}

.popular-posts ul li:nth-child(6){background-color:#2196f3;}

.popular-posts ul li:nth-child(7){background-color:#03a9f4;}

.popular-posts ul li:nth-child(8){background-color:#00bcd4;}

.popular-posts ul li:nth-child(9){background-color:#009688;}

.popular-posts ul li:nth-child(10){background-color:#4caf50;}

.popular-posts ul li:hover{background-color:#757575;}

.popular-posts ul li a{color:#FFF;text-decoration:none;}

.popular-posts ul li a:hover{color:#EEE;}

.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

</style>


cara 6

<style type='text/css'>

/*Popular Post 2*/

.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}

.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}

.popular-posts ul li:nth-child(1){background-color:#00bcd4;}

.popular-posts ul li:nth-child(2){background-color:#009688;}

.popular-posts ul li:nth-child(3){background-color:#4caf50;}

.popular-posts ul li:nth-child(4){background-color:#8bc34a;}

.popular-posts ul li:nth-child(5){background-color:#cddc39;}

.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}

.popular-posts ul li:nth-child(7){background-color:#ffc107;}

.popular-posts ul li:nth-child(8){background-color:#ff9800;}

.popular-posts ul li:nth-child(9){background-color:#ff5722;}

.popular-posts ul li:nth-child(10){background-color:#795548;}

.popular-posts ul li:hover{background-color:#757575;}

.popular-posts ul li a{color:#FFF;text-decoration:none;}

.popular-posts ul li a:hover{color:#EEE;}

.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

</style>


cara  7


<style type='text/css'>

/*Popular Post 3*/

.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}

.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}

.popular-posts ul li:hover{background-color:#EEE;}

.popular-posts ul li a{color:#424242;text-decoration:none;}

.popular-posts ul li a:hover{color:#212121;}

.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

</style>


cara 8


<style type='text/css'>

/*Popular Post 4*/

.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}

.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}

.popular-posts ul li:hover{background-color:#262626;}

.popular-posts ul li a{color:#FFF;text-decoration:none;}

.popular-posts ul li a:hover{color:#EEE;}

.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

</style>


×
Jual Template Responsive