Với một người thiết kế web thông thạo css thì 2 thuộc tính  margin và padding có vẻ không có gì mơ hồ, nhưng đối với một người mới tiếp cận với css thì việc phân biệt cũng như sử dụng 2 thuộc tính này hay bị nhầm lẫn. Sau đây là một bài viết ngắn giúp các bạn phân biệt 2 thuộc tính này, sử dụng chúng thành thạo hơn trong làm web.

1. Margin
Nghĩa là lề, căn lề, trong css nó dùng để điều chỉnh khoản cách giữa các thành phần của trang web:

Sử dụng:
Thuộc tính Margin có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng theo các cách sau:

Cách 1: margin 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: margin: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: margin: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: margin: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 8px;
margin-left: 15px;

2. Padding
Thuộc tính padding tuy có cách dùng tương tự thuộc tính margin nhưng lại có ý nghĩa khác, nó dùng để phân cách giữa nội dung và viền (border) của một thành phần.

Sử dụng:
Thuộc tính Padding cũng có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng ương tự padding:

Cách 1: padding 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: padding: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: padding: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: padding: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 15px;

Lưu ý: Khi sử dụng thuộc tính padding thì độ lớn của một thành phần sẻ bao gồm cả padding, còn nếu sử dụng margin thì độ lớn của thành phần không đổi, giá trị của margin chỉ là khoản cách bên ngoài thành phần.

Còn bây giờ nếu các bạn đã hiểu thì bắt tay vào thực hiện một file html sử dụng padding và margin xem nhé.

Chúc các bạn thực hiện tốt!

Xenforo hiện nay được nhiều webmaster ưa chuộng vị tính năng hay, giao diện đẹp, load nhanh,... nhưng nhìn chung vẫn còn nhiều điểm bạn phải tự tay làm mới có được 1 diễn đàn ưng ý. Sau đây mời các bạn xem bài hướng dẫn cách thay đổi khung đăng ký thành viên trong diễn đàn Xenforo thành dạng popup để tự tay mình thay đổi giao diện đăng ký cho diễn dàn gọn gàng và pro hơn nhé.

Bước 1: Đăng nhập vào admin => Template => sidebar_visitor_panel => Tìm đoạn code sau:

<div class="section loginButton">
        <div class="secondaryContent">
            <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
        </div>
    </div>

và thay thế bằng đoạn code sau:

<div class="section loginButton">      
    <div class="secondaryContent">
        <label id="SignupButton"><a href="{xen:link 'register'}" class="inner OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

=> Lưu lại

Bước 2: Vào Template => register_form => Tìm đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

và thay thế bằng đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator formOverlay"

Lưu lại và ra trang chủ nhấn F5 và nhấn nút Đăng ký bên cột phải để xem kết quả nhé.

Chúc các bạn thành công!

Giao diện mặc định khi muốn đăng nhập ở Xenforo là đổ xuống từ trên header, nhưng nếu bạn muốn thay đổi thành dạng pop up thì cũng không mấy khó khăn. Bạn chỉ cần làm theo các bước của bài hướng dẫn sau thì rất dễ dàng.

Bước 1: Đăng nhập Admin CP => Appearance => Templates => login_bar
 => Thêm đoạn code màu đỏ vào vị trí như bên dưới

<xen:require css="login_bar.css" />

<script>
XenForo.LoginBar = function(a){};
</script>

<div id="loginBar">
 <div class="pageWidth">
  <div class="pageContent"> 
   <h3 id="loginBarHandle">
    <label for="LoginControl"><a href="{xen:link login}" class="OverlayTrigger concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
   </h3>
   
   <span class="helper"></span>

   <xen:edithint template="login_bar_form" />
  </div>
 </div>
</div>

=> Nhấn Save để lưu sửa đổi

 Bước 2: Vào Appearance => Templates => sidebar_visitor_panel
 => Thêm đoạn code màu đỏ vào vị trí như sau:

</div>
</div>

<xen:else />

<div class="section loginButton">  
 <div class="secondaryContent">
  <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
 </div>
</div>

</xen:if>

<xen:include template="ad_sidebar_below_visitor_panel" />

=> Nhấn Save để lưu sửa đổi

 Bước 3: Vào Appearance => Templates => EXTRA.css
 Thêm đoạn css sau:

.xenOverlay #pageLogin
    {

        background: rgba(0, 0, 0, 0.75);

        color: #ffffff;

        padding: 20px;

        border: 20px solid rgba(0, 0, 0, 0.25);

        border-radius: 20px;

        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    }

 => Nhấn Save để hoàn thành. Bây giờ bạn ra ngoài trang chủ, nhấn F5 để load lại trang và thử click đăng nhập xem kết quả nhé.
 

Chúc các bạn thành công!

Ai mới bắt đầu tự bước vào lĩnh vực SEO đều phải làm quen với các khái niệm, những thuật ngữ hay những tên gọi đặc biệt trong lĩnh vực SEO. Robots.txt không hẳn là một khái niệm gì mà nó đơn giản chỉ là một file dữ liệu trên host. Nhưng nó có ý nghĩa gì trong SEO? Cách tạo ra nó như thế nào? Sau đây mời các bạn tìm hiểu nó qua bài viết đơn giản.

Khái niệm:
Robots.txt: Là một file đặt trong thu mục Root trên host, file text này chứa các câu lệnh cho phép quản trị viên website có thể chỉ định quyền hạn truy cập vào những thư mục, file... của bọ tìm kiếm. Từ đó các công cụ tìm kiếm sẻ chỉ index những nội dung nào bạn muốn mà thôi.

Cách tạo và sử dụng file Robots.txt:
Để tạo file robots.txt  bạn chỉ cần sử dụng chương trình Notepad và gõ các câu lệnh đơn giản vào, sau đó lưu lại với tên robots.txt và upload lên thư mục Root của website là được.

3 lệnh cơ bản nhất của 1 tâp tin robots.txt:

User-agent: *
Allow: /index-ct/
Disallow: /admin/

Ý nghĩa:

- User-agent : Để xác định bot của công cụ tìm kiếm nào. Để dấu * là tất cả các công cụ tìm kiếm
- Allow: Cho phép bot vào thư mục, file
- Disallow: Không cho bot vào thư mục, file.

Lưu ý: 
- Bạn có thể thêm nhiều dòng để cho phép hoặc không cho phép bot truy cập ở nhiều thư mục hoặc file khác nhau.
- Không thay đổi trật tự của các dòng lệnh (User-agent luôn ở trên).
- Phân biệt chữ hoa chữ thường.
- Không được viết dư, thiếu khoảng trắng.
- Không nên chèn thêm bất kỳ ký tự nào khác ngoài các câu lệnh.
- Mỗi một câu lệnh nên viết trên 1 dòng.
- Không được để khoảng trắng ở đầu dòng lệnh


Chúc các bạn làm SEO tốt!

Là một người làm web chắc hẳn ai cũng đau đầu việc layout web chạy tốt trên tình duyệt này nhưng sang trình duyệt khác thì bị vỡ rất xấu. Vậy phải làm sao? Sau đây là cách đơn giản để fix mọi trình duyệt bằng  css, sau khi đọc bài hướng dẫn này chắc các bạn không phải lo về việc này nữa :))

1. Fix trình duyệt Internet Explorer
Cách 1:
Viết css cho từng ie, đặt trong thẻ <head> kiểm tra phiên bản ie tương ứng:

•    Tất cả phiên bản ie
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
•    Chạy với các trình duyệt khác, trừ trình duyệt ie
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
•    Chỉ chạy trên ie6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
•    Chỉ chạy trên ie7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Có thể kết hợp gt (greater than), gte (greater than or equal), lt (less than), lte (less than or equal)
VD: chỉ chạy trên các trình duyệt từ ie7 trở về sau

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Cách 2:
Hack css theo từng phiên bản ie
•    Chỉ chạy trên ie6: thêm "* html " trước khối css mà bạn định nghĩa
Ví dụ:

* html #div {
height: 500px;
}

•    Chỉ chạy trên ie7: thêm "*+html " trước khối css mà bạn định nghĩa
Ví dụ:

*+html #div {
height: 500px;
}

•    Chỉ chạy trên ie8
Ví dụ:

#div {
height: 500px\0/;
}

•    Không cho chạy trên ie6 và các phiên bản ie về trước
Ví dụ:

html > body #div {
height: 500px;
}

Cách 3:

.className
{
padding:10px\0/; /* chỉ chạy trên IE9 + IE8 */
}
@media all and (min-width:0) {
    .className { color:pink \0/; }  /* chỉ chạy trên IE9 */
}
 .className{padding:10px\9;} /* chỉ chạy trên IE8 */
.className{padding:10px\0;} /* chỉ chạy trên IE8 */


.className{*padding :10px ;} /* chỉ chạy trên IE7 */
hoặc
* + html .class{margin-left:20px;} /* chỉ chạy trên IE7 */

.className{_padding :10px ;}  /* chỉ chạy trên IE6 */
 hoặc
* html .logo{margin-left:10px;} /*chỉ chạy trên IE6 */

2. Fix trình duyệt Chrome

Cách  1: Sử dụng 1 file css riêng cho trình duyệt Chrome

<script type="text/javascript">
    if(navigator.userAgent.toLowerCase().match('chrome'))
    document.write('<link rel="stylesheet" type="text/css" href="files/chrome.css">');
    </script>

Cách 2 : Fix ngay trên file css chính

<style>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
div#search_form button
{
margin-left:-15px;
}
}
</style>

3. Fix trình duyệt Firefox

html>/**/body .className{margin-left:10px}

 Hoặc

@-moz-document url-prefix() {
.className {font-size: .6em;}}

4. Fix trình duyệt Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }

5. Fix trình duyệt Opera
 

@media all and (min-width:0px) {head~body .className {margin-left:10px;}}
/* version 9 và các version trước đó /*

Chúc các bạn thành công!

box-shadow là một thuộc tính css3 khá hay dùng để tạo bóng đổ cho một đối tượng bất kì mà trước kia chúng ta làm web phải dùng đến hiệu ứng của Photoshop sau đó cắt hình để làm. Sau đây là hướng dẫn sử dụng thuộc tính box-shadow trong css3, bài hướng dẫn chi tiết giúp bạn dễ dàng nắm bắt được cách dùng.

Đầu tiên là cách dùng như sau:

div
{
      box-shadow: 10px 10px 5px 5px  #999 inset;
}

Tương ứng với các giá trị phía dưới:

Selector
{
       box-shadow: h-shadow v-shadow blur spread color inset;
}

• Selector: Là đối trượng được chọn ví dụ như div, ul, li, a, class, id...
• shadow : Đổ bóng theo chiều ngang (đơn vị px).
• v-shadow: Đổ bóng theo chiều dọc (đơn vị px).
• blur : Độ mờ bóng đổ (đơn vị px).
• spread : Độ rộng của bóng đổ
• color : Màu bóng đổ
• inset: Đặt hiệu ứng bên trong đối tượng, nếu không dùng thuộc tính này thì mặc định bóng đổ sẻ ở bên ngoài đối tượng.

Ví dụ 1:

div
{
      box-shadow: 0px 0px 6px 6px #000;
}

Ví dụ 2:

div
{
     box-shadow: -5px -5px 5px 5px blue;
}

Ví dụ 3:

div
{
     box-shadow: 5px 5px 5px 5px red;
}

Lưu ý: Thuộc tính box-shadow là css3 nên chỉ hỗ trợ trên IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.

Chúc các bạn thành công!

Dreamweaver là phần mềm hỗ trợ soạn thảo, lập trình khá quen với người làm website nhưng có lẻ cũng ít người dùng đến phím tắt. Khi bạn dùng phím tắt thường xuyên việc soạn thảo của bạn sẻ trở nên dễ dàng hơn, tiết kiệm thời gian. Sau đây là danh sách các phím tắt trong Dreamweaver CS5 & CS5.5 để bạn tham khảo ngay hoặc download file PDF về để "ngâm cứu" dần :))

Insert
Non-Breaking Space ( )	Ctrl-Shift-Space
Line Break	Shift-Return
Image	Ctrl-Alt-I
Table	Ctrl-Alt-T
Modify
Quick Tag Editor	Ctrl-T
Show Code Navigator	Ctrl-Alt-Click
Working with Tables
Select individual (or multiple, discontinuous) table cells	Ctrl-click cell(s)
Select Table (with cursor inside the table)	Ctrl-A (may need to do twice)
Insert Row	Ctrl-M
Insert Column	Ctrl-Shift-A
Delete Row	Ctrl-Shift-M
Delete Column	Ctrl-Shift-hyphen(-)
Merge Selected Cells	Ctrl-Alt-M
Split Cell	Ctrl-Alt-S
Increase Column Span	Ctrl-Shift-]
Decrease Column Span	Ctrl-Shift-[
Add new row at bottom of table	With cursor in bottom right table cell, hit Tab
Working with Frames
Add a new frame to frameset	In the Frames panel select the frame, then in the document window Alt-drag frame border
Pull out solid frame (creates Nested Frameset)	Ctrl-drag frame border
Select a frame	Alt-click in frame
Select next frame or frameset	Alt-Right arrow
Select previous frame or frameset	Alt-Left arrow
Select parent frameset	Alt-Up arrow
Select first child frame or frameset	Alt-Down arrow
Working with Images
Replace image with a different one	Double-click image
Edit image in external editor	Ctrl-Double-click image
Working with Divs
Select a div (without having to click its grab tag)	Ctrl-Shift-click
Working with Links
Make Link...	Ctrl-L
Remove Link	Ctrl-Shift-L
Open the link-to document in Dreamweaver	Ctrl-Double-click link
Drag & drop to create link	Select the text, then Shift-drag it to file in Site panel
Formatting Text
None	Ctrl-0
Heading 1	Ctrl-1
Heading 2	Ctrl-2
Heading 3	Ctrl-3
Heading 4	Ctrl-4
Heading 5	Ctrl-5
Heading 6	Ctrl-6
Paragraph	Ctrl-Shift-P
Left ...	Ctrl-Alt-Shift-L
Center	Ctrl-Alt-Shift-C
Right	Ctrl-Alt-Shift-R
Justify	Ctrl-Alt-Shift-J
Text Indent	Ctrl-Alt+]
Text Outdent	Ctrl-Alt+[
Document Editing
Go to Next Word	Ctrl-Right arrow
Go to Previous Word	Ctrl-Left arrow
Go to Previous Paragraph	Ctrl-Up arrow
Go to Next Paragraph	Ctrl-Down arrow
Select Until Next Word	Ctrl-Shift-Right arrow
Select From Previous Word	Ctrl-Shift-Left arrow
Select From Previous Paragraph	Ctrl-Shift-Up arrow
Select Until Next Paragraph	Ctrl-Shift-Down arrow
Edit Tag	Shift-F5
Exit Paragraph	Ctrl-Enter
Code Editing
Show Code Hints	Ctrl-Space
Quick Tag Editor	Ctrl-T
Select Parent Tag	Ctrl-[
Select Child	Ctrl-]
Balance Braces	Ctrl-'
Find Next (Find Again)	F3
Select line up/down	Shift-Up/Down arrow
Character select left/right	Shift-Left/Right arrow
Select to page up/down	Shift-Page Up/Page Down
Move to word on left/right	Ctrl-Left/Right arrow
Select to word on left/right	Ctrl-Shift-Left/Right arrow
Move to start/end of line	Home/ End
Select to start/end of line	Shift-Home/End
Move to top/end of file	Ctrl-Home/End
Select to start/end of file	Ctrl-Shift-Home/End
Go to Line	Ctrl-G
Indent Code	Ctrl-Shift->
Outdent Code	Ctrl-Shift-<
View
Switch between Code and Design Views	Ctrl-tilde(~)
Switch All Windows to a Specific View	Ctrl-Click Code or Design View Button
Switch between Documents (Tabs)	Ctrl-Tab
Refresh Design View	F5
Live View	Alt-F11
Working with Documents & Panels
Show/Hide Panels	F4
Switch to Next Document (Tab)	Ctrl-Tab
Switch to Previous Document (Tab)	Ctrl-Shift-Tab
Behaviors	Shift-F4
Bindings	Ctrl-F10
Code Inspector	F10
Components	Ctrl-F7
CSS Styles	Shift-F11
Databases	Ctrl-Shift-F10
Files.	F8
Frames	Shift-F2
History	Shift-F10
AP Elements	F2
Properties	Ctrl-F3
Reference	Shift-F1
Results	F7
Server Behaviors	Ctrl-F9
Snippets	Shift-F9
Tag Inspector	F9
Misc
Check Spelling	Shift-F7
Get File from Server	Ctrl-Shift-D
Put File on Server	Ctrl-Shift-U

Bạn có thể download file PDF tại đây

Tham khảo: nobledesktop.com

Có lẻ nhiều người học web, làm web sẻ hỏi như vậy và chắc có nhiều bạn vẫn chưa nhận được câu trả lời rõ ràng. Sau đây xin chia sẻ một bài viết giải đáp thắc mắc này của các bạn, bài viết này xin trích dẫn từ danweb.vn để mọi người cùng tham khảo

Ngoài ra, cho thấy nhiều hiệu ứng mà CSS3 cung cấp trước đây đã đòi hỏi các hình ảnh được tạo ra bằng cách sử dụng một ứng dụng riêng biệt và được lưu trữ dưới dạng GIF, JPG, PNG. Các hiệu ứng này bao gồm các hình bóng rơi trên văn bản và các hộp, các góc được làm tròn trên các đường viền, và sử dụng tính mờ đục để tạo ra một sự xuất hiện mờ.
Nhiều tính năng trong số đó (chẳng hạn như độ mờ đục và các góc được làm tròn) là tương đối phổ biến trong sử dụng do thực tế là chúng làm giảm nhiều khả năng tùy chỉnh trong các trình duyệt Web.
Tìm hiểu về các cách bố trí nhiều cột mới mà bạn có thể tạo ra chúng khi sử dụng CSS3. Các cách bố trí này là một sự tạo mẫu cho bố cục tờ báo ở nơi văn bản sẽ trải dài trên một số các cột đã đặt hoặc theo chiều rộng cột cụ thể khi cần.
Một tính năng khác sẽ được thảo luận là vấn đề bao gồm các phông chữ Web phi tiêu chuẩn nhờ sử dụng thẻ @font-face.
Cuối cùng, sẽ giới thiệu một số các tính năng CSS3 mới khác, chẳng hạn như sự hỗ trợ cho HSL (Hue, Saturation và Lightness - Màu sắc, độ bão hòa, cường độ ánh sáng) và các mô hình màu RGBA (Đỏ, Xanh lá cây, Xanh da trời, và Alpha).

Các bộ chọn mới
Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử <div> bạn sẽ sử dụng bộ chọn div: div { border: 1px solid #000; }.
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, sử dụng bộ chọn: .highlight { background-color: yellow; }.
Để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, sử dụng: #myDiv { width: 250px; }.
Tuy nhiên, có thể kết hợp các bộ chọn này, do đó để chọn tất cả các phần tử <div> có làm nổi bật lớp highlight, sử dụngdiv.highlight, hoặc chọn phần tử <div> có ID là myDiv bạn sẽ sử dụng div#myDiv.
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm một loạt các bộ chọn phức tạp hơn. Ví dụ, có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text hoặc bạn có thể sử dụng lớp-giả: hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.
Tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn, tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số lượng mã HTML và JavaScript cần phải viết.

Các bộ chọn thuộc tính:
E[foo^="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó bắt đầu chính xác bằng chuỗi bar
E[foo$="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó kết thúc chính xác bằng chuỗi bar
E[foo*="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó chứa chuỗi bar

Các lớp-giả có cấu trúc
E:root
Chọn một phần tử, E, gốc của tài liệu (thẻ <html>)
E:nth-child(n)
Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ
E:nth-last-child(n)
Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ
E:nth-of-type(n)
Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu
E:nth-last-of-type(n)
Chọn một phần tử, E, phần tử anh chị em cuối cùng thứ n của kiểu
E:last-child
Chọn một phần tử, E, mà phần tử của nó là phần tử con cuối cùng của phần tử cha mẹ (Lưu ý rằng E:first-child đã được định nghĩa trước trong CSS2)
E:first-of-type
Chọn một phần tử, E, phần tử anh chị em đầu tiên của kiểu
E:last-of-type
Chọn một phần tử, E, phần tử anh chị em cuối cùng của kiểu
E:only-child
Chọn một phần tử, E, phần tử con duy nhất của phần tử cha mẹ
E:only-of-type
Chọn một phần tử, E, phần tử anh chị em duy nhất của kiểu
E:empty
Chọn một phần tử, E, không có phần tử con nào (bao gồm cả các nút văn bản)

Lớp-giả target 
E:target
Chọn một phần tử, E, là đích của URI đang biểu thị

Phần tử UI nói đến các lớp-giả
E:enabled
Chọn một phần tử giao diện người dùng, E, được kích hoạt
E:disabled
Chọn một phần tử giao diện người dùng, E, bị vô hiệu hóa
E:checked
Chọn một phần tử giao diện người dùng, E (một nút radio hay hộp kiểm tra), được đánh dấu chọn hoặc được chọn
Các lớp-giả Negation
E:not(s)
Chọn một phần tử, E, không khớp với bộ chọn đơn giản s

Bộ kết hợp anh chị em chung
E ~ F
Chọn một phần tử, F, có một phần tử E đứng trước
Sự hỗ trợ của trình duyệt cho các bộ chọn thuộc tính mới và bộ kết hợp anh chị em chung là tuyệt vời, do chúng làm việc trên hầu như tất cả các trình duyệt Web hiện đại.
Sự hỗ trợ cho các lớp-giả mới có trong các phiên bản mới nhất của hầu hết các trình duyệt, nhưng bạn có thể cần có cả các bản thay thế cho các trình duyệt cũ hơn như Internet Explorer 6/7 và Firefox 3.0.

Các hiệu ứng mới
 Mặc dù các bộ chọn mới có lẽ là những tính năng làm giảm đau đầu cho các nhà phát triển nhiều nhất, những cải tiến mà mọi người muốn nhìn thấy là các hiệu ứng mới sáng chói có sẵn.

Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới, bao gồm:
• nền
• mẫu-nền
• gốc-nền
• kích thước-nền
• bán kính-đường viền (các góc được làm tròn)
• hình ảnh-đường viền
• màu sắc-đường viền (các đườmg viền gradient)
• hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)
• kích thước-hộp
• độ mờ
• khoảng trống-đường bao
• chỉnh lại kích thước
• tràn-văn bản
• hình bóng-văn bản
• bọc-từ

Các bố trí nhiều cột
Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng trên một số cột, giống như bạn có thể thấy trong một tờ báo. Điều này có thể được thực hiện theo hai cách, hoặc sử dụng đặc tính độ rộng cột, ở đó bạn định nghĩa mỗi cột sẽ rộng bao nhiêu (số lượng các cột được xác định bởi các vùng có sẵn), hoặc bằng cách sử dụng đếm-cột, ở đó bạn định nghĩa số lượng các cột cần được sử dụng. Sau đó độ rộng sẽ thay đổi dựa vào vùng có sẵn cho mỗi cột.
Các tính năng khác về các cách bố trí nhiều cột bao gồm đặc tính khoảng hở cột, cho phép nhà phát triển định nghĩa khoảng không gian cần có giữa các cột khi sử dụng phương thức độ rộng cột.
Đặc tính quy tắc-cột cho phép một quy tắc định kiểu-đường viền được đặt giữa các cột. Cuối cùng có đặc tính: phân phối-không gian-cột, xác định cách để lại khoảng trống cần được phân bổ giữa các cột.
Các cách bố trí các cột hiện được các trình duyệt Mozilla và WebKit hỗ trợ. Hiện nay, các cách bố trí này được thực hiện bằng các đặc tính độc quyền tạm thời được bắt đầu bằng - moz hay -Webkit, tương ứng. Khi đặc tả này đã được hoàn tất, các trình duyệt này cuối cùng sẽ chuyển sang các đặc tính tiêu chuẩn CSS.

Các phông chữ Web
Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5 nhưng việc này đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó. Do đó các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào CSS2.
Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, bây giờ bạn có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình.
Có thể sử dụng phông chữ này theo các quy tắc CSS riêng của bạn, chẳng hạn như: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.
Hãy nhớ rằng các phông chữ giống như các hình ảnh — nếu chúng không phải là của riêng bạn thì bạn có thể cần giấy phép để sử dụng chúng trên Web.
Ngoài ra, bạn có thể trả tiền (hoặc tải về miễn phí) cho một số phông chữ trả phí một lần để có thể đưa các phông này vào các trang Web của bạn.

Các tính năng mới khác
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha).
Các truy vấn phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các thiết bị khác nhau dựa vào kích thước khung nhìn của chúng.
Module tiếng nói của CSS3 cho phép bạn điều khiển các đặc tính tiếng nói cho một trình duyệt đọc màn hình bao gồm cả âm lượng, sự cân bằng, tốc độ, nén,...

Sau khi hoàn thành một website, bạn sẻ cần phải tối ưu hóa làm sao cho website của bạn load nhanh hơn, tốt cho SEO hơn. Nhưng bạn kiểm tra tốc độ load web bằng cách nào?
Có nhiều cách kiểm tra tốc độ load website khác nhau, sau đây là những cách đơn giản để bạn có thể kiểm tra website của mình một cách dễ dàng và nhanh nhất.

Cách 1: Sử dụng plugin Firefox : Firebug
Bạn vào link https://addons.mozilla.org/en-US/firefox/addon/firebug/ để tải và cài Firebug cho trình duyệt Firefox của mình, sau khi cài xong bạn khởi động lại Firefox, truy cập vào địa chỉ website của bạn rồi nhấn F12. Sau khi hiện lên panel Firebug bên dưới cùng của trình duyệt, bạn nhấn vào tab Net

Để chính xác hơn, bạn nhấn Ctr + F5 lần nữa, đợi cho website load hết bạn sẻ thấy kết quả trong bảng thống kê của Firebug, đó là các thông số load page của website:

Cách 2: Sử dụng các website test tốc độ website online như http://www.webpagetest.org/ hoặc http://tools.pingdom.com/

Cách này đơn giản hơn, bạn chỉ cần nhập địa chỉ website của bạn vào và nhấn test, website sẻ tự động phân tích và cho ra kết quả. Việc của bạn chỉ là ngồi chờ kết quả phân tích.

Diễn đàn Xenforo hiện nay khá phổ biến và được nhiều người ưa dùng. Nhưng mặc định mã nguồn này không tích hợp sẵn comment bằng Facebook, mà chúng ta phải tự add vào. Sau đây là hướng dẫn chi tiết cách thêm comment Facebook vào diễn đàn Xenforo, cũng khá là đơn giản :)

Bước 1: Đăng nhập vào admin Xenforo, chọn mục Template => Nhập vào ô search template là "message" sau đó mở template tên message

Bước 2:  Sau khi mở template message bạn nhấn Ctr + F để mở khung tìm kiếm lên và nhập vào <xen:include template="ad_message_below" /> để tìm vị trí cần add comment Facebook.
Sau khi tìm thấy vị trí này, hãy chèn đoạn code bên dưới vào ngay sau nó:

<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
            <div id="fb-root"></div>
            <div class="fb-comments" data-href="http://yourforum.com/{xen:link threads, $thread}" data-num-posts="10" data-width="790"></div>
</xen:if>

Sau đó nhấn lưu lại.

Lưu ý : Bạn chỉnh lại http://yourforum.com thành tên miền website của bạn.
Để quản lý bình luận facebook bạn cần thêm vào trước thẻ </head> trong template: PAGE_CONTAINER đoạn code sau :
<meta property="fb:admins" content="ID"/>

ID là account Facebook quản lý của bạn.

Hoặc bạn có thể quản lý comment thông qua đường dẫn sau:

https://developers.facebook.com/tools/comments


Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn cách vào Facebook trên điện thoại khi bị chặn
- Một số thủ thuật Facebook thú vị bạn nên biết
- 8 điều nên tránh chia sẻ trên Facebook sau khi chia tay
- Hướng dẫn khóa hoặc xóa tài khoản Facebook dễ dàng
- Hướng dẫn cách đổi mật khẩu Facebook dễ dàng
- Hướng dẫn cách ẩn ngày sinh nhật của bạn trên Facebook

Để chèn banner quảng cáo xuất hiện tự động và lấy ngẫu nhiên từ nhiều banner khác nhau ta chỉ cần đoạn code javascript đơn giản sau sẻ giúp bạn thực hiện nó dễ dàng.

Bước 1: Copy đoạn script bên dưới dán vào trước thẻ </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

    var banner = [];

    var index = 0;

    banner[1] ='<div class="banners"><a href="http://beetiny.blogspot.com/"><img src="http://beetiny.blogspot.com/banner1.jpg" alt=""/></a></div>';

    banner[2] ='<div class="banners"><a href="http://beetiny.blogspot.com/"><img src="http://beetiny.blogspot.com/banner2.jpg" alt=""/></a></div>';

    index = Math.floor(Math.random()*banner.length);

    $('.bannersPos').after(banner[index]);

});

</script>

Bước 2: Sửa nội dung bôi đỏ trong ví dụ thành thông số banner của bạn, trong biến banner[1] thì 1 là thứ tự banner, nếu bạn muốn thêm banner 3,4,5... thì chỉ việc copy banner[1] ra làm nhiều banner khác, đổi thứ tự thành 3,4,5...
.bannersPos là class của thành phần (vị trí) chứa banner bạn muốn chèn.

Sau đó lưu lại và mở trình duyệt lên để kiểm tra kết quả, mỗi lần refesh, banner sẻ lấy random để show.

 Chúc các bạn thành công!

 
Xem thêm:
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Code popup quảng cáo xuất hiện khi click chuột lần đầu tiên
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Hướng dẫn cách làm banner quảng cáo responsive

Lỗi Moderator không quản lý được comment Facebook là khi bạn là admin hoặc moderator của App Facebook comment đó nhưng không thể xóa, ẩn, kiểm duyệt hay ban user comment vì trong khung comment trên website của bạn hoàn toàn không có chức năng Moderator View.

Vậy cách fix lỗi như thế nào? Rất đơn giản, bạn chỉ cần làm theo 2 bước sau:

Bước 1: Xác định Facebook user id của người quản lý comment. Bằng cách truy cập đường dẫn sau:
http://graph.facebook.com/username (Nhớ đổi username thành username của người quản lý comment) 

Ví dụ như hình trên thì phần bôi đỏ là Facebook user id bạn cần lấy

Bước 2:
Sau khi có được Facebook user id bạn copy đoạn code dưới đây dán trên thẻ </head> trong website của bạn

<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID"/>

Với YOUR_FACEBOOK_USER_ID là Facebook user id bạn vừa tìm được ở Bước 1.
Nếu bạn có nhiều user id quản lý chung thì bạn chỉ việc thêm id đó sau dấu phẩy:
Ví dụ: 

<meta property="fb:admins" content="9894839489,8989839388,8394384399"/>

Sau đó lưu lại và vào một trang có gắn Facebook comment để xem kết quả.

Lưu ý: Nếu bạn muốn quản lý toàn bộ comment Facebook trên 1 trang thì bạn vào link sau:
https://developers.facebook.com/tools/comments

Chúc bạn thành công!

Đôi khi bạn muốn tạo những nội dung nổi bật hoặc quảng cáo roll theo màn hình khi kéo chuột, việc này có vẻ sẻ phức tạp khi bạn tự viết bằng javascript. Nhưng với plugin ScrollToFixed thì việc đó thật dễ dàng.

Mời các bạn xem qua một số ví dụ về cách sử dụng:

Mặc định

$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});

Dùng với margin và limit

$(document).ready(function() {
  $('#cart').scrollToFixed({ marginTop: 10, limit: $($('h2')[5]).offset().top });
});

Header fixed và footer fixed với một thông số limit

$(document).ready(function() {
  $('.header').scrollToFixed();
  $('.footer').scrollToFixed( { bottom: 0, limit: $('.footer').offset().top } );
});

Dùng với nhiều option khác nhau hoặc tạo thêm sự kiện khi roll, ví dụ như đổi màu font chữ, background...

$(document).ready(function() {
    $('.header').scrollToFixed({
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('.footer').scrollToFixed( {
        bottom: 0,
        limit: $('.footer').offset().top,
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('#summary').scrollToFixed({
        marginTop: $('.header').outerHeight() + 10,
        limit: function() {
            var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 10;
            return limit;
        },
        zIndex: 999,
        preFixed: function() { $(this).find('.title').css('color', 'blue'); },
        preAbsolute: function() { $(this).find('.title').css('color', 'red'); },
        postFixed: function() { $(this).find('.title').css('color', ''); },
        postAbsolute: function() { $(this).find('.title').css('color', ''); }
    });
});

Bạn có thể xem demo trực tiếp một số ví dụ:

• http://jsfiddle.net/y3qV5/434/ - Roll theo với một limit.
• http://jsfiddle.net/k2R3G/81/ - Cố định header, làm cho nội dung nằm bên dưới nó.
• http://jsfiddle.net/ZczEt/167/ - Ví dụ khá đầy đủ: Cố định header, footer và các thành phần theo một sự kiện
• http://jsfiddle.net/y3qV5/435/ - di chuyển lên và dừng lại ở những khoảng thời gian khác nhau.
• http://jsfiddle.net/y3qV5/769/ - Nhiều thành phần khác nhau cố định theo điểm dừng
• http://jsfiddle.net/ZZYpG/68/ - Cố định và thay đổi ngày theo điểm cụ thể
• http://bigspotteddog.github.io/ScrollToFixed/ - Những ví dụ thông dụng nhất

Cài đặt và sử dụng:

Bạn download plugin tại đây

Hoặc cập nhật bản mới nhất tại đây

Chúc các bạn thành công

Để gắn code Google Analytics vào forum Xenforo thực sự khá đơn giản, nhưng không phải ai cũng nắm rõ và cũng có người đã gắn trực tiếp vào template trong khi admincp Xenforo đã hỗ trợ sẵn.
Sau đây là cách gắn đơn giản nhất thông qua admincp của Xenforo.

Bước 1: Lấy Google Analytics ID ( có dạng UA-XXXXXXXX-X ) tại trang Google Analytics

Bước 2: Add Google Analytics ID vừa lấy được vào diễn đàn Xenforo:

Sau khi đã có ID Google Analytics bạn đăng nhập diễn đàn Xenforo với tài khoản admin, vào Admin Control Panel => Option => Statistics and Metrics dán ID vừa có vào chổ Google Analytics Web Property ID , sau đó nhấn lưu lại là xong.

Quá đơn giản phải không nào? :))

Chúc các bạn thành công!


Xem thêm:
- Hướng dẫn cách gắn nhiều code Google Analytics lên một website
- Cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Hướng dẫn cách gắn Google Analytics vào Opencart

Với bộ font chữ mặc định trên máy tính, bạn cảm thấy trở nên nhàm chán trong thiết kế web thì nay bạn đã có thể dùng nhiều loại font chữ khác để làm cho website mình trở nên đẹp và chuyên nghiệp hơn. Giải pháp dễ dàng nhất là sử dụng Google fonts, sau đây là 3 bước đơn giản để bạn sử dụng Google font cho website hoặc blog của mình.

Bước 1: Chọn Google fonts mà bạn thích
Bạn truy cập vào www.google.com/fonts, trong danh sách font bạn thấy, hãy chọn ra font bạn thích và nhấn Quick Use.

Sau đó chọn kiểu font bạn muốn embed vào web, lưu ý bạn càng add nhiều font thì tốc độ load càng chậm, bạn có thể xem đồng hồ đo thời gian load ngay bên phải:

Bước 2: Nhúng Google fonts vừa chọn vào website hoặc blog
Có 3 kiểu nhúng khác nhau mà bạn có thể lựa chọn phù hợp với website của mình:

Kiểu 1: Gắn thẻ link vào trước thẻ </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Kiểu 2: Import vào file css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Kiểu 3: Sử dụng Javascript, gắn trước thẻ </head>

<script type="text/javascript">

      WebFontConfig = {

        google: { families: [ 'Open+Sans::latin' ] }

      };

      (function() {

        var wf = document.createElement('script');

        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +

          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

        wf.type = 'text/javascript';

        wf.async = 'true';

        var s = document.getElementsByTagName('script')[0];

        s.parentNode.insertBefore(wf, s);

      })(); </script>

Bước 3: Sử dụng Google fonts
Bạn chỉ cần gọi font đó ra trong css, ví dụ:

font-family: 'Open Sans', sans-serif;

 
Chúc các bạn thành công!



Xem thêm:
- Tổng hợp hơn 130 font chữ thư pháp và font chữ viết tay đẹp cho Designer
- Bộ sưu tập hàng trăm logo vector tuyệt đẹp download miễn phí
- Một số mẫu logo vector đẹp download miễn phí
- Cách sử dụng @font-face trong thiết kế website

Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo sau do bạn Trần Hoàng Giang thực hiện và chia sẻ trên mạng Youtube.

Xem clip:

Chúc các bạn thành công!

Xem thêm:
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo

Mặc định Blogger không có trang liên hệ mà chỉ có gadget form liên hệ, nhưng chỉ cần vài bước đơn giản bạn cũng có thể làm một trang liên hệ riêng cho blog của mình.

Các bạn làm theo các bước sau:

1. Tạo form liên hệ bằng gadget:
Bạn đăng nhập admin => Bố cục => Chọn 1 vị trí bất kì để đặt gadget, chọn Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ như trong hình

Điền thông tin cơ bản rồi nhấn Lưu lại

2. Ẩn Form liên hệ tại vị trí vừa Add:
Bạn vào Template => Edit HTML => Search và xóa đoạn code được bôi đỏ bên dưới:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
       
 <input class='contact-form-name' expr:id='data:widget.instanceId + 
&quot;_contact-form-name&quot;' name='name' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <input class='contact-form-email' expr:id='data:widget.instanceId + 
&quot;_contact-form-email&quot;' name='email' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <textarea class='contact-form-email-message' cols='25' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-email-message&quot;' name='email-message' 
rows='5'/>
        <p/>
        <input 
class='contact-form-button contact-form-button-submit' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-submit&quot;' 
expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
         
 <p class='contact-form-error-message' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-error-message&quot;'/>
          <p
 class='contact-form-success-message' expr:id='data:widget.instanceId + 
&quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>

</b:includable>

  </b:widget> 

Sau đó bạn nhấn Lưu

3. Tạo trang liên hệ:
Bạn vào Pages => Tạo trang mới => mở khung soạn thảo ở chế độ HTML sau đó dán đoạn code bên dưới vào rồi nhấn Lưu

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Lưu ý: Trước khi nhấn lưu bạn nhớ đặt tên cho trang ví dụ như "Liên hệ" và cài đặt tùy chọn không cho phép Comment.

4. Style cho trang liên hệ:
Bạn vào Template => Edit HTML => Search "</b:skin>" và dán đoạn code này bên trong.

.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Sau đó nhấn Lưu và xem kết quả :

Lưu ý: Link trang liên hệ là link trang bạn vừa tạo nhé.

Chúc các bạn thành công!

 Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger