tháng 11 17, 2012 - Thứ Bảy, 17 tháng 11, 2012 / 0 bình luận

Hướng dẫn viết bài với những định dạng đẹp mắt

Thực hành với Blogspot (cực kỳ đơn giản)

» Sau đây chúng ta sẽ thực hành thành công 100% những kiến thức cơ bản về trình bày 1 bài viết với những định dạng đẹp mắt.

» Với những bước cơ bản dưới đây chúng ta đã có thể viết (trình bày) 1 bài thật đẹp mắt. Đây cũng là cách chúng ta gây ấn tượng tốt với độc giả của mình!

1 Đăng nhập Blogger.com -> Mẫu -> Chỉnh sửa HTML -> nhấn Ctrl + F tìm đoạn code: ]]></b:skin>

2 Chèn toàn bộ đoạn code sau ngay trước nó:

.luuy{background-color:#F0FFF0;border:1px #00BB00 solid;padding:9px}
.chitiet{padding-left:5px;padding-top:9px;padding-bottom:9px;border-left:5px green solid;margin-left:19px}
.dongkhung{padding:9px;color:#9932cc;border:1px solid #e6e6e6;background-color:#f9f9f9}
.so{background-color:green;color:#fff;font-size:large;font-weight:700;padding:5px 10px;border-radius:50%}
.diemnhan{color:#9932cc;padding:2px;border-bottom:2px solid #f7931b;font-weight:bold;font-size:20px}
.p{color:green;font-weight:bold;font-style:italic;border:1px #eee solid;padding:9px;border-radius:15px;background:#ffa;font-size:20px;text-align:center}

3 Lưu lại và sau đó click BÀI ĐĂNG MỚI

Mẫu 1:

Đóng khung như thế này, nội dung sẽ nằm ở khu vực này

code 1:

<div class="p">Đóng khung như thế này, nội dung sẽ nằm ở khu vực này</div>

-------------------------------------------------------------

Mẫu 2:

Đóng khung như thế này, nội dung sẽ nằm ở khu vực này, đây là 1 định dạng cũng rất căn bản nhưng cũng không kém phần độc đáo

code 2:

<div class="dongkhung">Đóng khung như thế này, nội dung sẽ nằm ở khu vực này, đây là 1 định dạng cũng rất căn bản nhưng cũng không kém phần độc đáo</div>

-------------------------------------------------------------

Mẫu 3:

Bán Game Tài chính giá rẻ tại HN

code 3:

<span class="diemnhan">Bán Game Tài chính giá rẻ tại HN</span>

-------------------------------------------------------------

Mẫu 4:

Đóng khung như màu thế này, nội dung sẽ nằm ở khu vực này, đây là 1 định dạng cũng rất căn bản gần giống CLASS "dongkhung" bên trên

code 4:

<div class="luuy">Đóng khung như màu thế này, nội dung sẽ nằm ở khu vực này, đây là 1 định dạng cũng rất căn bản gần giống CLASS "dongkhung" bên trên</div>

-------------------------------------------------------------

Mẫu 5:

» Dòng chi tiết 1
» Dòng chi tiết 2
» Dòng chi tiết 3
» Dòng chi tiết 4
» Dòng chi tiết 5

code 5:

<div class="chitiet">
» Dòng chi tiết 1
» Dòng chi tiết 2
» Dòng chi tiết 3
» Dòng chi tiết 4
» Dòng chi tiết 5</div>

-------------------------------------------------------------

Mẫu 6:

1 Lưu ý số 1

2 Lưu ý số 2

3 Lưu ý số 3

code 6:

<span class="so"><span class="so">1</span> Lưu ý số 1</span>

<span class="so"><span class="so">2</span> Lưu ý số 2</span>

<span class="so"><span class="so">3</span> Lưu ý số 3</span>

» Bạn cũng có thể tự định nghĩa những CLASS mới (Định dạng) cho mình chỉ cần nắm cơ bản kiến thức về CSS là ok
» Chúc bạn có những bài viết đặc sắc về định dạng (bố cục trình bày)