Bullet, apaan tu...ah nanti tau sendiri. Mieftach coba jelasin vara buatnya:
Membuat Bullet biasa
<ul>
<li>satu</li>
<li>dua</li>
<li>tiga</li>
<li>empat</li>
<li>dst...</li>
</ul>
keterangan:
<ul>=tag pembuka untuk membuat bullet
<li>=tag pembuka untuk daftar item bullet
</li>=tag penutup untuk daftar item bullet
</ul>=tag penutup untuk mengakhiri bullet
Membuat Bullet Bujur Sangkar (square)
kalo ini jenis bulletnya akan berbentuk bujur sangkar,yang biasanya titik hitam akan berubah jadi bujur sangkar,kode untuk membuatnya adalah kode yang semula <ul> dirubah menjadi <ul type="square"> berikut contoh kode keseluruhannya.. <ul type="square">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
<li>empat</li>
<li>dst...</li>
</ul>
Membuat Bullet Lingkaran (circle)
bullet ini berbentuk bundar (yaiyalah..namanya juga lingkaran,pasti bentuknya bundar he..) kode untuk membuatnya yaitu yang semula <ul> dirubah menjadi <ul type="circle"> sehingga kode keseluruhan akan terlihat seperti dibawah ini:
<ul type="circle">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
<li>empat</li>
<li>dst...</li>
</ul>
Membuat Bullet dengan icon nah..untuk yang kurang srek dengan tampilan bullet diatas tadi bisa menggunakan cara dibawah ini yaitu bullet denganIcon, untuk membuatnya silahkan ikuti cara dibawah ini:
* MasuK ke blogger.com->tata letak/layout->edit html
* Beri tanda cek pada expand template widget atau yang ngeblog dg browser hp,download lengkap templatenya (baca disini untuk cara edit template blog dg hp)
* masukan kode berikut pada deretan kode css.
.main ul {
list-style:none;
margin:0 0 1.25em;
padding:0;
}
.main ul li {
background:url("http://i536.photobucket.com/albums/ff324/Erwhen21/bullet.gif") no-repeat 2px .25em;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:3px;
padding-$startSide:16px;
margin-bottom:3px;
line-height: 1.2em;
}
* silahkan ganti link yang berkedap-kedip dengan icon milik kamu,dan kode css diatas tidak mutlak seperti itu,kamu bisa mengedit sepuasnya tergantung kreatifitas kamu...
* save template yang sudah di edit tadi, untuk melihat contohnya bisa diliat di bagian posting ini
* NOTE: bullet dengan icon hanya berlaku pada template minima yg asli dari blogspot dan juga pada area posting dan sekitarnya hehe...
semoga Bermanfaat....!
2 comment:
trims tipsnya mas, salam kenal
good lah tipsnya
Posting Komentar
silahkan entri sepucuk komentar