10 đoạn code nâng cao khi viết bài trong Blogspot

 1. 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)
    Tốt nhất không nên dùng chữ có dấu cho tên gán. 
Ví dụ:
    - Đến điểm A (<a href="LINK_bài_viết_cụ thể#Diem_A>Đến điểm A</a>)
    - ...
    - Điểm A (<a name="Diem_A">Điểm A</a>)
Code trong ngoặc là chú thích cho ví dụ.
Như vậy khi ta click chuột vào "Đến điểm A"thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A"

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

3. Chèn nhạc vào bài viết: 

<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 45px; width: 300px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />

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

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

5. 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) 
kiểu khung thứ 2

<div style="border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: left; height: 100px; width: 600px; overflow:auto;">
NOI DUNG
</div>

Bạn thay đổi các dòng lệnh theo ý của mình, trong đó:

border 1px: độ rộng của khung
orange: màu của khung (bạn có thể thay red, white, yellow, black, pink, blue, green....)
aqua: màu của chữ (tương tự màu khung, bạn có thể thay red, yellow, orange, white, black, green, blue, pink...)
height: độ cao của khung (nếu vượt qua độ cao này sẽ có thanh trượt xuất hiện bên phải của khung)
Width: độ rộng của khung

6. Chèn khung chứa code có thẻ Select all

<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ống
Đây cũng chính là cách mà TGB hay dùng để chèn code vào bài viết. Riêng ở chính phần hướng dẫn này tôi dùng thủ thuật  5. Viền khung một nội dung trong bài viết.

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

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

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

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

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

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