Cara Membuat Widget Popular Post Jadi Lebih Menarik

Ingin membuat tampilan blog Anda lebih menarik? cobain deh tutorial modifikasi widget popular post menjadi warna-warni seperti blog ini yang menggunakan template EvoMagz dari Mas Sugeng.

Sudah siap? Cek berikut ini.

Cara pertama yang Anda lakukan adalah Tambahkan Widget Popular Post di Tata Letak.

kemudian jika sudah menambahkan Widget Popular Postnya silahkan masuk ke Dasbor Blog > Template > Edit HTML.

atau bisa lihat contoh gambar dibawah ini:

Jika sudah tambahkan kode CSSnya diatas kode ]]></b:skin> (Arahkan pointermouse ke kolom Edit HTML kemudian tekan tombol F3) untuk mencari cepat.

/* Custom CSS for Blogger Popular Post Widget */
.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:black;
    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 0 0.4em 0 !important;
    padding:.5em 1.5em .5em .5em !important;
    counter-increment:num;
    position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
    font-weight:bold;
    color:#000 !important;
    text-decoration:none;
}

.PopularPosts ul li:before {
    content:counter(num) !important;
    font-family:arial, sans-serif !important;
    font-size:12px;
    font-weight:bold !important;
    display:block;
    position:absolute;
    top:-3px;
    right:-3px;
    border-radius:12px;
    background-color:#333;
    color:#fff !important;
    width:24px;
    height:24px;
    line-height:24px;
    text-align:center;
    padding-right:0px !important;
    box-shadow: -1px 1px 0px #fff;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:$(popular.post.color1);
}
.PopularPosts ul li:nth-child(2) {background-color:$(popular.post.color2);
}
.PopularPosts ul li:nth-child(3) {background-color:$(popular.post.color3);
}
.PopularPosts ul li:nth-child(4) {background-color:$(popular.post.color4);
}
.PopularPosts ul li:nth-child(5) {background-color:$(popular.post.color5);
}
.PopularPosts ul li:nth-child(6) {background-color:$(popular.post.color6);
}
.PopularPosts ul li:nth-child(7) {background-color:$(popular.post.color7);
}
.PopularPosts ul li:nth-child(8) {background-color:$(popular.post.color8);
}
.PopularPosts ul li:nth-child(9) {background-color:$(popular.post.color9);
}
.PopularPosts ul li:nth-child(10) {background-color:$(popular.post.color10);
}

.PopularPosts .item-thumbnail {
    margin:0 0 0 0;
}
.PopularPosts .item-snippet {
    font-size:11px;
}

Nah bagaimana caranya gampang bangetkan? jika ada yang perlu ditanyakan isi di kotak komentar ya.

Tweet

Subscribe to receive free email updates: