Cara merubah style tag bullet list html di blogspot (tag ul li)

Cara merubah style tag html ul di blogspot - Dalam tag html biasanya kita sering temukan tag seperti UL, LI, dan OL dimana ketiga jenis tag tersebut masing-masing memiliki fungsi khusus dalam mengurutkan suatu tulisan, misalkan kita ingin mengurutkan satu kata dengan kata lain secara vertikal, contoh tag <ul><li>teks 1</li><li>teks 2</li></ul> dan hasilnya kedua teks akan terbaris secara vertikal seperti dibawah :



Nah, begitupun dalam tag html di blogspot tag-tag ini juga berlaku dengan fungsi yang sama, tetapi disini saya akan jelaskan bagaimana cara mendesain style dari tag tadi dengan ditambahkan script css, tentunya sudah didesain dengan pernak-pernik unik sehingga tampak lebih bagus, nah contoh hasilnya seperti ini :

  • Teks urut satu 
  • Teks urut dua
  • Teks urut tiga
  • Teks urut empat
  • Teks urut lima

Dengan fungsi css tadi style berubah seperti gambar daun ganja.. karena gambar yang saya gunakan adalah gambar ganja yang saya temukan dari website lain, nah untuk sobat yang penasaran ingin mendesain tampilan tag ul di blog atau websitenya ikuti cara ini:

1. Login ke akun Blogger sobat
2. Masuk ke halaman Template
3. Cari kode .post-body ul li atau .post ul li
4. Ganti kode seperti diatas dengan kode dibawah ini :
.post-body ul {list-style:none;
}
.post-body ul li {
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dcap4Pn99hXkp_w_Kuykl48vy1mAD6JNbAx8mj8n3IHRVjJPTyiIe9pFCYEwHpwuNeQPkUNaDBH3Sq1xQIhQdf7K6t1osSd1kUmACycZPiLmPsy_Sdrii9hi1d34j2flrglbbu2zSZw/s400/255.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post-body ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6d0iY3wKM54h3_ecndDtby3IuaEhW3thlY2ldlKC2jixshu1q8ToIt04Y2KAd8hGTOM4w-y8Da8lVSKOw3vysJrnYiMrAk1ZkPBMhlze3xUjA4nKDN8nRDUEQPXzTxXsp3HDOhPDFKSk/s400/251.gif) no-repeat scroll 0px 4px;
}
5. Klik Simpan Template

Dan Selesai, sekarang untuk membuktikannya silahkan buatkan satu postingan dengan menggunakan tag ul li atau dengan menekan tombol Bullet List disamping kiri blockquote.
Okelah sobat saya kira tutorial kali ini bisa kalian terapkan dalam blog atau website sobat supaya bullet list atau tag ul li jadi lebih bagus dan menarik, selamat mencoba .!

Tidak ada komentar:

Posting Komentar

Pages