Tổng hợp Code đăng bài hay dùng trong Blog, Web

Một số code thông dụng và cần thiết dùng trong bài viết cho blog, website. Để dùng code thay cho viết bài kiểu mặc định thông dụng của các blog chọn sẵn, bạn bấm chọn qua thẻ "Edit HTML". Sau đó chèn code cần thao tác vào, nếu muốn soạn thảo tiếp bài viết với kiểu cũ thì chọn lại thẻ viết bài như cũ. 

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

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

Ví dụ:

- Mình có link HTML là: Color CheckHoặc xem ví dụ cụ thể dưới đây:

<span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span>

<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

#339966 // Mã màu cho chữ

12pt Tahoma // Cỡ chữ và font chữ 

margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại

2. Canh giữa, canh phải

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

center //Thay center = right cho canh phải

3. Định dạng chữ: Đậm, Ngiêng, Gạch chân, Gạch ngang chữ

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

4. Dấu chấm vô dòng con, đánh số đầu dòng

Dấu chấm vô dòng con
<ul>
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ul>
Đánh số đầu dòng
<ol>
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ol>

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

<a href="LINK_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>

Lưu ý:

Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh)

- Đến điểm A (<a href="LINK_bài_viết_cụ thể#Diem_A">Đến điểm A</a>)
 

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)

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>

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

7. Chèn hình ảnh (image) vào bài viết

1. Code đơn giản
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>

2. Code mở rộng
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích.Mô_tả // Khi rê chuột lên ảnh, sẽ hiệnchú thích.

8. Chèn link liên kết vào bài viết

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

target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta
vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay
không cũng không khác biệt.

9. Chèn ảnh chứa link

<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>

10. 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:# ">NỘI_DUNG
</div>
</div>
</div>

Ví dụ:

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

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>

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.

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"><imgonmouseover="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
<imgonmouseover="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. 

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" ><a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">NAME_LINK</a>

LINK // Link liên kết#eee // Mã màu khi rê chuột lên NAME_LINK // Tên gán cho link liên kết<!--[if !supportLineBreakNewLine]--> <!--[endif]-->

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

19. Khung chứa code giống trang này.

<div style="background-color: #f4f4f4; border: 1px solid gray; cursor: text; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;">

<div class="MsoNormal">

<div class="MsoNormal">

<span style="font-family: consolas, Courier New, courier, monospace;"><span style="line-height: 16px;">NỘI DUNG</span></span></div>

</div>

</div>

Chúc các bạn thành công.