Home

Cara membuat Popular post keren

toat sarang
toat sarang

Hai Sobat Blogger


Pada kesempatan kali ini saya ingin membagikan sebuah tutorial cara membuat popular post keren

Langsung saja Lihat DEMO Nya Dulu


sumber: https://webcensar.com
Pertama
Kalian Masuk ke blogger, Kemudian kalian menuju ke seting HTML lalu kalian copas css di bawah ini dan tempelkan di atas code ]]></b:skin> kemudian save template kalian
/*-------------------------*/

.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: 3;
    padding: 10px 10px 10px 72px !important;
    min-height: 68px;
    line-height: 1.5rem;
    height: inherit; 
    position: relative;
}
/* Css warna */

.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;
}
PENTING!
Untuk yang saya tandai warna merah /* Css warna */ Itu adalah bagian code warna "backgroun", kalian bisa menggantinya

Selanjutnya kalian masuk ke tata letak dan buat gatget baru silahkan kalian pilih postingan populer seperti di bawah ini kemudian simpan dan lihat hasilnya


sumber: https://webcensar.com

Mudah banget kan..

Baca juga