22 January 2015

Cara membuat popular post warna warni rata pinggir

Sebenarnya cara membuat popular post warna warni di blog tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada laman edit html , dan popular posts ini nantinya akan terlihat warna warni rata pinggir , pada sebagian temen temen blogger membagikan artikel popular postsnya kebanyakkan lebar di atas dan mengecil turun kebawah , lihat gambar


Tutorial popular posts yang saya bagikan ini bisa dibilang lain dari yang lain, popular posts ini akan lebih rapi dan manis memanjakan mata jika dilihat karna tampilanya rata pinggir, lihat gambar
Untuk lebih jelasnya silakan ikuti tutorial berikut.

Cara pasang popular post warna warni rata pinggir di sidbar blog

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:
  1. Pertama pastikan anda sudah pasang widget poular post
  2. Kemudian pergi ke editor template [ edit html ]
  3. Pasang kode css ini diatas kode ]]></b:skin> atau </style>
    /*Popular Post Widget Mas Hidayatd*/
    .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 10% .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:normal  13px Fjalla One, Helvetica, Arial, sans-serif;
    color:#086D72 !important;
    text-decoration:none;
    }
    .PopularPosts ul li:before {
    content:counter(num) !important;
    display:block;
    position:absolute;
    background-color:#FFFFFF;
    color:#000000!important;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    top:0px;
    right:0px;
    padding-right:0px !important;
    }
    /* Set color and level */
    .PopularPosts ul li:nth-child(1) {background-color:#20F415;margin-right:0% !important}
    .PopularPosts ul li:nth-child(2) {background-color:#12F89C;margin-right:0% !important}
    .PopularPosts ul li:nth-child(3) {background-color:#10AFF9;margin-right:0% !important}
    .PopularPosts ul li:nth-child(4) {background-color:#0B89FE;margin-right:0% !important}
    .PopularPosts ul li:nth-child(5) {background-color:#FCA22C;margin-right:0% !important}
    .PopularPosts ul li:nth-child(6) {background-color:#F631ED;margin-right:0% !important}
    .PopularPosts ul li:nth-child(7) {background-color:#F962C9;margin-right:0% !important}
    .PopularPosts ul li:nth-child(8) {background-color:#64F7A1;margin-right:0% !important}
    .PopularPosts ul li:nth-child(9) {background-color:#ECD788;margin-right:0% !important}
    .PopularPosts ul li:nth-child(10) {background-color:#B1F60E;margin-right:0% !important}
    .PopularPosts .item-thumbnail {
    margin:0 0 0 0;
    }
    .PopularPosts .item-snippet {
    font-size:12px;
    }
    
  4. Terkahir simpan template dan lihat hasilnya






  5. catatan ;
    jika sobat ingin merubah warna sesui warna yang kalian sukai silahkan ganti kode-kode warna
    dari baris (55) sampai (64) kode warna bisa lihat disini

    oky sekian dulu sampai disini tutorial saya mengenai Cara membuat popular posts warna warni rata pinggir di sidbar blog semoga bermanfaat dan mudah di fahami....


EmoticonEmoticon