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/AVvXsEh2Rer5DdkmQNC97TUsyiIqhOd4RXK7HtC0lXs0DDxgG05rNuO5bAkolXQUQB4P0eirWbVE4CY7BL4E1l7bhAba1VuecLiAIZtY7Kk4GTBsn0-Kc7zbbdLBpayovcLAF-X-2wbEaUk8bFE/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/AVvXsEgbYOF2pEIJ5SzPbXM6Z_QPlcvPvZAgt6vc4nPEDuzJpgFi1p0XVl_wl3zkOm0V9Tx7LRRlnG8Z5EY9QHRO0iyC5jxiMyw4ULehkg9ft7-uPL_27wLZVLQDFxFkHy2cEU2EvDuwf9bJJcQ/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/AVvXsEh2Rer5DdkmQNC97TUsyiIqhOd4RXK7HtC0lXs0DDxgG05rNuO5bAkolXQUQB4P0eirWbVE4CY7BL4E1l7bhAba1VuecLiAIZtY7Kk4GTBsn0-Kc7zbbdLBpayovcLAF-X-2wbEaUk8bFE/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/AVvXsEgbYOF2pEIJ5SzPbXM6Z_QPlcvPvZAgt6vc4nPEDuzJpgFi1p0XVl_wl3zkOm0V9Tx7LRRlnG8Z5EY9QHRO0iyC5jxiMyw4ULehkg9ft7-uPL_27wLZVLQDFxFkHy2cEU2EvDuwf9bJJcQ/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:
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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT