04.21
0
Menambahkan Style Pada Widget Popular Posts

Pada kali ini kita coba oprek template di bagian sidebar pada widget "Popular Post", di mana kita hanya memanfaatkan widget yang telah di sediakan oleh blogger dengan menambahkan sedikit style agar tampak lebih keren ditambah sentuhan efek hover.
Langkahnya seperti berikut :





Login dulu ke bloger
Pilih Rancangan - > Edit HTML
Cari kode ]]></b:skin>   (Ctrl+F)
Tambahkan style di bawah ini di atasnya:
 .item-title{
    background:#123456;
    text-align:left;
    border-radius:3px;
    font-weight: bold;
    }
    .item-snippet{
    padding:3px;
    border:3px solid #4F697E;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
    }
    .item-snippet:hover{
    margin:0px;
    padding:3px;
    text-align:center;
    border:3px solid #4F697E;
    -webkit-border-radius:70px;
    -moz-border-radius:70px;
    -o-border-radius:70px;
    -ms-border-radius:70px;
    border-radius:70px;
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    -o-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;
    }

 Save Template
Untuk warna background item-title bisa kita sesuaikan dengan template blog kita

Selamat mencoba, semoga bermanfaat..!

0 komentar:

Posting Komentar