Popular Posts v2 Widget customization ~ Blogstorial

Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan gaya yang berbeda dari Popular Posts widget untuk blog blogger Anda. Hal ini juga memiliki efek Hover di dalamnya seperti yang sebelumnya. Saat gambar dan potongan tidak didukung di widget ini dan akan membuat widget Anda terlihat jelek sehingga sangat dianjurkan untuk menjaga Thumbnail dan cuplikan off Anda.

Nah ketika datang untuk demo, Anda dapat melihat widget tinggal di blog kita. Widget demo dapat dilihat di sidebar kanan blog kita.

Sekarang ketika datang untuk menambahkan widget ini ke blog Anda, cukup ikuti langkah-langkah di bawah ini

Langkah 1: Menambahkan Popular Posts Widget

Pergi ke Blog Judul → Tata Letak → Tambah Gadget → Popular Posts. Pastikan bahwa Anda memiliki dicentang thumbnail gambar dan kotak potongan.
Setelah menambahkan widget Simpan Template.

Langkah 2: Menambahkan CSS

Pertama pergi ke Blog Judul → Template → Edit HTML. Bentangkan ... ]]> </ b: skin> jika tidak diperluas. Tekan Ctrl + F. Type]]> </ b: skin> di kotak pencarian dan tekan tombol enter [Sesuai editor HTML baru].
Tambahkan kode di bawah ini diberikan tepat di atas]]> </ b: skin>


.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {

    border-left-color: #CCCCCC;
    left: -0.5em;
}
.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"}

Setelah menambahkan kode save template Anda. Anda selesai sekarang. Sekarang Anda dan pengunjung Anda dapat melihat widget ini populer di Post keren di blog Anda.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Blogstorial