Một số code hiệu ứng đẹp mắt cho blogger

1. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh

1<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>

2. Ảnh không chứa link
<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >

3. Tạo hiệu ứng khi rê chuột vào link liên kết

1<a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>

    LINK // Link liên kết
    #eee // Mã màu khi rê chuột lên
    TEN_LINK // Tên gán cho link liên kết

4. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

1<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>

    scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
    frameborder="0" // Đường viền, 0 là không viền

    Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :) 

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

Dashed - - - - - - - - - - - - - - - - -

Solid _____________________

Dotted ..................................

6. 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    

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

1234567891011121314151617/*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;
}

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

123456789101112131415/*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; 

9. 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*/

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

10. 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

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

(Có thể post vào widget bất kỳ ở trên blog)

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

12. 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;

13. 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>

14. 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

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..

15. Script chèn file .js vào blog
<script src='Link_File_JS' type='text/javascript'/>

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

123456<script type='text/javascript'>
//<![CDATA[

Nội_dung_file_js
//]]>
</script>

17. 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:

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

    - 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.

12345678910<!--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] </textarea>
</div>
<p/><p/>