Author : UnknownTidak ada komentar
Sebelum kita membahas panjang lebar mengenai Cara Mengganti/Mengubah Default Icon Bullet/list di Postingan dan side bar Blog, mungkin ada baiknya kita perhatikan pada blog ini, sebelumnya setiap menampilkan bullet pada side bar maka icon yang ditampilkan adalah gambar seperti ini: " " kemudian saya menggantinya menjadi icon gambar tumbuk batu marawis seperti ini :
Adapun Cara Mengganti/Mengubah Default Icon Bullet/list di side bar / widget Blog yang saya lakukan adalah sebagai berikut:
- Upload gambar Anda yang hendak dijadikan icon pengganti, kemudian ambil alamat url gambar tersebut dan simpanlah pada notepad untuk backup.
- Langkah berikutnya adalah Login ke akun blogger kita
- Pilih menu Template dan jangan lupa backup template terlebih dulu dengan cara klik menu pulihkan/cadangkan kemudian "unduh template" lengkap" dan Simpan template Anda sebagai Backup jika terjadi sesuatu yang tidak diinginkan.
- kemudian pilih "Edit HTML" dan "lanjutkan"
- Centang / klik "Expand Template Widget"
- Carilah kode yang mirip dengan sidebar li, atau .sidebar ul li yang terdapat pada template ABlog Anda, untuk mempermudah pencarian tekan Ctrl F kemudian pada kotak cari di bawah ketik .sidebar ul li, misalnya diperoleh yang mirip kode berikut:
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
.sidebar ul li{padding:6px 0 6px 10px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zy7pYyZD6S5tekIBfFkdoVhRjcsc9fYEFb_jiOjZJQSBTFRmCdDwh800yYxZXG-xK8fjwP4ly0fgquI-zVZv38ADtqHkT9iMhPy3VNknifwi_XwX_RviAX2sqScjtXbEDZ9sVAVvmmZB/s1600/arrow.png) left 12px no-repeat;border-bottom:1px solid #EEE;}
.sidebar .widget{margin: 0 0 15px 0;padding:0px;} - Simpan Template, kemudian lihat hasilnya.
- Menambahkan css untuk membuat Bullet List
- Cara memakai gambar bullet anda sendiri - Ganti tulisan " Url Gambar disini " dengan url gambar anda yang berukuran 12 x 12.
ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('URL-GAMBAR-DISINI');
}
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('URL-GAMBAR-DISINI');
}
- Menggunakan gambar yang telah disiapkan - untuk gambar yang sudah saya persiapkan anda hanya perlu langsung saja memasukkan kode url gambarnya langsung ke dalam tulisan berwarna merah di atas. lalu men copy paste ke dalam kotak css .
- kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx12M36U-pTRy7UejgOiJmcIW7BDKO03rYxGtc_ITmVcfDpyWKAyhXPdgngIlKewtP1cqH6ol25hqSna3VzBNyArcribktzXBUHAh5YjjgGx0ejokBAT7Arxqopm-KBsXoWwMTQXRPVK0/s800/bullet-point-image-1.png
- kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJaLI_JILAPsxRzO2qnF3AWtN4e4byV3f_IwA7CMmhgQhWH2RFiR4IY7R6auwUmfCerACSuKyxMsNvdB27m9xiPUwSJ9TKt6BiUPSVCoC93jBHGsnPDIIadCNToIzR4jvM-RGu2rv28Jk/s800/bullet-point-image-4.jpg
- kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxWs86JgbjWklKbMyfxs6yTgofO0JEG-adMFpnNkf8PFeWVh6pE_Xxu3ss4Optz3ri3A2PYQyiJ-i8cnoHj3Q-qog82JIB-L1zArRMNEgIU5ytndnD7rHIr0lnX_MxC6QjvIAscmXTVk/s800/bullet-point-image-5.gif
- kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kmjIph6mu96hjlT8QP4VvYd_RSkZi8d14_47vzS9fiIeC7HOSqd5D4EX0q2jbOGmR8V4cKiwBvfKV-Tg7EYv49Lk1BViapUEBfj6o408HnOUNqoYnAiy8_RC8ev6Y758uDrlWAWnmX0/s800/bullet-point-image-8.png
- kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoHVF6hzwzukqjcOrOG-J54BsBKAHv6_f18SYZFZE1eJFQ3fqBhuD_3ViB5Cl5FIOh38M6UfbIbSEqoWufKhSUaVG2OZ4EhdOREfUlyWYazeIbCQEXdxkSwNjKGODU9REFrFq4_3aitqU/s800/bullet_list_icon.jpg
Mungkin beberapa gambar bullet yang diatas anda bisa memakainya jika anda menginginkannya , untuk membuat gambar bullet itu muncul maka anda harus menambahkan kode css class="imglist" setelah kode <ul pada kode bullet list pada menu edit html di postingan, berikut ini saya akan memberikan sedikit contoh teksnya:
- <ul class="imglist"><li>Bullet List css</li><li>List Bullet css</li></ul>
Sumber : http://www.jual-rebanamarawis.com/2012/05/cara-mengganti-icon-bulletlist-di-blog.html
http://vianjb.blogspot.com/2011/07/merubah-bullet-list-menjadi-gambar.html
Artikel Terkait
Posted On : Sabtu, 16 Juni 2012Time : 01.13