Cara Mengganti Tampilan Popular Post Template VioMagz

Advertisement

Cara Mengganti Tampilan Popular Post Template VioMagz - untuk mengganti tampilan Popular Post template VioMagz seperti tampilan popular Post di dalam blog ini silahkan ikuti cara ini.

Cara Merubah Tampilan Popular Post Template VioMagz

1. Langkah pertama hapus dulu nomor pada pada tampilan Popular post bawaan Template VioMagnya

Caranya lihat di sini : Cara Menghilangkan Nomor Popular Posts di Template VioMagz

2. Setelah nomor popular post VioMagznya dihapus, cari kode ini :

/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
margin: 0 0;
padding: 0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 15px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li > a::before {
color: $(body.link.color) !important;
}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {
background: $(label.border.color);
}
.PopularPosts .item-title {
    line-height: 1.6;
margin-right: 8px;
min-height: 40px;
font-weight: bold;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;box-shadow:0 0 5px #666}
}
.PopularPosts .item-snippet {
    line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
opacity: 0.925;
}
.PopularPosts ul li > a {
font-weight: bold;
}

3. Setelah ketemu, ganti dengan kode ini :

/*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:transparent;counter-reset:num}
.PopularPosts ul li{background-color:transparent;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:#transparent;color:#transparent!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}

note : silahkan ganti warnanya sesuai tema yang diinginkan.

4. Simpan

5.  Buka Setting widget popular postnya, hilangkan thumbnail serta cuplikannya.

7. Selesai.