Tổng hợp một số code thông dụng dùng trong bài viết

II. Code dùng trong bài viết (Last update 28/10/2011)

01. Font, màu chữ, thụt vào đầu dòng
02. Canh giữa, canh phải
03. Định dạng chữ: Đậm, Ngiêng, Gạch chân, Gạch ngang chữ
04. Dấu chấm vô dòng con, đánh số đầu dòng
05. Bookmark đến một vị trí nhanh trong bài viết
06. Chèn Flash vào bài viết
07. Chèn hình ảnh (image) vào bài viết
08. Chèn link liên kết vào bài viết
09. Chèn ảnh chứa link
10. Tạo button ẩn hiện nội dung
11. Chèn nhạc vào bài viết
12. Chia 2 cột
13. Viền khung một nội dung trong bài viết
14. Chèn khung chứa code có thẻ "Select all"
15. Ảnh rõ hơn khi rê chuột vào
16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
17. Tạo hiệu ứng khi rê chuột vào link liên kết
18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

DOC THEM

I. CODE DÙNG TRONG CÁC 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 // 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

xem them

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)

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

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.

Ví dụ:
- Dùng target="blank" - XEM
- Không dùng target="blank" - XEM

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:0px; 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ụ:

Đây là nội dung ẩn trong hộp thoại!

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

12. Chia 2 cột

<table><tbody>
<tr><td class="left_column" style="font:12px Tahoma; color:#000000; width:270px;" valign="top"><div class="left_column"> <div style="padding: 4px">
Nội_dung_cột_trái 
</div> </div>
</td><td class="right_column" style="color:#339966; font:12px Tahoma;" valign="top"><div class="right_column" id="txtEnglish"> <div style="padding: 4px">
Nội_dung_cột_phải 
</div> </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.
   - 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)

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

Ví dụ:

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

Ví dụ:

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

Ví dụ:

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

Ví dụ: ü HOME PAGE

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

Ví dụ:
- Mình có link HTML là: Color Check
- Sau khi chèn vào bài viết sẽ có kết quả thế này: XEM

Hoặc xem ví dụ cụ thể dưới đây:

II. MỘT SỐ CODE CHÈN THÊM VÀO CÁC CLASS TRONG TEMPLATE

1. Các loại đường viền (border: 1px #ccc solid)

Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................

2. Các kiểu định dạng chữ (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

3. Thêm các định dạng link vào class

/*Link cố định*/
a:link { 
color:#3366ff;
text-decoration:none;
}

/*Link đã xem qua*/
a:visited {
color:#ccc;
text-decoration:none;
}

/*Link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}

4. Tạo bóng đổ và bo tròn 4 góc viền

/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

/*Bo tròn 4 góc viền*/
border-radius:4px;

---------------------------~o-(^_^)-o~---------------------------

III. LINH TINH

1. Code xem địa chỉ IP, thông tin của máy truy cập blog
(Có thể post vào widget bất kỳ ở trên blog)

<img src="http://www.wieistmeineip.de/ip-address">

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

Để post các chú thích kí tự trên lên blog được thì:
    < phải đổi thành &lt;
    > phải đổi thành &gt;
    & phải đổi thành &amp;

Tổng hợp một số code thông dụng dùng trong bài viết

Popular Posts

Blog Archive