Tukar stail bullet list


Kebiasaan bullet list ni, sama jer kan samaada jenis kotak (Square), circle (bulat) atau disc (bulat berlubang ditgh), Kali ni apa kata korang tukar stail bullet list tu ikut kehendak korang pulak. Contoh seperti kat bawah ni:

  • This is Sample Text
  • This is Sample Text
  • This is Sample Text
Camna berminat nak cuba?

Cara nak tukar bullet yg sedia ada ke bullet cam contoh kat atas tu pun senang jer. Caranya follow jer arahan kat bawah ni:

  1. Pergi ke bahagian Design -> Edit HTML
  2. Sebagai langkah keselamatan, sila Download Full Template
  3. Cari perkataan ]]></b:skin>, Kemudian copy dan paste code dibawah sebelum perkataan ]]></b:skin> tadi.

    .post ul {list-style:none;
    }
    .post ul li {
        line-height: 1.4em;
            background: transparent url(https://lh6.googleusercontent.com/-YV5KiXlE-y0/TY1Ktvgy62I/AAAAAAAAErE/lW7r7_FotvA/s12/heart013.png) no-repeat scroll 0px 4px;
        margin: 0.3em 0;
        padding: 0 0 0.8em 20px;
    }


  4. Tukar URL image yg berwarna merah kepada URL image korang sendiri. Saiz image yg ingin digunakan lebih kurang 12px X 12px
  5. Save Tempaletes.

Stail ke-2

Tutorial kat atas ni just simple bullet jer, kalau korang nak bullet yg ada effect hover, maksudnya bullet yg bila kita hover atau letak mouse cursor kat bullet tu ia akan bertukar ke warna lain seperti contoh lebih kurang kat page demo ( untuk ke page demo klik disini.) Korang boleh follow step yg sama macam kat atas tadi , bezanya code yg perlu korang guna ialah :

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/s400/261.gif) no-repeat scroll 0px 4px;
}



Untuk stail yg kedua ni, code diatas menggunakan 2 image, Cam biasa kalau korang tak nak guna code yg sedia ada tu korang terpaksa la cari 2 gambar bullet atau arrow yg sama tapi warna yg berbeza. erk boleh faham tak?




Stail ke-3



Kalau korang tak nak guna image sekadar nak guna bullet yg biasa sahaja (Circle, disc, square) korang boleh ikut step yg sama seperti kat atas tapi menggunakan code yg lain iaitu code seperti dibawah:


.post ul {list-style-type: circle;     }
.post ul li {
line-height: 1.5em;       
color:#289728;
}
.post ul li:hover {
       color:#0080ff;
list-style-type: disc; }
.post ul p { color:#555555;
             line-height:1.4em;  }

Untuk yg ni, korang boleh tukar  list-style-type: tu ikut suka korang nak guna circle, disc atau square. warna juga ikut korang nak letak warna apa okey!



Stail yg ke-3 ni juga boleh diguna pakai untuk numbering list, code untuk numbering list seperti dibawah:


.post ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
  color: #289728;
}
.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
  color: #0080ff;
}
.post ol p {
  font: normal 1em Arial, Helvetica, sans-serif;
  color: #555555;
  line-height:1.4em;
}

Kalau agak2 susah nak faham tutorial nih korang di alu-alukan untuk melihat tutorial asal disini dan disini eik. Daaaaa!!!!

1 comment: