Những code thông dụng để viết HTML trong Blogspot

Những code thông dụng để viết HTML trong Blogspot, sau đây là tổng hợp một số code cơ bản và thông dụng mà một blogger cần biết để phục vụ quá trình thiết kế và sử dụng được thuận tiện hơn.

1. Bookmark đến vị trí nhanh trong bài viết

<a href="url_bài_viết#Tên_gán_cho_vị_trí">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí">Nội_dung</a>

2. Chèn flash vào bài viết

Cách 1:

<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300" type="application/x-shockwave-flash" scale="" play="true" loop="true" menu="true"></embed></div>

Cách 2:

<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400"></embed>

Chỉnh sửa:
- LINK_FLASH là địa chỉ URL của flash mà bạn cần chèn vào bài viết
- width và height: là độ rộng và chiều cao của flash bạn thay đổi thông số cho phù hợp

3. Viền khung nội dung vào bài viết

<div style="border:1px solid #4F4F4F;padding:4px;background:#eee;width:400px;">NỘI_DUNG</div>

Chỉnh sửa thành các giá trị bên dưới để có nét cần sử dụng
- solid ______________
- dashed -------------------
- dotted ..........................

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

Chỉnh sửa:
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

5. Tạo button ẩn hiện nội dung

<div><div><input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div><div><div style="display:none;border:#4F4F4F 1px solid; padding:4px;background:#fff">
NỘI_DUNG
</div></div></div>

6. Tạo hiệu ứng khi di chuyển 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>

7. Canh Giữa, Trái, Phải cho nội dung

<div style="text-align:center;">Nội_dung</div>

Chỉnh sửa:
- center // Canh Giữa
- right // Canh Phải
- left // Canh Trái

8. In Đậm, In Nghiêng, Gạch Chân, Gạch Ngang

<b>Nội_dung_in_đậm</b><i>Nội_dung_in_nghiêng</i><u>Nội_dung_gạch_chân</u><strike>Nội_dung_chữ_bị_gạch_ngang</strike>

9. Dấu chấm hoặc số đầu dòng

- Dấu chấm vô dòng con

<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>

- Đánh số đầu dòng

<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>

10. Chèn Ảnh Vào Bài Viết

<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

11: Chèn Link vào bài viết

<a href="LINK" target="blank">Tên_Link</a>

12. Chèn Khung Chứ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>

13. Thay đổi ảnh khác khi rê chuột vào

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

14. Nhúng 1 trang web khác vào bài viết

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

15. Cách kiểu định dạng chữ trong lệnh: 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 (Mặc định)

16. Đổ bóng bo góc

- Tạo bóng đổ
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;
Chỉnh sửa thay giá trị 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;
Chỉnh sửa thay đổi giá trị 0px 0px 8px #616D7E
- Bo tròn 4 góc viền
border-radius:4px;
Chỉnh sửa muốn tăng bo tròn bạn cần tăng 4px lên giá trị cao hơn
- Bo tròn tùy chọn: top, right, bottom, left
border-radius:4px 4px 4px 4px;

17. Cách loại list trong lệnh: 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, …)

18. Các lệnh lặp ảnh trong lệnh: 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

19. Các lệnh điều kiện trong HTML

Các bạn có thể tham khảo đầy đủ các thẻ điều kiện trong HTML tại đây.

20. Thêm chữ ký hay ghi chú trên/dưới mỗi bài viết 

(Đặt trên/dưới dòng <data:post.body/>)
Lưu ý: Trong cấu trúc template thường là sẽ có nhiều hơn một thẻ <data:post.body/> vậy bạn cần xác định thẻ thuộc phần bài viết.

<!-- Lời ghi trên/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à nhiều cách như đã hướng dẫn phía trên

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

- Chèn dạng Link

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

- Chèn dạng nguyên bản

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

22. Chữ nhỏ bên dưới (dùng để viết công thức toán học)

X<sub>1</sub>
X<sup>1</sup>

Trên đây là những code thông dụng chủ yếu dùng trong blogspot, hy vọng với thủ thuật này sẽ giúp ích bạn trong quá trình sử dụng blogspot được thành thạo và dễ dàng hơn!