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.

     Hôm nay đầu tiên mình xin hướng dẫn các bạn code thông dụng nhất để bắt đầu cho chỉnh sửa Blog của bạn nhé. Nhiều người biết đến nó rồi, nhưng một thời gian không dùng đến rất dễ quên, nên mình viết bài này hy vọng có ích cho các bạn.
Cơ bản các thẻ code luôn có một thẻ mở <tenthe> và một thẻ đóng </tenthe>.
* KT+: Bài viết mình có tham khảo một số trang và cả kinh nghiệm sử dụng code của mình để chia sẻ bài viết cùng các bạn có ích hơn
 
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.
      – Theo mình hiểu về cơ bản, thì hai thẻ này độ sử dụng là chiếm đa số, trong đó lệnh <div></div> dùng nhiều hơn. Nó cho phép nhóm các thành phần thẻ khác chứa trong nó lại với nhau thành một thể thống nhất. Cũng như <span>, <div> cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đích nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử.
Nói để dễ hiểu hơn là nó dùng như mình muốn kẻ một ô chứa nội dung khác. Nếu muốn ô chứa đó rộng bao nhiêu thêm thẻ width=””, cao bao nhiêu thì thêm thẻ height=””, muốn ô có đường viền thì thêm thẻ border=””, muốn nội dung căn ra giữa ô thì thêm align=”center” hoặc trái align=”left”, phải align=”right”..v..v. Nói chung vô vàn nhưng hiểu nôm na cơ bản thế thôi
 2. Thẻ Class và Id. Sự Khác biệt giữa chúng:
       – Blog sử dụng kết hợp <div></div> trong CSS để dễ làm việc hơn, làm code gắn gọn và có quy tắc hơn. Dễ nhìn thấy lệnh này khi nó dùng để chia trang ra thành các khối khác nhau.
Ví dụ ở blog ta thấy thường có các khối như:
Phần trên cùng: <div class=”header-wrapper” id=”header-wrapper”>
Phần giữa:<div class=”content-wrapper” id=”content-wrapper”>
+  Ở đây thẻ class=“header-wrapper” có thể dùng khai báo nhiều lần lặp đi lặp lại được nhưng id=”header-wrapper” thì  không. Class đi với dấu “#” còn Id đi với dấu”.” ở đầu biến trong phần khai báo CSS. Đó là điều khác biệt mà một số bạn hay hỏi về class và id.
Theo ví dụ trên:
Ví Dụ Đúng:
Phần trên cùng: <div class=”header-wrapper” id=”header-wrapper”>
Phần giữa:<div class=”header-wrapper”  id=”content-wrapper”>
Ví Dụ Sai:
Phần trên cùng: <div class=”header-wrapper” id=”header-wrapper”>
Phần giữa:<div class=”content-wrapper”  id=”header-wrapper“>
     Tiếp tục mình sẽ ví dụ giả định ở phần khai báo CSS như sau:
#header-wrapper {
float:middle;
width:450px;
height:450px;
}
        Sử dụng ở phần CSS mình khai báo cho class=”header-wrapper” các thẻ phần tử như float:middle; width:450px; height:450px; ở lần đầu rồi, thì sau này khi muốn sử dụng lại các thẻ style này lại cho bất kỳ thẻ <div></div> nào chỉ cần bỏ class=”header-wrapper”  nào nó là cũng có kiểu style ô giống như vậy. Vừa gọn, vừa khoẻ phải không ?
2. Một số code cơ bản khác: 
a. Canh giữa, canh phải:
Đây là code canh giữa, phải, trái cho chữ(text): giữa(center), phải(right), trái(left). Bạn muốn căn phía nào thì thay từ Tiếng Anh phía đó vào sau text-align:

<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
3. Đị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>

4. Dấu chấm vô dòng con, đánh số đầu dòng

  Cái này nó cũng có ở các nút công cụ ở phần soạn bài viết. cách dùng tương tự trên.

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>

 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: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ụ:
11. Chèn Nhạc Vào Bài Viết:
      – Hiện nay ở các trang nhạc trực tuyến đều hổ trợ code này nhằm giúp chúng ta nhúng nhạc vào web, nên các bạn để ý là thấy nếu không có thể dùng code dùng dưới đây.
<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, 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>

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

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 🙂 

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

Dashed – – – – – – – – – – – – – – – – –
Solid _____________________
Dotted …………………………….

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

21. 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;
}

22. 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;

/*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ữ

23. Các loại định dạng list | … ul {list-style-type:none;}

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

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

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

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

26. Cách mã hóa code

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;

Để post các chú thích kí tự trên lên blog được thì:

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

27. Các lệnh điều kiện <b:if cond= … </b:if>

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>

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

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

29. Script chèn file .js vào blog

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

30. Script chèn trực tiếp nội dung file .js vào blog

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

//]]> </script>

31. Thêm nhanh khung hướng dẫn hay nội quy comment

– Bạn có thể vào trong phần nội dung nhận xét để soạn thảo nội quy cho phần nhận xét của bạn, xem hình.
Thêm nhanh khung hướng dẫn hay nội quy comment
– Ví dụ mình soạn thảo nôi dung như sau:
<!--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>

vlthat.com là tên miền tạm trước đây của kienthucplus.vn đã không còn sử dụng