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;5. Klik Simpan Template
}
.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;
}
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