Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog

Keinginan Saya untuk menambah garis bawah pada penomoran blog ini bermula Ketika Saya berkunjung ke salah satu blog, dan kebetulan di blog tersebut Saya melihat adanya penomoran yang disertai dengan garis bawah yang rapih, biasanya Saya juga sering melakukan penomoran di blog namun secara manual,  tidak menggunakan sistem "Numbered list" yang tersedia di halaman/form entri blog.

Baca juga : Cara Mudah Membuat Blok Warna Dalam Postingan Blog

Saya coba cek template blog yang menggunakan penomoran dengan garis bawah tersebut, dan ternyata dia menggunakan Template dari Kang Mousir, maka Sayapun langsung mendownload salah template Kang Mousir yang menggunakan sistem penomoran dengan garis bawah tersebut, Template yang dipakai Kang Mousir sendiri menggunakan penomoran dengan garis bawah yang halus. 

Setelah di download, Saya coba melihat susunan CSS untuk sistem penomorannya dan langsung Saya adopsi ke Tamplate Evo, karena setahu Saya di Template Evo tidak ada style khusus untuk sistem penomorannya. Menurut Saya jika menggunakan sistem penomoran, tampilan tulisannya lebih rapih dan tertata.

Baca juga : Membuat Variasi Link Ketika Mouse Hover

Bila Anda ingin Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog  maka Anda bisa mengikuti cara - cara dibawah ini, 
1. Pertama masuk ke blog, kemudian lakukan Edit HTML
2. Cari kode <b:skin><![CDATA[/* dan taruh kode ini dibawahnya 
    
    /*Garis Bawah untuk penomoran */
    
    dl,ol,ul{margin-left:20px}
    ol{list-style:decimal outside}
    ul{list-style:square outside}
    li{margin:5px 0}
    ol ol,ul ul{margin-left:16px}
    ol li{border-bottom:1px solid #ccc;padding:0 0 5px}
    dl{overflow:hidden}
    
3. Terakhir Simpan Template, Nanti akan selalu ada garis bawah setiap kali Anda melakukan penomoran menggunakan "Numbered list"

Kurang lebih nanti hasilnya seperti terlihat pada gambar dibawah ini, akan terlihat ada garis dengan warna sedikit ke abu -abuan pada setiap penomoran
numbered list dengan garis bawah  


12 Responses to "Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog"

  1. baru ngerti, tapi garis itu gunannya buat apa? apa biar lebih rapih?

    ReplyDelete
  2. kalao ngatur warna garisnya gimana mas. misal jadi wrana merah dan lain - lain

    ReplyDelete
    Replies
    1. tinggal rubah properti bagian "ol li{border-bottom:1px solid #ccc;padding:0 0 5px}" #ccc diganti sama kode warna lain :D

      Delete
  3. Bagus juga sih, jadi lebih artistik ya kang...

    ReplyDelete
  4. terlihat lebih keren, kapan-kapan bisa dicoba

    ReplyDelete
  5. Wah mantep nih biar lebih maknyus ya mas :D

    ReplyDelete
  6. gan untuk wordpres.org work gak

    ReplyDelete
    Replies
    1. work gan,, kan konsep sama saja kalau untuk penomoran,, pake tag ol kemudian li, tinggal tambahkan saja ke file cssnya..

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin