Thư viện

Trải nghiệm

Thứ Bảy, tháng 4 21, 2012

Những Code Thông Dụng Cho Blogspot

Một số code thông dụng thường sử dụng khi thiết kế blogspot mà các bạ chưa biết.

Chia sẻ:
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.

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 hoặc = left cho căn trái

3. Định dạng chữ: Đậm, Nghiê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_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ụ:
Wellcome To Namkna’s Blog

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, 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.6opacity=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 :)

Ví dụ: Xem tại đây

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>

Sau khi thêm song công việc tiếp theo là cài đặt để khung nội quy đó luôn hiển thị trên box nhận xét, để làm được điều đó bạn xem bài viết sau: Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot 
Chúc thành công!.

129 nhận xét:

  1. Cho mình hỏi ở code thứ 18: giờ mình chỉ muốn hiển thị một phần của trang web thì phải làm thế nào. Như ví dụ của bạn, giờ mình chỉ muốn hiển thị thanh Tools (hiển thị full frame, không có thanh trượt)

    Trả lờiXóa
  2. Cám ơn namkna ! Các nội dung của bạn rất hữu ích !

    Trả lờiXóa
  3. @chi lagirl Bạn đổi scrolling=yes thành scrolling=no

    - Còn muốn hiển thị một phần phải sử dụng Scip/

    Trả lờiXóa
  4. @presenter Tran rất vui vì nó hữu ích với bạn.

    Trả lờiXóa
  5. bạn ơi cho mình hỏi lám sao để chèn đc cái player youtube thế mình mới mày mò về cái này nên ko biết gì cả ???? :)) muốn áp dụng mấy cái code thì vào chỗ nào thế bạn >> THAnKS nhiều

    Trả lờiXóa
    Trả lời
    1. Bạn xem bài hướng dẫn này:
      http://namkna.blogspot.com/2011/01/cach-bao-mat-trong-youtobe.html

      Xóa
  6. namknv có bài hướng dẫn làm hiệu ứng link đỗ bóng cho blog ko nhỉ ? làm ơn hướng dẫn mình với

    Trả lờiXóa
    Trả lời
    1. Bạn sử dụng

      <a href="http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html" style="text-shadow:1px 1px 1px #000">Mã hóa Code</a>

      Xóa
  7. nếu mình không mã hóa code thì sao nhỉ ?

    Trả lờiXóa
  8. nếu mình muốn thay đổi mặc định cho tất cả link tron một blog thì sao nhỉ

    Trả lờiXóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. Namkna cho mình hỏi: Mình chèn đến hơn 1 chục tiện ích dạng Javascript ( tra cứu phong thủy ) vào BLOG CỦA MÌNH khiến cho trang chủ trở nên ì ạch và dài lê thê ( trông vừa xấu vừa bất tiện). Namkna có cách nào mã hóa các tiện ích ấy để chèn vào trang viết để mình có thể gom tất cả các tiện ích ấy vào một trang riêng biệt trên blog được không? Nếu bạn làm được, mình mong được bạn chỉ dẫn cho mình nhé! Cảm ơn bạn!...

    Trả lờiXóa
  11. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  12. Mình làm được rồi. Cảm ơn bạn nha!...

    Trả lờiXóa
  13. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. Oke mình sẽ ghé qua. Nhưng bạn không nên đạt nhiều link như thế này :??

      Xóa
  14. Nam cho mình hỏi là muốn thay đổi kích thước của header theo ý mình thì thêm code nào trong CSS, vì mình đang muốn cái header của mình nó sát vào lề bên trái +bên phải. hiện tại nó đang hơi bị lơ lửng ở giữa và thừa ra những khoảng trống ở 2 bên trông nó hơi chuối.

    Trả lờiXóa
    Trả lời
    1. 1- Xác định id chứa header., thường có dạng: #header hay #header-wrapper. Mình ví dụ id header blog mình như sau:

      #header-wrapper{width:980px;margin:0}

      Bạn chỉ cần thêm 2 thuộc tính sau:

      margin-left:-10px;
      margin-right:-20px

      khi đó ta được như sau:

      #header-wrapper{width:980px;margin-left:-10px;margin-right:-20px}

      Xóa
  15. OK mình làm được rồi. , tuy nhiên sau khi margin như vậy và mình tô màu nền cho header thì cái phần màu ấy nó lại chỉ được tô vào vị trí và kích thước của header cũ (tức là cái header mặc định của temp ấy) Như vậy là sao?

    Trả lờiXóa
    Trả lời
    1. bạn thêm thuộc tính background; vào luôn phần id đó ví dụ:

      #header-wrapper{width:980px;margin-left:-10px;margin-right:-20px;;background:#ddd}

      Xóa
  16. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  17. Bạn cho mình hỏi là làm sao để auto resize cho phù hợp với màn hình của người đọc . Chứ mình làm wap này nó không full ra màn hình code mình lấy trên mạng www.fpthuevn.com bạn chỉ mình với thanks

    Trả lờiXóa
  18. Cho em hỏi cái làm sao để viết cho trang trong blogger, em viết bài viết nó hiện ở trang chủ không à

    Trả lờiXóa
    Trả lời
    1. Với các trang tĩnh thì nó không hiện ở trang chủ được em ak. Chỉ có các bài viết mới hiện ở trang củ được thôi.

      Nếu em muốn thực hiện như vậy chỉ có thể tạo một tiện ích và viết bài vào nha.

      Xóa
  19. Bạn cho mình hỏi cái blog của mình khi viết thẻ li để chấm đầu dòng thì khi xuất bản nó không hiển thị được.mặc dù khi viết nó vẫn có.

    Trả lờiXóa
    Trả lời
    1. Trong file css này của bạn:
      http://s0.wp.com/wp-content/mu-plugins/global-print/global-print.css?m=1335386953g

      hãy sửa đoạn:

      p, ul, ol, li, dl, dt, dd, blockquote, table, fieldset{margin:0 !important;padding:0 !important;border:0 none !important;float:none !important;position:static !important;height:auto !important;width:auto !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;}a, span, time, code, small{border:0 none !important;float:none !important;display:inline !important;}

      thành:

      p, ul, ol, dl, dt, dd, blockquote, table, fieldset{margin:0 !important;padding:0 !important;border:0 none !important;float:none !important;position:static !important;height:auto !important;width:auto !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;}a, span, time, code, small{border:0 none !important;float:none !important;display:inline !important;}

      Xóa
    2. xin lỗi a nam e đưa nhầm web.ý em muốn hỏi trang http://www.webcongnghe.org mới đúng.phiền a xem giúp em.cảm ơn a rất nhiều!

      Xóa
    3. Em xóa đoạn này đi nha:

      ul, ol, dl, li {padding: 0;margin: 0;list-style:none;}

      Xóa
    4. oh.cảm ơn a nhiều lắm!!!

      Xóa
    5. tuy nhiên nếu bỏ dòng đó thì các check box ngoài trang chủ cũng bị lỗi!

      Xóa
    6. Còn tùy xem em đang dùng check box dạng gì em ak. Nếu không chứa thẻ li thì em có thể sửa đoạn đó:
      ul, ol, dl, li {padding: 0;margin: 0;list-style:none;}

      thành:

      ul, ol, dl {padding: 0;margin: 0;list-style:none;}

      Xóa
  20. Chào ban! Cảm ơn bạn đã chia sẻ những thủ thuật bổ ích!
    Bạn cho mình hỏi có cách nào ghi trực tiếp phân số hoặc CTHH vô blog mà không phải lấy code bên thứ ba không bạn!

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là có nhưng bạn sẽ phải am hiểu về HTML bạn ak. Vì nó sử dụng rất nhiều HTML và mã CSS để định dạng phân số như border

      Xóa
    2. Bạn có thể viết bài hướng dẫn được không. Thật tuyệt nếu qua bài HD của bạn, một người không biết gì như mình có thể biết một chút về HTML, từ đó có thể dễ dàng áp dụng những thủ thuật của bạn! Cảm ơn bạn!

      Xóa
  21. 1. Nam ơi mình đặt cái phần chữ ký ấy không được.
    28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng )
    giúp mình cái nhé.
    2. Với lại chỉ giúp mình chỉnh cái màu nền bài đăng mới nhé, blog mình làm bằng theme nên không biết chỉnh ở đâu. blog mình là http://www.muabantien2usd.com/ thanks nhiều.

    Trả lờiXóa
    Trả lời
    1. 1- Mỗi blog thường có 2-4 đoạn <data:post.body/> bạn phải chèn đúng vị trí nó mơi hiển thị được nha bạn. Vì 2 đoạn còn lại 1 đoạn chỉ hiển thị trên mobile thôi,

      2- Màu nền bài đăng bạn chỉnh phần background ở đoạn code bên dưới:

      #outer-wrapper{width:960px;margin:0px auto 0px;padding:0px;text-align:left;background: url(http://2.bp.blogspot.com/-EpoDsMa2Mb8/UYMN_KU-15I/AAAAAAAAIC4/SHI1rg00aMw/s000/container-bg.png) left top repeat-x;}

      Trong đoạn code đó bạn có thể thay thế link ảnh thành link ảnh nền mà bạn muốn.

      Hoặc đổi nó thành mã màu để tăng tốc blog như:

      #outer-wrapper{width:960px;margin:0px auto 0px;padding:0px;text-align:left;background:#fff;}

      Bạn có thể thay đổi #fff thành mã màu mà bạn muốn nha :)

      Xóa
  22. Cho mình hỏi với: Mình muốn tạo 1 textbox đẻ nhập dữ liệu, 1 nút submit. Nếu người đọc đọc nhập đúng "Hay qua, toi muon xem" vào textbox và nhấn submit thì cho hiện nội dung. Nếu không thì ko hiện. Bạn có thể hướng dẫn được không? cám ơn bạn

    Trả lờiXóa
  23. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  24. Anh cho e hỏi làm sao để các nút này nằm trên 1 hàng được ạ cách nhau 2px
    Minh Họa

    Trả lờiXóa
    Trả lời
    1. Em chèn đoạn bên dưới vào trong tiện ích HTML6 đó nha:

      <style>
      DIV #HTML6{float:left;margin-left:2px}
      </style>

      Xóa
    2. vẫn ko dc a ơi, nó bị đẩy vô chứ ko có nằm trên 1 hàng

      Xóa
    3. Em sửa toàn bộ các đoạn có dạng

      style="width:75px; font-size:11px; margin:0px; "

      trog tiện ích đó thành

      style="width:75px; font-size:11px; margin:0px;float:left "

      Lưu lại và kiểm tra nha. anh đã test rồi đó.

      Xóa
    4. e đã làm dc rồi cảm ơn a nhiều ^^

      Xóa
    5. Không có gì đâu e.

      Xóa
  25. Cám ơn bạn đã chia sẻ. mình cũng đang học cách để làm cho blog này: http://www.lenamphong.com/ mà không hiện được ảnh trong các tin nhỏ, ảnh đại diện cho tin đó ạ. Bác nào biết chỉ giúp mình với.

    Trả lờiXóa
    Trả lời
    1. Ảnh phải được bạn tải trực tiếp lên trang blog của bạn nha.

      Xóa
  26. chỗ khung nội quy sao mình chèn code vào nó cứ báo lỗi thẻ /p, xóa pp đi thì lỗi div, b
    :if.......là sao b?

    Trả lờiXóa
  27. Bạn ơi bạn vào xem cho mình cái slide trượt ngang với. Sao nó lại hiện chữ ra như vậy? Thank you!

    Trả lờiXóa
  28. à trang của mình là: http://hotsunhot.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bài viết đó mình viết khá lâu rồi hiện nay để thêm khung nội quy nhận xét bạn soạn thảo trực tiếp trong phần nhận sét của blog như ảnh sau" XEM ẢNH NGAY


      Tiếp theo bạn kết hợp với thủ thuật này để khung nội quy luôn luôn trên nhận xét nha:

      Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot

      Xóa
  29. Bạn cho mình hỏi, sao blog mình cứ hiện lên dòng này mỗi khi mình mở template lên nhỉ, nó là cái gì, vì trước đây không có: cannot read property '0' of undefined

    Trả lờiXóa
    Trả lời
    1. Mình đã kiểm tra trang của bạn không thấy có dòng như bạn nói,

      Thông báo đó do Jquery không nhận dạng được thuộc tính trong file javar bạn ak.

      Xóa
  30. Cảm ơn Namkna. À, bạn ơi có cách nào để chia ô vuông đầu tiên bên trái trang chủ làm 2 phần được không (phần ảnh to và phần liệt kê tên bài). Vì mình muốn có thể có 2 nhãn riêng cho nó chứ không 1 nhãn như hiện tại.

    Trả lờiXóa
  31. Bạn ơi hiện tượng như vậy có ảnh hưởng gì đến blog ko và cách khắc phục nó như thế nào?

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là có ảnh hưởng đôi chút, cách khắc phục là loại bỏ đoạn mã lỗi đó đi hoặc mã hóa nó lại để trình duyệt khỏi bảo lỗi.

      Chia cột thì đơn giản thôi, Bạn chỉ cần chèn đoạn code bên dưới vào vị trí bạn muốn chía cột nha;
      <style>
      .namkna-colume{width:100%;padding:10px;margin:0 auto}
      .namkna-colume{width:45%;padding:10px;float:left;}
      .namkna-colume{width:100%;padding:10px;float:left;margin-left:10px}
      </style>
      <div class='namkna-colume'>
      <div class='namkna-colume1'>
      Nội dung cột 1
      </div>
      <div class='namkna-colume2'>
      Nội dung cột 2
      </div>
      </div>

      Xóa
  32. Cảm ơn Namkna rất nhiều. Mình làm được rồi!

    Trả lờiXóa
    Trả lời
    1. Không có gì đâu, mà đoạn trên mình nhầm một đoạn css bạn chỉnh

      .namkna-colume{width:45%;padding:10px;float:left;}
      .namkna-colume{width:100%;padding:10px;float:left;margin-left:10px}

      lại thành:

      .namkna-colume1{width:45%;padding:10px;float:left;}
      .namkna-colume2{width:100%;padding:10px;float:left;margin-left:10px}

      Xóa
  33. Namkna cho mình hỏi là trong blog của mình, có widget mục Mới nhất, có cách nào để thay Icon đầu dòng mỗi tiêu đề bằng một đường link ảnh được không?

    Trả lờiXóa
    Trả lời
    1. Trang chủ của bạn có rất nhiều mục bài mới nhất khác nhau ý bạn muốn đổi phần nào thế.

      Xóa
  34. Thật làm phiền bạn quá! Cái mục Mới nhất nằm trên phần đầu tiên bên trái ấy bạn ạ! Nếu được bạn chỉ cho mình cách chỉnh chữ Mới nhất lên sát với lề của nó với (vì nó hơi nằm xuống dưới). Mình cảm ơn bạn trước!

    Trả lờiXóa
    Trả lời
    1. Bạn có thể chỉnh chữ đó lên trên bằng cách thêm đoạn bên dưới vào trước ]]></b:skin>

      .box-left a{margin-top:-10px !important}

      chỉnh lại -10 cho thích hợp nha.

      Xóa
  35. Mục Mới nhất nằm giữa hai bên là ảnh ấy bạn nhé. Nó có cái dòng chữ Mới nhất ấy nhé!

    Trả lờiXóa
    Trả lời
    1. Bạn tìm đoạn:

      icon = "*";

      thay dấu sao thành link ảnh của bạn nha. nên lấy ảnh có kích thước phù hợp khoảng 30x30px

      Xóa
  36. Mình thay vào nhưng không được bạn ạ! Mình thay vào trong widget, chỗ có icon ấy!

    Trả lờiXóa
    Trả lời
    1. Phần icon này chưa được khai báo.

      Bạn đổi:

      icon = "*";

      thành:

      icon = "";

      và sử dụng đoạn css sau trước thẻ ]]></b:skin>

      .mota a{margin:0 0 0 8px;background:url(http://2.bp.blogspot.com/-8qXJMKrYQAU/Ud-_WIn5wmI/AAAAAAAALm8/WEGH3vYIPdw/s1600/li_namkna-blogspot-com.png) 0 5px no-repeat;padding-left:15px}
      .mota a:hover{margin:0 0 0 8px;background:url(http://2.bp.blogspot.com/-8qXJMKrYQAU/Ud-_WIn5wmI/AAAAAAAALm8/WEGH3vYIPdw/s1600/li_namkna-blogspot-com.png) 0 5px no-repeat;padding-left:15px}

      Xóa
  37. Không được bạn ạ. Khoảng cách từ các dòng so với dòng Bài mới cũng nằm cách xuống phía dưới mà mình không chỉnh lại được như ban đầu.

    Trả lờiXóa
    Trả lời
    1. Oke mình đã kiểm tra lại Tiện ích bài mới nhất có hiệu ứng tooltip đó và đã cập nhật trong bài viết đó. Bạn có thể thêm icon bằng cách sửa đoạn:

      icon = "*";

      thành:

      icon = " <img src='http://2.bp.blogspot.com/-8qXJMKrYQAU/Ud-_WIn5wmI/AAAAAAAALm8/WEGH3vYIPdw/s1600/li_namkna-blogspot-com.png'/> ";

      Lưu lại và kiểm tra kết quả nha.

      Xóa
  38. Được rồi, mình cảm ơn Namkna rất nhiều. Chỉ có cái chữ Bài mới thì vẫn chưa nhích lên được.

    Trả lờiXóa
    Trả lời
    1. Bạn tìm đoạn:

      <span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Mới nhất</span>

      và thêm thuộc tính margin-top vào như sau:

      <span style="color:#339966;margin-top:-10px; font:12pt Tahoma; margin-left:12px;">Mới nhất</span>

      Chỉnh lại margin-top:-10px; cho phù hợp nha.

      Xóa
  39. Cho mình hỏi : Font chữ nào thì tốt cho SEO nhất ?

    Trả lờiXóa
  40. bạn giúp mình với bài viết của mình font chữ khi viết, xuống dòng mà toàn bị định dạng sẵn
    style="font-family: Arial,Helvetica,sans-serif;" . Sửa từng bài 1 rất mất thời gian. Bạn giúp mình tìm đoạn code mà thay thế nó trong template để sửa dứt điểm tất cả các bài trong blog mình sao cho font chữ tốt cho SEO. blog mình là nhamoitot.blogspot.com

    Trả lờiXóa
    Trả lời
    1. 1. đối với SEO font chữ không quan trọng, quan trọng là nội dung. Với lại hiện nay tiếng việt chỉ có một số font hiển thị được đầy đủ các ký tự và dấu. Bạn hãy chọn font mà bạn thích tại trang của google font.

      2. Đoạn đó mặc định được thêm vào trang của bạn. Bạn có thể định dạng lại bằng ách sử dụng đoạn code code bên dưới:

      body{font-family:Arial;font-size:14px;}

      Arial là font bạn sử dụng nha.
      14px là cỡ chữ.

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
    3. Nhưng Namkna ơi ? thêm nó vào chỗ nào của template, hay search (ctrl + F ) tìm đoạn code mặc định sẵn kia rồi thay hết tất cả ? hay chỉ post-body thôi ?

      Xóa
    4. Khi đăng bài trên blog thì đoạn đó được tự động thêm vào. do vậy để sửa thì mất thời gian do vậy tao thêm đoạn mình bảo vào trước thẻ ]]></b:skin> để định dạng lại font và cỡ chữ.

      Xóa
    5. ok Nam ! mình chỉ sợ nhiều code quá template nó nặng nề. Nếu được Nam có thể viết bài nào chuẩn chỉnh font chữ cho tất cả các bài viết thì tốt quá ! Vì như thế theo mình biết thì tỉ lệ "Text/HTML ratio" cao làm viết tốt cho SEO Mình làm được rất nhiều thứ thông qua blog của bạn ! Có vấn đề gì mình sẽ hỏi bạn tiếp nhé !
      Cảm ơn bạn !

      Xóa
  41. Namkna ơi, mình đã làm theo hướng dẫn rồi mà vẫn không nhích được cái dòng chữ đó. Ngay cả mình có chỉnh số 10 khác đi.
    Mình cũng muốn hỏi là có cách nào để điều chỉnh bài xem nhiều nhất theo ngày không? (Vì trong tiện ích bài xem nhiều nhất của blog thì nó chỉ thống kê theo tuần), mà mình thì muốn nó thống kê theo ngày.

    Trả lờiXóa
    Trả lời
    1. Thay vì chèn code bài viết vào tiện ích HTML bạn hãy chèn trực tiếp vào trag sau đoạn:

      <div class='namkna-colume2'>

      Xóa
    2. Tiện ích popularpost hiện tại chỉ có thể thống kê theo tuần và tháng thôi bạn ak. ko chỉnh sửa được theo ngày đâu.

      Xóa
  42. Nam ơi ! Cho mình hỏi sự khác nhau giữa những nội dung này.
    data:blog.pageTitle; data:blog.pageName; data:blog.title; data:blog.homepageUrl; data:blog.pageTitle; data:blog.url; data:post.link; data:post.title; data:post.url;
    post-title;
    Mình muốn tìm hiểu về sâu một tí mà đôi lúc nhầm lẫn hết. Có rất nhiều "data:" như thế này. Có phải những tên này được trình duyệt tự hiểu và là "tên riêng" được tham chiếu theo chuẩn HTML đang sử dụng, chứ không phải tham chiếu CSS xuống html ở thẻ body như mấy thẻ class hay ID đúng ko ? Bạn ghép cụm giống nhau và giải thích ý nghĩa cụm đó cho mình nhé ? Nếu được bạn có tài liệu nào chia sẻ giúp mình hiểu có thể tự làm được template bạn chia sẻ vào mail này cho mình : ttda.05@gmail.com

    Trả lờiXóa
    Trả lời
    1. Phần đó có nhiều người viết bạn có thể xem bài viết này: XEM

      Xóa
  43. anh Nam giúp em chỉnh sửa khoảng cách lề trang blog giúp em với, khoảng trống ở phía trên nhiều quá và em muốn cái Menu nó sát với hình ảnh phí trên và sát với phần bố cục phía dưới. đây là blog của em diaocphatdat.com, em cảm ơn anh Nam nhiều

    Trả lờiXóa
    Trả lời
    1. 1. Em sửa đoạn:

      .main-inner {
      padding-top: 65px;
      }

      thành:

      .main-inner {
      padding-top: 0px;
      }

      hoặc xoá nó đi cũng được.

      2. Thêm vào trước thẻ ]]></b:skin>

      đoạn code sau:

      #navbar{height:0px !important; display:none !important}

      Xóa
    2. em cảm ơn anh Nam nhiều, nhưng còn chỗ Menu nó vẫn chưa sát lại được anh chỉ em tiếp với nhé

      Xóa
    3. Code menu đó thay vì chèn vào tiện ích HTML em chèn thẳng vào mẫu trước đoạn code sau:

      <div class='main-outer'>

      Xóa
    4. em thử rồi nó vẫn bị ở khúc trên nữa anh Nam ơi, em vào trong Bố Cục thì thấy có cái tiện ích "cấu hình tiêu đề" em ẩn nó trước rồi nhưng chỗ chống đó nằm đúng chỗ tiện ích "cấu hình tiêu đề" làm sao để xoá hẳn nó đi để nó không bị trống nữa? cảm ơn anh Nam đã chỉ em

      Xóa
    5. Đẻ xoá tiện ích đó em chỉ cần xác định Id và vào trong mẫu xoá nó đi, tương tự như xoá tiện ích Attribution trong blogspot

      -p/s: E sửa đoạn bên dưới:

      ul#navlist {
      display: inline;
      list-style: none;
      }

      thành:

      ul#navlist {
      display: inline;
      list-style: none;
      margin: 0 auto;
      }

      để căn menu đúng vị trí giữa không bị lệch.

      Xóa
    6. Em cảm ơn anh Nam nhiều nhé, em làm được rồi

      Xóa
  44. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  45. Namkna ơi như lần trước bạn đã hướng dẫn mình làm để nhích chữ Bài mới lên sát đầu mép đầu trang nhưng vẫn không được, dù mình đã làm theo rồi.
    Blog của mình là: http://hotsunhot.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Phần bài mới của bạn đặt trong tiện ích HTML109 do vậy bạn có thể kéo cả tiện ích đó lên trên bằng cách. dùng đoạn code:

      #HTML109{
      margin-top:-20px;
      }

      Xóa
  46. Mà Namkna ơi cái code mà bạn bảo thì không biết đặt nó vào đâu được nhỉ. Mình không biết đặt nó vào dâu. Bạn chỉ cụ thể cho mình với nhé! Thanks Namkna nhiều!

    Trả lờiXóa
  47. Namkna ơi, cái cái code đó thì chèn vào đâu được nhỉ? Cái chữ Bài mới vẫn chưa kéo lên được. Namkna chỉ rõ cho mình với. Cảm ơn Namkna nhiều!

    Trả lờiXóa
  48. anh hướng dẫn giúp em tạo gạch chân co tiêu đề bài đăng blogger như trong hình với cảm ơn anh
    link hình http://4.bp.blogspot.com/-uaqJjfh_uyU/VK0hmglBt0I/AAAAAAAAAPg/22b9ZmtHjIU/s1600/3333.PNG

    Trả lờiXóa
  49. mình chèn 1 web html vào nhưng sidebar k ẩn dc.....bạn giúp mình đc k...blog của mình là
    anhcuonghd93.blogspot.com

    Trả lờiXóa
  50. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  51. Bạn ơi cho mình hỏi mình muốn làm hiệu ứng khi dê chuột vào ảnh to cho cả trang blog như trang này thì làm như thế nào hả bạn http://blogbanhangv4.blogspot.com/ . Xin lỗi vì không biết đặt câu hỏi ở đâu. Rất mong được bạn giúp đỡ.

    Trả lờiXóa
  52. Bác nào có deco xem phong thuỷ nhà cho em xin nhé! em cám ơn các bác nhiều
    Trân trọng
    chung cư goldmark city
    chung cư the garden hill

    Trả lờiXóa
  53. Bác nào có deco xem phong thuỷ nhà cho em xin nhé! em cám ơn các bác nhiều
    Trân trọng
    chung cư goldmark city
    chung cư the garden hill

    Trả lờiXóa
  54. Really Nice Information,Thank You Very Much For Sharing.
    Wordpress Development Company

    Trả lờiXóa
  55. Bài viết của bạn rất bổ ích cho những người mới lập blog như mình.
    Tôi nhờ bạn một việc nhé: Tôi là công chức, lớn tuổi lại không được học về IT. Vừa qua tôi mày mò lập blog và tìm kiếm xin một số mẫu tiện ích của bạn bè về xây nhà nhưng thiếu sót nhiều quá.
    Tôi lập blog cũng nhằm mục đích giúp đỡ các gia đình thương binh liệt sỹ xem, tìm kiếm thông tin mộ liệt sỹ là chủ yếu.
    Bạn có thể bỏ chút thời gian giúp mình chỉnh sửa lại cái html hay CSS gì đó cho Templat chuẩn được không vì mình biết nó bị lỗi nhiều. Tôi ở Quảng Trị. ĐT của tôi 0914222567 - Tôi tên là Hoàn

    Trả lờiXóa
  56. bạn chỉ mình làm hiệu ứng nut play khi rê chuột vào ảnh được không ah?

    Trả lờiXóa
  57. bạn ơi, thủ thuật chuyển tab như thế này thì làm như thế nào bạn, mình có thử kết hợp tạo bảng với nút ẩn nội dung mà ko như ý
    https://www.skidrowreloaded.com/final-fantasy-xiii-2-codex/
    phần description với system required đó

    Trả lờiXóa
  58. lâu rồi không vào thăm nhà mình - ad khỏe chứ

    Trả lờiXóa
  59. Bài viết hữu ích, thanks bạn!

    Trả lờiXóa
  60. Bài viết hữu ích, thanks bạn!

    Trả lờiXóa
  61. Cái bookmark đến vị trí bài viết mình làm trên điện thoại ko được vậy nhỉ?

    Trả lờiXóa
  62. Cái bookmark đến vị trí bài viết mình làm trên điện thoại ko được vậy nhỉ?

    Trả lờiXóa
  63. Anh ơi cái code thứ 25 sau khi thêm vào thì làm sao để biết địa chỉ IP của những người truy cập
    Họ có báo về cho mình không?

    Trả lờiXóa
  64. Mình gặp vấn ddề ở tiêu để new page
    Tiêu đề dài nó cứ bị xuống 2 tới 3 dòng vì conten left chỉ rộng 300px
    Admin cho mình hỏi có cách nào kiểm soát tiêu đề chỉ hiện 1 dòng, còn lại hiện ...
    Ví dụ: Dịch vụ thiết kế web bán hàng chuẩn SEO
    Bị xuống thành 2 dòng

    Mong muốn hiển thị 1 dòng (thay thế đoạn dư bằng dấu ...)

    Dịch vụ thiết kế web...

    Trả lờiXóa
  65. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  66. Bạn ơi mình muốn ảnh bài viết được bo tròn 4 cạnh thì làm sao ạ?, Mình thấy mấy trang web ảnh nhìn trông rất bóng và đẹp.

    Trả lờiXóa
  67. Nam ơi, làm ơn cho mình hỏi.Mình làm thêm 1 cái HTML để đăng nhập bằng hình ảnh..nhưng sau khi up lên dưới chân hình ảnh xuất hiện mấy cái gạch dưới chân hình.Mình sữa size thanh bên để cân chĩnh lại mà vẫn không được.Bạn biết làm ơn chỉ giúp mình ha.rất cảm ơn bạn.
    Link ảnh :http://4.bp.blogspot.com/-aPlE26A27OY/Vpo9_9nn9vI/AAAAAAAAAks/hOGvpl1pO0E/s1600/Ch%25C6%25B0a%2Bc%25C3%25B3%2Bt%25C3%25AAn.png

    Trả lờiXóa
  68. Bài viết rất hay và ý nghĩa. Cảm ơn Admin đã chia sẻ nhé, mong có nhiều bài viết hay như thế này nữa để trao dồi kiến thức, hiện tại mình đang phát triển Blog này: Bán và cho thuê Biệt Thự The Oasis Bình Dương các bạn có thể tới thăm và cho ý kiến chúng ta cùng học hỏi nha

    Trả lờiXóa
  69. a có thể hướng dẫn e thu hẹp khoản cách của các widget với nhau được không ạ?

    Trả lờiXóa
  70. bạn ơi cho mình hỏi ! sao cái nut play video ở blog mình nó lại không ở giữa nhỉ

    Trả lờiXóa