Các lệnh chuẩn code HTML cho Blogger

Bài viết này tổng hợp một số code html cần thiết khi làm Blogspot.

Lưu ý với bạn là bạn hãy backup template blogspot hiện tại của mình trước khi bắt tay vào chỉnh sửa code nhé.

Một số câu lệnh html cho blogspot

1. Các loại đường viền | border: 1px #ccc solid;

Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted .................................. 

2. Các kiểu định dạng chữ | text-decoration:none;

none (Không định dạng)underline (Gạch đích)overline (Gạch trên đầu)         line-through (Gạch ngang chữ)blink (Chớp chớp)inherit    

3. Thêm các định dạng link vào class

/*Link cố định*/a:link { color:#3366ff;text-decoration:none;}
/*Link đã xem qua*/a:visited {color:#ccc;text-decoration:none;}
/*Link khi rê chuột vào*/a:hover {color:#339966;text-decoration:underline;}

4. Tạo bóng đổ và bo tròn 4 góc viền

/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;

/*Bo tròn 4 góc viền*/
border-radius:4px;


/*Bo tròn tùy chọn: top, right, bottom, left*/
border-radius:4px 4px 4px 4px;

5. Các loại định dạng list | ... ul {list-style-type:none;}

none: Không hiển thị đánh dấudisc: Chấm vuôngcircle: Chấm tròn trắngsquare: Chấm tròn đendecimal: Kiểu số (1,2,3,4,…)lower-alpha: Kiểu Alphabet ở dạng in thường  (a, b, c, d, e, …)upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

/*Link hình thay cho list*/

6. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

repeat: lặp ảnhrepeat-y: lặp ảnh theo chiều dọc (từ trên xuống)repeat-x: lặp ảnh theo bề ngang (từ trái qua)no-repeat: không lặptop: đặt ảnh trên mép cùngtop right: đặt ảnh mép trên cùng góc phảitop left: đặt ảnh mép trên cùng góc tráibottom: đặt ảnh mép dưới cùngbottom left: đặt ảnh mép dưới cùng góc tráibottom right: đặt ảnh mép dưới cùng góc phảiright: đặt ảnh bên mép phảileft: đặt ảnh bên mép tráicenter: đặt ảnh ở vị trí giữa

7. Code xem địa chỉ IP, thông tin của máy truy cập blog:

<img src="http://www.wieistmeineip.de/ip-address">

8. Cách mã hóa code:

Với ký tự < phải đổi thành &lt;Với ký tự > phải đổi thành &gt;Với ký tự & phải đổi thành &amp;Với khoảng trắng phải đổi thành &nbsp;

Để post các chú thích kí tự trên lên blog được thì:

&lt; phải đổi thành &amp;lt;&gt; phải đổi thành &amp;gt;&amp; phải đổi thành &amp;amp;

9. Các lệnh điều kiện <b:if cond= ... </b:if>

1. Điều kiện ở trang chủ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>...</b:if>

2. Điều kiện ở trang bài viết:

<b:if cond='data:blog.pageType == "item"'>...</b:if>

3. Điều kiện ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>...</b:if>

4. Điều kiện ở các trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>...</b:if>

5. Điều kiện ở các trang tĩnh:

<b:if cond='data:blog.pageType == "static_page"'>...</b:if>

6. Điều kiện ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>...</b:if> 

Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại) 

Ví dụ: Điều kiện loại trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>...</b:if>

10. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

<!-- Lời ghi dưới mỗi bài viết --><b:if cond='data:blog.pageType == "item"'>Nội_dung</b:if>

Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..

11. Script chèn file .js vào blog

<script src='Link_File_JS' type='text/javascript'/>

12. Script chèn trực tiếp nội dung file .js vào blog

<script type='text/javascript'>//<![CDATA[Nội_dung_file_js
//]]></script>

13. Thêm nhanh khung hướng dẫn hay nội quy comment:

- Tìm đến thẻ <data:blogTeamBlogMessage/>
- Đôi khi có tên là <data:blogCommentMessage/>
- Thêm vào sau nó đoạn code sau:

<!--Khung nội quy comment-->Nội dung nội quy comment của bạn 

    - Sau mỗi hàng phải thêm cặp thẻ <br></br> hoặc <br/> nếu muốn xuống dòng.
    - Có thể dùng các code trang trí cho khung như: hình ảnh, màu chữ, v.v..

Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.

<!--Nội dung hướng dẫn comment--><div style='border:#ccc 1px solid; padding:4px;border-radius:4px; background:#eee;'>Bạn có thể sử dụng một số thẻ HTML như: <br/><textarea cols='48' rows='4'>» Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b>» Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i>» Chèn link liên kết: <a href='Link'>Tên_link</a>» Chèn hình ảnh: [img]Link_hình[/img]