Hallo blogger ,,, kali ini saya mau membagikan cerita tentang membuat populer post seperti yang ada di template Viomagz milik Mas Sugeng
Yah template vioMagz terlihat simple dan keren dengan variasi-variasi menarik yang ada di template Viomagz tersebut
Nah jika agan blogger mau membuat populer post seperti template viomagz itu mudah
Caranya silahkan sisipkan css berikut di bagian kode skin ===={==========> <b:skin><![CDATA/* kode disini ]]></b:skin>
Kode Css Populer post template Viomagz
/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
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 10px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: #444444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
content: counter(num) !important;
font-size: 30px;
font-weight: 500;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(#49ACE1, #fff);
color: #fff !important;
width: 30px;
padding-top: 10px;
text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
margin-left: 34px;
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
}
Terima kasih telah membaca artikel tentang Cara membuat popUler Post seperti Template Viomagz di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
