Tạo phong cách cho số thứ tự và gạch đầu dòng trong bài viết?


Khi viết blog , đánh số thứ tự (ol) và danh sách Bullet (ul) là một phần quan trọng để giúp cho bài viết tốt hơn, trình tự hơn. Để thay đổi giao diện của số thứ tự và danh sách này, chúng ta sẽ sử dụng CSS để thay đổi màu số thứ tự và danh sách khi rê chuột đến. Thủ thuật này gồm hai phần
  1. Làm thế nào để thay đổi giao diện của danh sách bullet (ul)
  2. Làm thế nào để thay đổi giao diện của số thứ tự (ol)
Làm thế nào để thay đổi giao diện của danh sách bullet (ul)
  • Vào blogger > Chỉnh Sửa HTMLL
  • Chèn code bên dưới vào trước thẻ ]]></b:skin>

.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;  }
Bạn có thể thay đổi màu cho phù hợp với sở thích và blog của mình
  • Lưu lại

Khi post bài các bạn chỉ cần sử dụng chức năng  trên thanh công cụ hoặc soạn thảo theo cú pháp bên dưới
<ul>
<li>Dòng 1</li>
<li>Dòng 2</li>
</ul>
Trong trường hợp không thành công bạn thử chèn <p> vào sau <li> và </p> vào trước </li>
<ul>
<li><p>Dòng 1</p></li>
<li><p>Dòng 2</p></li>
</ul> 
Làm thế nào để thay đổi giao diện của số thứ tự (ol)
Tương tự dán code sau vào trước thẻ  ]]></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;
}
Thay đổi màu cho phù hợp
  • Lưu lại
Bạn dùng chức năng để thực hiện thủ thuật này

Chúc bạn thành công!
1 Comments
Comments

1 comments :

Anonymous
22/1/13
Thanks for share!

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->