Memodifikasi Tampilan Bullet atau Penomoran Postingan

Membuat tapilan postingan kita jadi lebih unik merupakan suatau yang menyenangkan(Acording to me :) dan semoga juga buat anda, Klo sebelumnya saya sudah membuat Mempercantik Tampilan Link sekarang saatnya mempercantik tampilan Bullet dan numbering postingan. Semoga Tutorial ini dapat membantu anda

1. Merubah Bullet List <ul> berubah-ubah saat mouse di arahkan
2.  Merubah Number List<ol>  berubah-ubah saat mouse di arahkan

Change Bullet List (ol) style on Mouse Hover

Untuk mengedit style ini, ini yang bisa kamu lakukan.

• Log into Blogger
  
• Go To Layout > Edit HTML
  
• Now add this piece of code just above ]]></b:skin>

.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;
}

Untuk Merubah warnanya bisa dilihat Kode Dasar Warna dan silahkan anda rubah teks yang berwarna biru.

Untuk Menggunakan hasil editan kamu, kamu harus menggunakan Kode HTML
Contoh:

<ul><li> <p>Teks yang kamu inginkan</p></li>
 <li> <p>Teks yang kamu inginkan</p></li></ul>

Jadi, klo Postingan kamu sebelumnya hanya menggunakan <ul><li>teks yang kamu inginkan</li></ul> maka itu tidak akan berfungsi sebgaimana mestinya. Jadi rubah dulu atau pada saat kamu buat yang baru harus menggunakan tambahan seperti contoh diatas.

Change Number List (ol) style on Mouse Hover

Klo yang ini untuk mengedit tampilan Number List kamu. Langsung aja caranya??

• Log into Blogger
• Go To Layout > Edit HTML
• Now add this piece of code just above ]]></b:skin>
  
  
  
  
  .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;
• Untuk Merubah warnanya bisa dilihat Kode Dasar Warna dan silahkan anda rubah teks yang berwarna biru.
• Simpan Hasil Kerja Kamu dan Lihat Hasilnya 

Untuk Menggunakan Style ini anda harus menambahkan kode HTML <ol><li><p> Teks Pilihan Kamu</li></p></ol>
Semoga Tutorial CSS ini bermanfaat buat kita semuanya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com