Tổng hợp một số code thông dụng trong blogger
Bạn thân mến. Việc tạo ra một trang blogspot thì rất đơn giản, nhưng để có được một blog đẹp và chuyên nghiệp đòi hỏi chúng ta phải can thiệp nhiều vào phần code của blog. Vì vậy hôm nay mình xin chia sẻ với các bạn new blogger một số code cơ bản:
Các bạn khi soạn thảo một bài đăng mới, nếu muốn viết theo kiểu mặc định của blogger thì chon phần "Viết", nếu muốn can thiệp vào code thì mình chọn phần "HTML", sau đó chèn code cần thao tác vào.
I. Một số code đơn giản dùng trong soạn thảo bài viết:
1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)
<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 : Là mã màu cho chữ
12pt Tahoma : Là cỡ chữ và font chữ
margin-left:12px : Là 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: Canh giữa.
right: 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)
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".
6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)
Loại 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>
Loại 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
7.1. Code đơn giản:
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>
7.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)
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" Là lệnh 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.
9. Chèn ảnh chứa link
<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>
10. 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>
11. Viền khung một nội dung trong bài viết
<div style="background: #eee; border: #FF0000 3px dashed; padding: 4px; width: 500px;">
NỘI_DUNG
</div>
#FF0000 3px dashed ==> 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:500px ==> 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)
12. 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ống
13. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
13.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>
13.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" >
14. 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;">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
15. 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"
Với "0" là không viền.
II. Một số code nâng cao trong blogger:
PHẦN NÀY MÌNH SẼ CẬP NHẬT Ở BÀI VIẾT SAU. BÀI VIẾT NÀY CHỈ DÀNH CHO NHỮNG NEW BLOGGER. CÓ GÌ SAI SÓT, CÁC BẠN THÔNG CẢM VÀ VUI LÒNG COMMENT VÀO BÊN DƯỚI, MÌNH SẼ CHỈNH SỬA LẠI. CHÚC CÁC BẠN THÀNH CÔNG.
