Jadi saya kembali dengan lain Popular Posts kustomisasi untuk blog blogger. Yang satu ini cukup istimewa seperti yang terlihat sangat elegan dan memiliki efek transisi dingin ketika melayang.

Kita jarang bisa melihat blog yang tidak menggunakan Popular Posts widget. Widget ini mengurangi tingkat bouncing dan meningkatkan tampilan halaman blog Anda. Membuat mereka menarik dan eye-catching akan membuat lebih banyak orang klik di atasnya sehingga membuat blog Anda lebih dahsyat dan lebih baik.Jadi saya kembali dengan lain Popular Posts kustomisasi untuk blog blogger. Yang satu ini cukup istimewa seperti yang terlihat sangat elegan dan memiliki efek transisi dingin ketika melayang.

Kita jarang bisa melihat blog yang tidak menggunakan Popular Posts widget. Widget ini mengurangi tingkat bouncing dan meningkatkan tampilan halaman blog Anda. Membuat mereka menarik dan eye-catching akan membuat lebih banyak orang klik di atasnya sehingga membuat blog Anda lebih dahsyat dan lebih baik.

Menambahkan widget di Layout

Pertama pergi ke Blog Judul → Tata Letak → Tambah Widget → Popular Posts. Tambahkan widget di lokasi yang diinginkan dan menyimpan template.

Menambahkan CSS di Edit HTML

Sekarang pergi ke Blog Judul → Template → Edit HTML. Tekan Ctrl + F dan cari ]]></b:skin> di kotak pencarian. Setelah mendapatkan kode tambahkan kode yang diberikan di bawah tepat di atas]]]></b:skin> 

.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;
} 

Setelah menambahkan kode menyimpan template. Sekarang Anda dan pengunjung Anda dapat melihat ini mengagumkan populer posting BERNOMOR widget keren di blog blogger Anda.