• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Bố trí text theo chiều dọc như thế nào?

15
26/03/2011

Chuyện cười nửa đêm

Đêm khuya, tiếng chuông gọi cửa vang lên, có tiếng hỏi từ trong nhà:

- Ai đấy?

- Mở cửa ra, cảnh sát đây!

- Nhà không có ai cả.

- Ai nói đấy?

- Các anh nghe nhầm đấy thôi.

- Thế sao đèn sáng?

- Tôi tắt đèn ngay bây giờ đây.

4 giờ sáng, Jim nhận đươc cú điện thoại của ông hàng xóm:

- Con chó nhà anh làm sao mà tru tréo sủa suốt đêm như chết cha chết mẹ vậy?

Ngày hôm sau, cũng 4 giờ sáng, Jim phôn lại:

- Con chó nhà tôi không sao cả, vì ban ngày thì nó ngủ.

Ha ha, đọc cười truyện cười một tí nhưng mục tiêu chính vẫn là giúp bạn thực hiện được thủ thuật tạo text nằm dọc như tiêu đề Chuyện cười nửa đêm ở trên. Hiệu ứng này rất đơn giản bằng sự hỗ trợ của CSS là có thể thực hiện được cho blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt CSS sau vào trước dòng ]]></b:skin>.

/* Nếu bố trí bên trái */
.vertext-left{
width:50px; // Chiều rộng cột dọc
margin-right:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:left;
}

Đoạn CSS ở trên dùng cho trường hợp bố trí bên trái, nếu bố trí bên phải thì dùng code như sau.

/* Nếu bố trí bên phải */
.vertext-right{
width:50px;
margin-left:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:right;
}

Lưu Template. Nếu bạn muốn màu nền thì thêm tham số background:#mã màu (bạn chọn mã màu để đặt vào).

Bước 2. Thiết lập cấu trúc HTML khi đăng bài viết như sau.

Trường hợp bố trí bên trái:

<div class="vertext-left" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Trường hợp bố trí bên phải:

<div class="vertext-right" >Text&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Lưu ý giữa các chữ phải cách nhau bằng dòng &ensp;

Nếu bạn không áp dụng Bước 1 thì ở Bước 2 cần dùng cấu trúc HTML như sau:

<div style="width:50px;margin-right:10px;padding: 0 5px;border:1px solid #66CCFF;text-align: center;color:#66CCFF;font-size:40px;line-height:45px;float:left;" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Hy vọng thủ thuật nhỏ này sẽ hữu ích cho một số blogspot.

{15 bình luậnAdd yours ?}

20:48:00, 26 thg 3, 2011

Hà ơi giúp mình sửa ở cái bước 3 trong cái thủ thuật tạo cái phân trang mà hôm trước hà post đó

Reply
20:58:00, 26 thg 3, 2011

Bước 3 nó báo lỗi thế nào, post lên nhé, nhớ dùng công cụ Parse HTML rồi đăng code vào nhận xét

Reply
08:23:00, 27 thg 3, 2011

Hà ơi mình lần trước có chỉnh code như bạn chỉ nhưng ko mất cái gạch chân dưới link, mình đổi tất cả dòng text-decoration thành text-decoration:none hết nhưng vẫn ko đc mong bạn giúp :(

Reply
10:01:00, 27 thg 3, 2011

giao diện gần hoàn thiện thấy đẹp, bố cục rõ ràng hơn rồi đấy bác, tuy nhiên cái ảnh thumb bác cho nó nhỏ xuống chứ nhìn nó mờ không đẹp bác à, bù lại bác cho font chữ phần mô tả to lên để có cảm giác đỡ trống vắng.

Reply
10:31:00, 27 thg 3, 2011

nè code này nè

Reply
12:43:00, 27 thg 3, 2011

@R�a Bi?n Thank u 4 your advice, Rùa. Đang sửa từng phần nên chưa xong hết, luôn đón nhận lời khuyên của bạn bè. :56)

Reply
12:45:00, 27 thg 3, 2011

@Minh Qu�n Code gì MQ, dùng công cụ Parse HTML để mã hóa code rồi mới đăng vào Comment chứ.

Reply
12:47:00, 27 thg 3, 2011

@L� Truong Vinh Trung Em có nhiều trang blog quá, trang nào cần chỉnh thế

Reply
14:34:00, 27 thg 3, 2011

code này làm nó cứ bị lỗi quài đây <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Reply
14:39:00, 27 thg 3, 2011

Thì dùng thế này trong thuật phân trang là OK mà:

<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a>

Reply
15:40:00, 27 thg 3, 2011

@Huỳnh Nhật Hà
Trang liên kết với anh đó :(

http://vn-share4u.blogspot.com/

Reply
16:51:00, 27 thg 3, 2011

@L� Truong Vinh Trung Trời đất, a bảo em đổi underline thành none, ai dè em xóa tất cả các thuộc tính của link nên mặc định là gạch chân chứ gì nữa e.

Đặt a{text-decoration:none}a:hover{text-decoration:none;} vào trước thẻ ]]></b:skin$gt; nhé e.

Reply
15:23:00, 7 thg 10, 2015

Hay vậy, trước giờ e rất dở mấy cái này, trang trí rất nhàm chán, cám ơn ad nha.
------------------------------------
Truyền hình số HD - Xem tivi hơn 50 kênh miễn phí thuê bao tháng.
Chuyên phân phối: Dau thu DVB T2 chính hãng VTV, VTC, LTP...
Đầu thu nhiều người quan tâm: Dau thu DVB T2 VTC T201

Reply
22:18:00, 2 thg 8, 2016

hè này chẳng biết địa điểm
du lịch nào hay

Reply
22:11:00, 30 thg 9, 2016

giảm cân nhanh

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn