Cara Membuat Widget Popular Post Keren dengan CSS

Cara Membuat Widget Popular Post Keren dengan CSS - Pada kesempatan kali ini saya akan memberikan tutorial tentang Widget Popular Post. Biasanya widget ini dipakai untuk mengetahui mana artikel paling banyak yang dibaca oleh pengunjung, banyak sekali variasi widget popular post yang ada, dan kali ini saya akan membagikannya. Baiklah langsung saja kita lihat artikel tentang Widget Popular Post dengan CSS dibawah ini.

widget popular post

Langkah - langkah:

1. Login ke blogger dengan menggunakan akun anda
2. Pilih Tata Letak → Edit HTML
3. Kemudian cari code
4. Letakkan code dibawah ini tepat diatas code tadi

/* WIDGET POPULAR POST By: Lintas-tutorial.blogspot.com */
     .popular-posts ul li a {
        background: none repeat scroll 0 0 #222222;
        color: #FFFFFF;
        display: block;
        margin: 10px 0;
        padding: 25px 15px 30px;
        position: relative;
        text-decoration: none;
        transition: all 0.3s ease-out 0s;
     width: 85%;
    }
    .popular-posts ul li a:before {
        background: none repeat scroll 0 0 #2DB3E9;
        color: #FFFFFF;
        font-weight: 700;
        height: 2em;
        line-height: 2em;
        margin-left: 88%;
        padding: 4px;
        position: absolute;
        text-align: center;
        width: 2em;
        transition: all 0.2s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
    }
    .popular-posts ul li a:hover {
        opacity: 0.8;
    }
    .popular-posts ul li a:hover:before {
        border-left-color: #CCCCCC;
        left: -1px;
         -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
    }
    .popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
        content: "10";
    }
    .popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
        content: "9";
    }
    .popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
        content: "8";
    }
    .popular-posts ul li:first-child + li + li + li + li + li + li a:before {
        content: "7";
    }
    .popular-posts ul li:first-child + li + li + li + li + li a:before {
        content: "6";
    }
    .popular-posts ul li:first-child + li + li + li + li a:before {
        content: "5";
    }
    .popular-posts ul li:first-child + li + li + li a:before {
        content: "4";
    }
    .popular-posts ul li:first-child + li + li a:before {
        content: "3";
    }
    .popular-posts ul li:first-child + li a:before {
        content: "2";
    }
    .popular-posts ul li:first-child a:before {
        content: "1";
    }
    .item-snippet {
        display: none;
    }
    .PopularPosts .item-thumbnail {
        display: none;
    }

5. Terakhir klik Simpan Template, dan lihat hasilnya

Itulah sobat sedikit tutorial tentang Cara Membuat Widget Popular Post dengan CSS di Blog yang dapat saya berikan, terima kasih.

Share This :