Pages

Membuat Unordered (bullet) Tampil Menarik

Macam-macam gaya tampilan blog mulai dari template, widget dan lain sebagainya. Tak terkecuali dengan yang satu ini.

Tampilan Unordered atau bisa juga disebut bullet, istilah untuk menyebut urutan point-point tertentu tanpa menggunakan angka dengan gaya yang unik. Kenapa dibilang unik? Ya karena tidak seperti biasanya. Wah ini juga biasa koq mas! Ya sudahlah anda yang menilai, kalo menurut sy mah unik aja pokoknya laughing.

Tampilan bullet default:
. Tutorial Blogger
. Widget
. Internet
. Komputer

Tampilan bullet modifikasi:
  • Tutorial Blogger
  • Widget
  • Internet
  • Komputer
Jika tertarik membuatnya, simpan kode css ini di atas kode ]]></b:skin> setelah anda Loggin ke Blogger - Rancangan - Edit HTML:
.post-body ul,
.post-body ol{
  margin: 1em;
  padding-left: 1em;
}
.post-footer ul{
  margin: 1em;
  margin-top: -0.5em;
  padding-left: 1em;
}
.post-body ul li,
.post-footer ul li {
  list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9sCUd4A1-ZR2R8zGVC8-gykiB8NTS34G5luRKLuW_iv295rnZihY5VXauqE9sDsXo0_D4CJ-2Tgnr-3-6HfvzhmiUY2ISms8Nr4p-VC5qEa7Kfrwaxg90b2yn-eX8dhyphenhyphen57PUGOqyb3k/s400/uncheck.gif);
  border-bottom: 1px solid #ccc;
  padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
  cursor: pointer;
  list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLXtgHZIuBoQoWGpnRtQ2b3JtrK3Fp-E94GYQLrBGsSLH-y3xo_H-Ozs1hHcFCZbUKMXTLKYeSZInb-JtLNSs9lA67fV9spMRXwMbhRN74WPsszbhtTnn1ITTgebJxWf2mNgn1h8IGZok/s400/check.gif);
  background-color: #f2f2f2;
  color: #B1291F;
}
Jika sudah, silahkan simpan templatenya lalu tes di kotak posting Blogger anda. tq
Untuk berlangganan artikel, masukan email anda disini:



5 Comment :

Kang Maman mengatakan...

bullet nya cuma satu type ya bro?
ditunggu update untuk type lainnya kang bro.
tengkyu bro

papadiva mengatakan...

sama2 kang mas bro :). oya, untuk mengubah bulletnya dengan type lain kang mas bro bs mengganti link image bulletnya yg spt ini:

http://2.bp.blogspot.com/-weHRebnthsU/TmiD_obNZ1I/AAAAAAAADmk/cpcVCZVUD1M/s400/uncheck.gif

dan yg ini:

http://3.bp.blogspot.com/-E3wNe4mpTbU/TmiD_TB_cTI/AAAAAAAADmc/rDfDBXGMH3Q/s400/check.gif

silahkan ganti dg gambar bullet yg mas bro punya. smoga membantu

IPTutor(+) mengatakan...

kalo tampilah background postingan kita item gimana?
itu kan gmbar chek dan uncheknya ada putih2nya?
ga sempurna dong kalo background postingan kita item?

IPTutor(+) mengatakan...

tapi gapapa gan, sangat terbantu

Konveksi mengatakan...

Mas Kalo code yang hanya diletakkan di file CSS punya gak? Thanks

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry