widget popular post keren, Cara Membuat Widget Popular Post Multi Color, Popular Post Berwarna warni, cara membuat popular post warna warni, Membuat Popular Post Keren dan Berwarna
Cara Membuat Widget Popular Posts Multi Color - Kali ini kita akan belajar bagaimana cara menghias Pupular Post agar lebih menarik, popular post berwarna warni yang akan kita pelajari kali ini degan menggunakan CSS3 :nth-child() Selector.
Langsung pada tutorial, untuk Demo silahkan lihat pada bagian akhir artikel ini, silahkan Pelajari dan Edit Sesuka Hati
Contoh CSS Popular Posts Multi Color
Secara default widget Populer Post Blogger mempunyai nama class
.PopularPosts{...}. Contoh css dibawah ini hanya untuk bagian background-color nya saja, silahkan diedit lagi agar sesuai selera.
.PopularPosts ul li:nth-child(1) {
background-color: #bfe857;
}
.PopularPosts ul li:nth-child(2) {
background-color: #40ff00;
}
.PopularPosts ul li:nth-child(3) {
background-color: #fdcb01;
}
.PopularPosts ul li:nth-child(4) {
background-color: #dedb00;
}
.PopularPosts ul li:nth-child(5) {
background-color: #9fd4e8;
}
.PopularPosts ul li:nth-child(6) {
background-color: #01ace2;
}
.PopularPosts ul li:nth-child(7) {
background-color: #bf00ff;
}
.PopularPosts ul li:nth-child(8) {
background-color: #01ace2;
}
.PopularPosts ul li:nth-child(9) {
background-color: #ff0098;
}
.PopularPosts ul li:nth-child(10) {
background-color: #eb3ee0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.PopularPosts li {
background : #52a2bf; /*default background*/
}
.PopularPosts li:nth-child(1) {
background-color: #bfe857; /*1*/
}
.PopularPosts li:nth-child(2) {
background-color: #40ff00; /*2*/
}
.PopularPosts li:nth-child(3) {
background-color: #fdcb01; /*3*/
}
.PopularPosts li:nth-child(4) {
background-color: #dedb00; /*4*/
}
.PopularPosts li:nth-child(5) {
background-color: #9fd4e8; /*5*/
}
.PopularPosts li:nth-child(6) {
background-color: #01ace2; /*6*/
}
.PopularPosts li:nth-child(7) {
background-color: #bf00ff; /*7*/
}
.PopularPosts li:nth-child(8) {
background-color: #01ace2; /*8*/
}
.PopularPosts li:nth-child(9) {
background-color: #ff0098; /*9*/
}
.PopularPosts li:nth-child(10) {
background-color: #eb3ee0; /*10*/
}
</style>
</head>
<body style="padding:25px;">
<p>Klik Tombol <button>CSS</button> untuk melihat css tambahan</p>
<div class="widget PopularPosts" data-version="1" id="PopularPosts1">
<h3>Populer Post</h3>
<div class="widget-content popular-posts">
<ul>
<li><a href="#">Judul artikel 1</a></li>
<li><a href="#">Judul artikel 2</a></li>
<li><a href="#">Judul artikel 3</a></li>
<li><a href="#">Judul artikel 4</a></li>
<li><a href="#">Judul artikel 5</a></li>
<li><a href="#">Judul artikel 6</a></li>
<li><a href="#">Judul artikel 7</a></li>
<li><a href="#">Judul artikel 8</a></li>
<li><a href="#">Judul artikel 9</a></li>
<li><a href="#">Judul artikel 10</a></li>
</ul>
</div>
</div>
</body>
</html>
/*ini hanya pemanis demo*/
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
background-color: #fff;
overflow-x: hidden;
}
div.PopularPosts {
padding: 10px;
border: 1px solid #afafaf;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.PopularPosts h2, .PopularPosts h3 {
margin-top: 0;
margin-bottom: 10px;
}
.PopularPosts ul {
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
}
.PopularPosts li {
border-bottom: 1px dashed white;
}
.PopularPosts a {
padding: 10px;
display: block;
color: #040404;
text-decoration: none;
font-weight: bold;
}
.PopularPosts a:hover {
color: #ffffff;
}
//Javascript