Friday, July 8, 2011

Bagaimana Merubah Bullet List Menjadi Gambar Di Blog Anda

bagaimana cara merubah bullet list menjadi gambarKali ini saya akan kembali memposting kembali dengan tema blogger tutorial . Sebenarnya ada satu lagi List yang dipakai untuk membuat sesuatu daftar kata  yaitu Number list . Number list dengan bullet list hampir sama cara memakainya , namun yang membedakan adalah jika number list menggunakan angka maka bullet list menggunakan sebuah tanda kecil . Dan pada artikel ini kita akan merubah tanda kecil itu menjadi sebuah gambar keren dan cantik dengan menggunakan sebuah kode css . Untuk membuat nya semakin mudah saya sudah menyiapkan beberapa gambar yang bisa anda langsung pakai namun tentu saja anda bisa mengganti gambarnya dengan gambar anda sendiri .Berikut ini saya sudah mempunyai demonya dari bullet list yang sudah diganti dengan gambar.

view demo

Mohon maaf jika demo bullet listnya hanya sedikit saya tampilkan. Nah , jika anda berminat anda bisa mengikuti langkah berikut ini.

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

membuat image bullet list

cara membuat template css 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');
}


  • 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 kuning  diatas. lalu men copy paste ke dalam kotak css .

Green Tic Bullet 1 - kode = https://lh4.googleusercontent.com/-kTgLptok-Vs/Thb82vunj4I/AAAAAAAAAeI/S_tZLAxqTnY/s800/bullet-point-green-tick.png


Maroon Arrow Bullet Point - kode = https://lh5.googleusercontent.com/-En9nSdPDb2E/Thb84jJIMzI/AAAAAAAAAeM/FyyU8ag-5wo/s800/bullet-point-image-1.png



bunga tick bullet - kode = https://lh3.googleusercontent.com/-mN_rRNbq4wI/Thb860rZQeI/AAAAAAAAAeQ/a8dQwUiKocw/s800/bullet-point-image-4.jpg



kode dobel css bullet - kode = https://lh6.googleusercontent.com/-JiYGcdXFgTs/Thb89JKTQ3I/AAAAAAAAAeU/9pUzxyTTCdE/s800/bullet-point-image-5.gif



bullet diamond blue - kode = https://lh5.googleusercontent.com/-38thOND4yvI/Thb9B6TDK4I/AAAAAAAAAec/AcwWoGjTmvw/s800/bullet-point-image-8.png



blue arrow bullet - kode = https://lh5.googleusercontent.com/-5KEC38hjn8w/ThcOn1caNGI/AAAAAAAAAfQ/dXWqTuqfJb8/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 .

7 comments:

  1. gimana carae bos mengatur agar tidak terlalu jauh jarak antar gidged. swun

    ReplyDelete
  2. BOS KOK ADA GARIS BAWAHNYA GMANA CARA ILANGINNYA BILA PAKAI BULLET TIC HIJAU.SWUN

    ReplyDelete
  3. terimakasih boss, dah tak coba di blog wordpress eh jadi juga.. ni jadi ada tanda panah di blogku http://www.perkuliahan.com , sekali lagi maturnuwun. salam sukses
    mizan banjarnegara

    ReplyDelete
  4. thank's ya gan aku mau cba dulu di blog aku


    ARFHA MP3™ | Mp3 World Music Downloads

    ReplyDelete
  5. kalo untuk di ganti menjadi garis bawah gmn saja gmn ya
    di tunggu balasannya :D

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam