13 lệnh chuẩn, cần thiết khi code HTML cho Blogspot

Ở bài này, TGB sẽ chia sẻ với các bạn về 13 lệnh thông dụng khi bạn code cho chức năng, giao diện của Blogspot. Bài viết này đã không còn ở cấp độ gói gọn trong bài đăng như ở 2 bài viết:


Và ở bài viết này code cũng không còn ở dạng "mì ăn liền" để bạn chỉ cần thay thế một số nội dung cho phù hợp. Mà ở đây, bạn cần phải có chút ít kiến thức về lập trình để có thể chỉnh sửa HTML của Blogspot sao cho phù hợp với yêu cầu của mình.

Lưu ý cuối cùng 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.

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ấu disc: Chấm vuông circle: Chấm tròn trắng square: Chấm tròn đen decimal: 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*/

list-style-image:url('Link_hình');

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

repeat: lặp ảnh repeat-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ặp top: đặt ảnh trên mép cùng top right: đặt ảnh mép trên cùng góc phải top left: đặt ảnh mép trên cùng góc trái bottom: đặt ảnh mép dưới cùng bottom left: đặt ảnh mép dưới cùng góc trái bottom right: đặt ảnh mép dưới cùng góc phải right: đặt ảnh bên mép phải left: đặt ảnh bên mép trái center: đặ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:

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

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]