Saya mau memberikan desain/widget popular post dengan 2 model
Cara membuat popular post ini sangat mudah hanya tinggal mengcopy pastekan kode di bawah ini ke dalam template anda.
Cari kode ]]></b:skin> lalu copy pastekan kode di bawah ini tepat di atas nya :
Untuk demo bisa di lihat di template ini
DEMO
Cari kode ]]></b:skin> lalu copy pastekan kode di bawah ini tepat di atas nya :
Kalau yang ini demo nya bisa lihat di blog ini ,karna saya pakai model popular post yang ke 2
Cara membuat popular post ini sangat mudah hanya tinggal mengcopy pastekan kode di bawah ini ke dalam template anda.
Popular post model 1
Cari kode ]]></b:skin> lalu copy pastekan kode di bawah ini tepat di atas nya :
.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;
}
Untuk demo bisa di lihat di template ini
DEMO
Popular post model 2
Cari kode ]]></b:skin> lalu copy pastekan kode di bawah ini tepat di atas nya :
.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;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:white;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
.PopularPosts ul li:nth-child(1) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(3) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(4) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(5) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(6) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(7) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(8) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(9) {background-color:#222222;margin-right:1%}
.PopularPosts ul li:nth-child(10) {background-color:#222222;margin-right:1%}
Kalau yang ini demo nya bisa lihat di blog ini ,karna saya pakai model popular post yang ke 2