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  


10 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
    Replies
    1. gak tahu deh,,, gaya - gayaan aja mba...

      Delete
  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
    Replies
    1. lumayanlah kang,,, biar terlihat beda...

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

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

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...