Home » Tutorial » Wordpress » Kode HTML dan CSS Untuk Unordered List Menggunakan Simbol Lingkaran, Persegi atau Disc

Kode HTML dan CSS Untuk Unordered List Menggunakan Simbol Lingkaran, Persegi atau Disc


Pernahkah anda membuat daftar list menggunakan simbol berupa lingkaran atau persegi atau seperti bentuk disc dalam tulisan anda di wordpress atau blogspot. Nah jika anda ingin melakukannya cukup mudah untuk membuatnya menggunakan kode HTML atau menerapkan CSS.

Kode HTML dan CSS Untuk Unordered List Menggunakan Simbol Lingkaran, Persegi atau Disc

Untuk memperjelas yang saya maksud anda bisa lihat contoh daftar list dibawah ini

  • Ini contoh daftar list atau unordered list dengan lingkaran
  • Ini pun contoh daftar list atau unordered list dengan lingkaran
  • Ini contoh daftar list atau unordered list dengan persegi
  • Ini pun contoh daftar list atau unordered list dengan persegi
  • Ini contoh daftar list atau unordered list dengan disk atau bulatan penuh
  • Ini pun contoh daftar list atau unordered list dengan disk atau bulatan penuh
  • Ini contoh daftar list atau unordered list tanpa bullet
  • Ini pun contoh daftar list atau unordered list tanpa bullet

Penulisan Kode HTML Secara Umum Untuk Berbagai Tipe Unordered List

  1. Untuk unordered list dengan tipe lingkaran
    <ul style="list-style-type:circle;">
    <li>Tulis Tulisan Anda Disini</li>
    <li>Tulis Tulisan Anda Disini</li>
    </ul>
  2. Untuk unordered list dengan tipe persegi
    <ul style="list-style-type:square;">
    <li>Tulis Tulisan Anda Disini</li>
    <li>Tulis Tulisan Anda Disini</li>
    </ul>
  3. Untuk unordered list dengan tipe disk atau bulatan penuh
    <ul style="list-style-type:disc;">
    <li>Tulis Tulisan Anda Disini</li>
    <li>Tulis Tulisan Anda Disini</li>
    </ul>
  4. Untuk unordered list dengan tanpa bullet
    <ul style="list-style-type:none;">
    <li>Tulis Tulisan Anda Disini</li>
    <li>Tulis Tulisan Anda Disini</li>
    </ul>

Jika anda ingin menerapkan CSS maka tulis kode berikut pada bagian awal tulisan anda

<style type="text/css">
ul.lingkaran {list-style-type:circle;}
ul.persegi {list-style-type:square;}
ul.disk {list-style-type:disc;}
ul.kosong {list-style-type:none;}
</style>

Dan saat sampai pada tulisan yang ingin anda bikin unordered list maka cara penulisan kode HTML-nya yaitu

<ul class="lingkaran">
<li> Tulis Tulisan Anda Disini </li>
<li>Tulis Tulisan Anda Disini</li>
</ul>

Cukup mudah bukan ? Pada value “lingkaran” dibagian class bisa anda ganti dengan persegi atau disk sesuai dengan tipe unordered list yang anda inginkan.

Cara Membuat Daftar List Menggunakan Gambar Animasi Di Blogspot atau WordPress dengan CSS

Jika anda sering menulis artikel di blogspot atau menggunakan CMS wordpress, terkadang dalam artikel tersebut ada beberapa poin penting yang ingin disampaikan dan tentunya kadang kita membuat unordered list (daftar list dengan menggunakan simbol) ataupun membuat ordered list (daftar list dengan mengurutkan list menggunakan angka). Lalu bagaimana caranya jika kita ingin membuat unordered list mengunakan gambar animasi tertentu ?

Perhatikan contoh unordered list seperti yang ditampilkan dibawah ini :

  • Ini contoh unordered list dengan gambar animasi 1
  • Ini juga contoh unordered list dengan gambar animasi 1
  • Ini pun juga contoh unordered list dengan gambar animasi 1
  • Ini contoh unordered list dengan gambar animasi 2
  • Ini juga contoh unordered list dengan gambar animasi 2
  • Ini pun juga contoh unordered list dengan gambar animasi 2

Bagaimana menurut anda, tentunya lebih menarik bukan ?

Nah jika anda menginginkannya maka anda harus menggunakan CSS untuk melakukannya, yaitu dengan cara anda tetap menulis artikel dan membuat unordered list seperti biasanya. Nah jika udah selesai maka edit kode HTMLnya secara manual dan sisipkan kode CSS dibawah ini pada bagian awal atau pertama dalam penulisan kode HTML-nya

<style type="text/css">
ul.panah1 {list-style-image:url(http://icons.primail.ch/eyecatch/arrowrb.gif);}
ul.panah2 {list-style-image:url(http://icons.primail.ch/eyecatch/arrow003.gif);}
</style>

Nah jika udah selesai maka anda edit penulisan kode htmlnya pada bagian tag <ul> untuk penulisan kode unordered list

sehingga menjadi

<ul class="panah1">
<li>Ini contoh unordered list dengan gambar animasi 1</li>
<li>Ini juga contoh unordered list dengan gambar animasi 1</li>
<li>Ini pun juga contoh unordered list dengan gambar animasi 1</li>
</ul>

<ul class="panah2">
<li>Ini contoh unordered list dengan gambar animasi 2</li>
<li>Ini juga contoh unordered list dengan gambar animasi 2</li>
<li>Ini pun juga contoh unordered list dengan gambar animasi 2</li>
</ul>

Keterangan Tambahan Membuat Unorder List HTML

  • Jika anda menggunakan CSS maka kata lingkaran, persegi atau disk bisa diganti dengan kata lainnya yang anda anggap mudah dalam penulisan di CSS , yang penting harus sama antara di CSS dan penulisan kode HTML pada value di bagian class
  • ul.panah1 atau ul.panah2 dimana kata panah1 atau panah2 bisa diganti dengan kata apa saja misalnya animasi1 atau animasi2 atau kata lainnya atau bisa juga a, b, c atau d.
  • http://icons.primail.ch/eyecatch/arrowrb.gif pada ul.panah1 merupakan alamat url gambar animasi yang akan kita gunakan sebagai unordered list untuk panah1 atau gambar animasi yang pertama, dan alamat url ini bisa anda ganti dengan url lainnya jika anda mempunyai gambar animasi yang lain.
  • http://icons.primail.ch/eyecatch/arrow003.gif pada ul.panah2 merupakan alamat url gambar animasi yang akan kita gunakan sebagai unordered list untuk panah2 atau gambar animasi yang kedua, dan alamat url ini bisa anda ganti dengan url lainnya jika anda mempunyai gambar animasi yang lain.
  • <ul class="panah1"> digunakan untuk penulisan kode html untuk unordered list dengan menggunakan gambar animasi pertama dengan alamat url merujuk pada ul.panah1 di CSS yang telah dibuat sebelumnya begitu pula <ul class="panah2"> untuk unordered list dengan menggunakan gambar animasi pertama dengan alamat url merujuk pada ul.panah2 di CSS

Ini Yang Anda Cari :

  • html simbol bulat putih
  • rumus html untuk bulatan putih
  • rumus ordered list beserta contoh nya
  • membuat list dengan simbol simbol dengan tipe tipe
  • rumus html untuk lingkaran putih

About

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>