Cara Mengedit Bullet List Dengan Gambar di Blogger

Tweet

D-Copy Blog's | Saya baru-baru berbagi tutorial untuk menyesuaikan tampilan Anda daftar peluru dan daftar nomor   dan hari ini kita akan belajar bagaimana mengubah daftar peluru menggunakan efek gambar Hover. Arahkan kursor di atas daftar peluru di bawah ini untuk melihat efeknya.

Langkah :

1. Bukan akun Blogger Anda.
2. Masuk ke Menu Template > Edit HTML > Proceed > centang Expand Template Widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini diatas pada kode diatas :

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1muPpdiy82A-OS90Yp9kLRw86bmEnj1o01PpZuTinRXxuzalLkvyuvPg7_N0V3OtSwWw-vxAYmwkjH6OhFYwmXdfW8Gw7vgeDg-Ersk0hhRNjZkXdfzwubhaK7Z8t6LK-84XVE_38TsI/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vfJA9aa65gdu8eyKE-PqzUA8jsY13AVf3MmNg3oXcITXklR9fdThNLH3mDCHJM8N0Ptn2tOWvzD15CtTrnSP09j2O6xnA1NI62Qc80bgfIPS-GGVaEgmgGS294mJrGJomFKzacTMVJk/s400/261.gif) no-repeat scroll 0px 4px;
} 

     5.  Simpan template Anda dan Anda selesai!

Kustomisasi

• Ganti kode yang diwarnai dengan URL gambar pilihan Anda.

Anda juga bisa menggunakan pengeditan HTML postingan jika Anda hanya ingin membuat di salah satu postingan tertentu saja, kodenya ada dibawah ini :

<style>
ul {list-style:none;
}
ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1muPpdiy82A-OS90Yp9kLRw86bmEnj1o01PpZuTinRXxuzalLkvyuvPg7_N0V3OtSwWw-vxAYmwkjH6OhFYwmXdfW8Gw7vgeDg-Ersk0hhRNjZkXdfzwubhaK7Z8t6LK-84XVE_38TsI/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vfJA9aa65gdu8eyKE-PqzUA8jsY13AVf3MmNg3oXcITXklR9fdThNLH3mDCHJM8N0Ptn2tOWvzD15CtTrnSP09j2O6xnA1NI62Qc80bgfIPS-GGVaEgmgGS294mJrGJomFKzacTMVJk/s400/261.gif) no-repeat scroll 0px 4px;
}
</style>
<ul>
<li>Ini adalah Sample Text</li>
<li>Ini adalah Sample Text</li>
<li>Ini adalah Sample Text</li>
</ul>