Beranda » CSS » Bullet otomatis dan manual dengan css di post

Bullet otomatis dan manual dengan css di post

Bullet otomatis dan manual dengan css di post

Bullet default dari blogger memang tidak terlihat begitu jelek di posting namun para blogger memodifikasinya agar lebih terlihat unik dan berbeda dari yang lainnya dengan menambahkan icon yang bervatif. Selain menambah kesan postingan unik bullet hasil modifikasi ini juga menambah tampilan posting lebih cantik dan tidak terlihat biasa saja sehingga pengunjung semakin lebih menarik untuk membaca, lihat di bawah ini:

Modifikasi bullet sederhana dari saya
Mau bikin di blog anda ikuti triknya
Membuat yang otomatis atau manual

Efek ini sangat mudah diterapkan. Kita hanya perlu menerapkan kode sederhana untuk template Anda. Mari kita mulai!

Pilih dua cara di bawah ini yang anda inginkan, bullet otomatis atau secara manual:

01Bullet secara manual

1. Login ke akun Blogger
2. Buat posting baru
3. Pilih tab editor HTML posting di sebelah tab compose dan paste kode dibawah ini ke dalamnya

<style>
/* bullet blogger DB */
.post ul {list-style:none;}
.post ul li {
    line-height: 1.4em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBVfVt3mx80nfEKckd-37jmcYT4jP6Hl721LDtpYW8xclo34sfd2lMd0-bIRtFDeSvglsXALLK85UiCCMx2H7YOxoc_LobscXbXPACFPg5JWZlj2rUVTolZdYaaMueweHkNjtYRb-abNI/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/AVvXsEjFFIKuHXbZapM5nKBIr8BX9G1TvpYUwxCerYu19X43mftNkd2-OC-RpcYR9iQsF__ulIJnydDzEKtXzyocClD8q5ixb0VKUoYMWxNmdrKydLG1HascyBrchvodlxy-CnfKajTHUF-0tuE/s400/261.gif) no-repeat scroll 0px 4px;
}
</style>

<ul>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
</ul>

4. Lalu klik publikasikan dan lihat hasilnya.

ingat: jangan lupa mengganti Tulis sesuatu di sini sesuai keinginan anda dengan tulisan yang anda inginkan.

02Bullet secara otomatis

1. Login ke akun Blogger Anda
2. Pilih Template > Edit HTML
3. Cari kode tag ]]></b:skin> dan paste kode di bawah ini diatasnya

/* bullet blogger DB */
.post ul li {
    line-height: 1.4em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBVfVt3mx80nfEKckd-37jmcYT4jP6Hl721LDtpYW8xclo34sfd2lMd0-bIRtFDeSvglsXALLK85UiCCMx2H7YOxoc_LobscXbXPACFPg5JWZlj2rUVTolZdYaaMueweHkNjtYRb-abNI/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/AVvXsEjFFIKuHXbZapM5nKBIr8BX9G1TvpYUwxCerYu19X43mftNkd2-OC-RpcYR9iQsF__ulIJnydDzEKtXzyocClD8q5ixb0VKUoYMWxNmdrKydLG1HascyBrchvodlxy-CnfKajTHUF-0tuE/s400/261.gif) no-repeat scroll 0px 4px;
}

4. Lalu simpan perubahan.

Langkah berikutnya untuk menambahkan ke posting

Buka blogger anda dan buat posting/entri baru
Tulis tulisan yang anda inginkan lalu blok dan tekan tombol bullet di bar editor posting, lihat gambar di bawah ini:

Dan publikasikan postingan anda.

Catatan: Bullet yang saya gunakan untuk contoh berbeda dengan hasil yang akan anda dapat nanti, jika anda kurang suka dengan bullet ini anda bisa mengganti gambar bullet sesuai dengan ke inginan dengan mengganti link yang saya beri warna orang dan merah. warna orange adalah gambar dalam keadaan non mouse hover, dan merah adalah gambar ketika mouse hover atau disorot. Gambar bullet usahakan sepasang yang berbeda, agar ketika disorot akan muncul perbedaan seperti bullet yang saya pakai untuk contoh.

Demikian saja, semoga berhasil dan berguna...

Bullet otomatis dan manual dengan css di post

Belum ada tanggapan untuk "Bullet otomatis dan manual dengan css di post"

Post a Comment