Cara Mengganti/Mengubah Default Icon Bullet/list di Blog

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: 

1. Upload gambar Anda yang hendak dijadikan icon pengganti, kemudian ambil alamat url gambar tersebut dan simpanlah pada notepad untuk backup.
2. Langkah berikutnya adalah Login ke akun blogger kita
3. 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.
4. kemudian pilih "Edit HTML" dan "lanjutkan"
5. Centang / klik  "Expand Template Widget"
6. 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/AVvXsEhpcIRj1LqpXIAsuX6v0Z94TCp2QzIrMlbzAblP5O9e5yGawE-XvGsBKBT83oSGVbBljA_IyxsPN1h95Ux2x4OO0vAyjnMDyazvJisek1c57CBRlYnycqkEQZExDUP0_7IL7ZXtnaIiORN5/s1600/arrow.png) left 12px no-repeat;border-bottom:1px solid #EEE;}
.sidebar .widget{margin: 0 0 15px 0;padding:0px;}
   Gantilah alamat url icon yang lama (seperti pada kode yang berwrna merah)dengan cara pastekan kode alamat url icon yang baru yang telah diupload pada langkah no 1 di atas. 
7. Simpan Template, kemudian lihat hasilnya.

Adapun Cara Mengganti Bullet Icon di side postingan Blog sama persis dengan langkah tersebut diatas, hanya saja bedanya pada langkah ke - 6,  kode yang dicari adalah post li, atau .post ul li yang terdapat pada template Blog Anda.

 

• Menambahkan css untuk membuat Bullet List

1. Copy kode css dibawah ini melalui template designer dengan cara pergi ke akun blog anda lalu pilih design > template designer > advanced > add css.

• 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');
}

• 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 .

• Bullet Tic Hijau

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1ErFqkHk9FJevPN_8vGBJ9V4sSA1xJw2YjYXSfSwVnSXmA7gxi_bxme5QcXhcYgyoUmH8dcpOmWigNa1ccsRhSrSzmf5MRWaem02XZwDMKy-3t0Hs_YuT0nzgE2bIOE1qtLRrPCQKKQ/s800/bullet-point-green-tick.png

• Bullet Panah Merah

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKIIUzOBIylbkNneahP36Cy58IulAkhRqGvQts6UCQK8eZcHKlZ1AIofVKb_dGDGKOx3EDI-BUzRGPIA1_dYLU8Otwu10jG8TCym02AiRhiroJfkYjBAZCaCwr6TOmaq2Kdq6Bzhmrjc/s800/bullet-point-image-1.png

• Bullet Bunga Tick Point

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNS8zToiLCZcvhEEErDQX0jDKnZBW8vIRiqumCq5CADkVw8FerhT-ldNYp0yvgiPm_tsyvxvNAlecpsAKnrRnhwIx4AJ385S6_O6Rlxey0PpuxI9PtZuDJwSAN8pb7PSAbhcQIJYE9ZAw/s800/bullet-point-image-4.jpg

• Bullet Panah oranye dobel

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiox0-gJCFZQNZLuybX4XPyibKMq26Kjd_X_fMchm6awl71D2gVoLI1m-CqoMYvrVqYYfvoGexYuvbQ-5FiTIVEstBS5Ylt5xcp14sT5YeXto-iySElAIqs3bTSyhg9Xea4vbE3bBGM6nI/s800/bullet-point-image-5.gif

• Bullet Diamond biru

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wlh4s6VVekw1-uYWgQoWdvZNTHDUMjeC06OkJ_Cd0JGrqYng8l5qlc2pIXUEchqdEr0OTKVLchgUXbb2zaStEO-trSLo_mI6i4yB02aSxWl2UGuyc1BrzlSdOkltDPnXWbPvCRVf8Co/s800/bullet-point-image-8.png

• Bullet Panah Biru

 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZD_x5zDX5TEopuauwWjLQw7Nel80gotcFN5EHrYs6iq2NwqAqqofyrX8wT4jAsukvn0_-M-aJtBBIq0XNKALBJiOme-sPFXxz5e_mtnffVTEwl3LwQqnUbUZ2UYJKUM07uly00K1T5Q/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>

Baiklah mungkin untuk pembahasan tentang tema blogger tutorial ini cukup sekian , mungkin jika ada kesulitan anda bisa bertanya dengan meninggalkan komentar pertanyaan anda dibawah ini .

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

Share