Berikut adalah langkah-langkahnya:
Mauk ke template lalu cari kode ]]></b:skin> seteleah ketemu taroh kode di bawah ini tepat di atas ]]></b:skin>:
#PopularPosts1 h2{background:#33BE00;color:#999;border-bottom:1px solid #44FF00;border-top:1px solid #444}
#PopularPosts1{font:14px Oswald;padding:0;margin:0;text-shadow:none;}
#PopularPosts1 li{background:#333;position:relative;border-bottom:1px solid #44FF00;border-top:1px solid #444;padding:0}
#PopularPosts1 ul{list-style:none;padding:0;margin:0}
#PopularPosts1 li a{background:#2A9503 5px 11px;display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#aaa;font-size:14px;border-right:4px solid #111;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#PopularPosts1 li a:hover{border-right-color:#444;text-decoration:none;color:#ddd;background:#1D6B00 5px 11px;}
.readmorecontent{text-align:right;width:140px;float:right;margin-top:10px;text-shadow:1px 1px 1px #ccc;}
.readmorecontent a{padding:0;color:#000;text-decoration:none;font-weight:bold;}
.readmorecontent a:hover{color:#009df2;text-decoration:none;}
Dan jika ingin menambahkan scroll seperti pada gambar maka tambahkan kode di bawah ini tepat sebelum kode di atas:
#PopularPosts1 .widget-content{
height:350px;
width:auto;
overflow:auto;
}
Saya berharap tutorial ini bisa bermanfaat bagi blog anda..
Dan jika ada yang kurang jelas silahkan tanyakan pada kotak komentar.
