11. Chèn nhạc vào bài viết
<object name='hat' width=300 height=45>
<embed type='application/x-mplayer2'
pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/'
controls='controlpanel' width=300 height=45 src='LINK_NHẠC'
autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>
LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3) loop='0' // Không lặp lại loop='1' // Lặp lại một lần loop='-1' // Lặp lại mãi mãi autostart="0" // Không tự play autostart="1" // Play ngay khi web tải xong
12. Chia 2 cột, 3 cột, 4 cột
<table><tbody>
<tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">
Nội_dung_cột_1
</div>
</td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">
Nội_dung_cột_2
</div>
</td></tr>
</tbody></table>
Thêm cột thì thêm trên dòng </td></tr> đoạn code:
</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">
Nội_dung_cột_n
</div>
13. Viền khung một nội dung trong bài viết
<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">
NỘI_DUNG
</div>
#4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền - Loại đường viền. - solid ______________ - dashed ---------------- - dotted ...................... background:#eee // Nền khung width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)
14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)
<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>
cols="59" // Bề rộng khung chứa code rows="18" // Số dòng trong khung chứa code wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuốngVí dụ:
15. Ảnh rõ hơn khi rê chuột vào
1. Ảnh có chứa link<a href="link_liên_kết" target="blank">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
</a>
2. Ảnh không chứa link<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào. Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.Ví dụ:
16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
1. Ảnh có chứa link
<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" >Ví dụ:
17. Tạo hiệu ứng khi rê chuột vào link liên kết
<a href="LINK" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>
18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)
<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 :)
19. Các loại đường viền | border: 1px #ccc solid;
Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................
20. 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
21. 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;
}
22. 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;
Thay box thành text cho chữ
23. 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');
24. 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
25. 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)<img src="http://www.wieistmeineip.de/ip-address">
26. Cách mã hóa code
Với ký tự < phải đổi thành <
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &
Với khoảng trắng phải đổi thành
Để post các chú thích kí tự trên lên blog được thì:
< phải đổi thành &lt;
> phải đổi thành &gt;
& phải đổi thành &amp;
27. 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>
28. 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..
29. Script chèn file .js vào blog
<script src='Link_File_JS' type='text/javascript'/>
30. 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>
31. Thêm nhanh khung hướng dẫn hay nội quy comment
- Bạn có thể vào trong phần nội dung nhận xét để soạn thảo nội quy cho phần nhận xét của bạn, xem hình.
- Ví dụ mình soạn thảo nôi dung như sau:
<!--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>