Những Code Thông Dụng Cho
Blogspot
Nhằm giúp các
blogger mới vào nghề hiểu thêm về code nên hôm nay mình chia sẻ lại một số code
thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng
sẽ giúp ích được cho các bạn.
<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.
<div style="text-align:center;">Nội_dung</div>
center // Thay center = right cho
canh phải hoặc = left cho
căn trái
<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>
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>
Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>
<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".
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>
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.
<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
<a href="LINK"
target="blank"><img src="LINK_ẢNH"/></a>
<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ụ:
<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
<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>
<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)
<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ụ:
Đây là nội dung code không cần mã hóa. <br /> Lưu ý: Những hàng enter
xuống dòng sẽ có thêm code </br> sau mỗi cuối câu.
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ụ:
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ụ:
<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
<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ụ: Xem tại đây
Dashed - - - - - - - - - - - - - - -
- -
Solid _____________________
Dotted ..................................
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
/*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;
}
/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;
/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;
/*Bo tròn 4 góc viền*/
border-radius:4px;
/*Bo tròn tùy chọn: top, right, bottom,
left*/
border-radius:4px 4px 4px 4px;
Thay box thành
text cho chữ
none: Không hiển thị đánh dấu
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)
/*Link hình thay cho list*/
list-style-image:url('Link_hình');
repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa
(Có thể post vào widget bất kỳ ở
trên blog)
<img
src="http://www.wieistmeineip.de/ip-address">
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;
1. Điều kiện ở trang chủ
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
...
</b:if>
2. Điều kiện ở trang bài viết
<b:if cond='data:blog.pageType ==
"item"'>
...
</b:if>
3. Điều kiện ở trang chủ, trang nhãn
<b:if cond='data:blog.pageType ==
"index"'>
...
</b:if>
4. Điều kiện ở các trang lưu trữ
<b:if cond='data:blog.pageType ==
"archive"'>
...
</b:if>
5. Điều kiện ở các trang tĩnh
<b:if cond='data:blog.pageType ==
"static_page"'>
...
</b:if>
6. Điều kiện ở một trang riêng biệt
nào đó
<b:if cond='data:blog.url ==
"URL_của_trang_riêng_biệt"'>
...
</b:if>
Nếu thay == thành != thì
kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần
ngược lại (các trang còn lại)
Ví dụ: Điều kiện loại trừ trang bài viết
<b:if
cond='data:blog.pageType != "item"'>
...
</b:if>
<!-- Lời ghi dưới mỗi bài viết
-->
<b:if cond='data:blog.pageType == "item"'>
Nội_dung
</b:if>
Nội_dung // Ghi chú nội dung của
bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..
<script src='Link_File_JS' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
Nội_dung_file_js
//]]>
</script>
- Tìm đến thẻ <data:blogTeamBlogMessage/>
- Đôi khi có tên là <data:blogCommentMessage/>
- Thêm vào sau nó đoạn code sau:
<!--Khung nội quy comment-->
Nội dung nội quy comment của bạn
<p></p>
- Sau mỗi hàng
phải thêm cặp thẻ <br></br> hoặc <br/> nếu muốn xuống dòng.
- Có thể dùng các code trang trí cho khung như: hình ảnh,
màu chữ, v.v..
Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.
<!--Nội dung hướng dẫn comment-->
<div style='border:#ccc 1px solid;
padding:4px;border-radius:4px; background:#eee;'>
Bạn có thể sử dụng một số thẻ HTML như: <br/>
<textarea cols='48' rows='4'>
» Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b>
» Chữ in nghiêng:
<i>Nội_dung_chữ_in_nghiêng</i>
» Chèn link liên kết: <a
href='Link'>Tên_link</a>
» Chèn hình ảnh: [img]Link_hình[/img]
</textarea>
</div>
<p/><p/>
Chúc thành công!.
Đăng nhận xét