Những Code HTML Thông Dụng Cho Blogger

Những Code HTML Thông Dụng Cho Blogspot – Hướng dẫn tạo BlogSpot Chi Tiết Nhất – Bài 3

Thủ thuật hướng dẫn các bạn về công cụ thay đổi giao diện cho một trang blog mặc định, những code HTML thông dụng cho Blogger và cũng nói sơ về code dùng để chỉnh sửa cho blog.

1. Hai thẻ <div> và <span> cho phép nhóm các thành phần(thẻ) lại với nhau bên trong HTML.

 2. Thẻ Class và Id. Sự Khác biệt giữa chúng:

3. Một số code cơ bản khác: 

a. Canh giữa, canh phải:

<div style=”text-align:center;”>Nội_dung</div>

b. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ
Cái này khá là đơn giản, như mình sử dụng các nút công cụ ở phần soạn bài viết đấy. Thay vì mình bôi chọn văn bản và click nút để cho văn bản đậm, nghiêng, gạch chân. Thì ở đây code, ta phải bỏ văn bản vào giữa 2 thẻ đóng mở đó là được.

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

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

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

 d. 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”.

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

f. 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″/>

    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>

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

</div> </div> </div>

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

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

</div> </td><td class=”column_2″ style=”font:12px Tahoma; color:#000000;width:120px;padding:4px;” valign=”top”><div class=”column_2“>

</div> </td></tr> </tbody></table>

</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">

</div>

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

<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

4. Ảnh rõ hơn khi rê chuột vào

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

b. Ả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"/>

    Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.

Ví dụ:

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

b. Ả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ụ:
6. 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

<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>

    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 🙂 
8. Các loại đường viền | border: 1px #ccc solid;

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;

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, …)

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

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

Với ký tự < phải đổi thành &lt;
Với ký tự > phải đổi thành &gt;
Với ký tự & phải đổi thành &amp;
Với khoảng trắng phải đổi thành &nbsp;

    &lt; phải đổi thành &amp;lt;
&gt; phải đổi thành &amp;gt;
&amp; phải đổi thành &amp;amp;

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
…
</b:if>

<b:if cond=’data:blog.pageType == “item”‘>
…
</b:if>

<b:if cond=’data:blog.pageType == “index”‘>
…
</b:if>

<b:if cond=’data:blog.pageType == “archive”‘>
…
</b:if>

<b:if cond=’data:blog.pageType == “static_page”‘>
…
</b:if>

<b:if cond=’data:blog.url == “URL_của_trang_riêng_biệt“‘>
…
</b:if>

<b:if cond=’data:blog.pageType != “item”‘>
…
</b:if>

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

<script src=’Link_File_JS‘ type=’text/javascript’/>

<script type='text/javascript'>
//<![CDATA[

//]]> </script>

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