Khi bạn mới làm quen với Blogspot thì hẳn bạn sẽ có nhiều thắc mắc về các cách trình bày bài viết trong một trang Blogspot như thế nào cho đẹp. Bài viết này Vinll sẽ giúp các bạn nhanh chóng làm quen với các lệnh thường gặp từ cơ bản đến nâng cao khi bạn soạn thảo một bài viết trong blogspot.
frameborder="0" // Đường viền, 0 là không viền
Các bạn có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://vinll.blogspot.com) vào bài viết đều được hết.
#eee // Mã màu khi rê chuột lên
TEN_LINK // Tên gán cho link liên kết
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ị.
- Ảnh có chứa link
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 6. Viền khung một nội dung trong bài viết.
- 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)
Thêm cột thì thêm trên dòng </td></tr> đoạn code:
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
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>)
- ...
- Tại đ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".
#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.
Cách 2:
2. Code mở rộng
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ện chú thích.
Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó.
align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.
Ví dụ:
1. 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>frameborder="0" // Đường viền, 0 là không viền
Các bạn có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://vinll.blogspot.com) vào bài viết đều được hết.
2. 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>#eee // Mã màu khi rê chuột lên
TEN_LINK // Tên gán cho link liên kết
3. 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"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>4. Ảnh rõ hơn khi rê chuột vào
- Ả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ị.
- Ả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>5. 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>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 6. Viền khung một nội dung trong bài viết.
6. 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>- 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)
7. 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>8. 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" />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
9. 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>10. 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>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>)
- ...
- Tại đ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".
11. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)
Cách 1:
<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.
12. Canh trái, canh phải, canh giữa
<div style="text-align:center;">Nội_dung</div>13. Định dạng chữ: Đậm, Nghiê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>14. 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_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>15. Chèn Flash vào bài viết (có 2 cách, tùy bạn chọn)
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>16. 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ện chú thích.
Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó.
align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.
17. Chèn link liên kết vào bài viết hoặc comment
<a href="LINK" target="blank">Tên_Link</a>Ví dụ:
- Dùng target="blank" - Xem kết quả
- Không dùng target="blank" - Xem kết quả
18. Chèn ảnh chứa link
<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>
Link: để đường link mà bạn định gắn vào ảnh
Link ảnh: đường link hình ảnh của bạn
19. 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>20. 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
- < phải đổi thành &lt;
- > phải đổi thành &gt;
- & phải đổi thành &amp;
Tags:
thu-thuat-blogspot
