loikhungloi: 2015

Thứ Tư, 8 tháng 7, 2015

cách tạo breadcrumbs cho blogspot

1. Breadcrumbs là gì ?
- Breadcrumbs là 1 dạng tập hợp các liên kết giúp người xem Website xác định được vị trí của mình trong Site đó:
Ví dụ: Bạn đang ở Home >> Cho thuê xe >> Thuê xe du lịch >> Cho thuê xe du lịch 24 chỗ
Ảnh hiển thị trên kết quả tìm kiếm google

2. Lợi ích của Breadcrumbs
Người dùng biết được vị trí của mình trên Site
Tạo sự khác biệt và đẹp hơn trên kết quả tìm kiếm
Thuận tiện di chuyển đến các trang mà không phải di chuyển vể trang chủ
Breadcrumbs giúp ích cho việc SEO: giảm tỷ lệ thoát của website.
Google cũng đánh giá thông qua Breadcrumbs của site.
Như vậy việc tạo Breadcrumbs rất cần thiết cho việc SEO website, SEO blogger.
3. Hướng dẫn tạo breadcrumbs cho blogger (blogspot)

B1: Vào Template (Mẫu) > Edit HTML (chỉnh sửa HTML) chọn Expand the Widget Templates (Mở rộng Mẫu tiện ích)

B2:Thêm mã css sau và trước ]]></b:skin>

B3:
Tìm đoạn code sau:

và thêm dưới nó đoạn code:
<b:if cond='data:blog.pageType == "item"'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'> <span itemprop='title'><data:blog.title/></span></a> »</div>
<b:loop values='data

osts' var='post'>
<b:if cond='data

ost.labels'>
<b:loop values='data

ost.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a> »</div>
</b:if>
</b:loop>
<span><data

ost.title/></span>
</b:if>
</b:loop>
</div>
</b:if>

Bạn có thể thay phần chữ màu kia thành "Home" hay chữ j tùy ý cũng được ko để vậy nó sẽ tự động lấy title của blog bạn chèn vào

Chú ý bạn cần sủa lại file robots.txt của blogspot cho phép nó index cả label nhé

Cuối cùng là bạn đợi google update lại web của bạn thôi chúc các bác thành công

Thứ Ba, 7 tháng 7, 2015

Cách tạo menu dropdown nằm ngang cho blog

Cách tạo menu dropdown:

1. Đăng nhập vào blog, bấm "Thiết kế" - "Trang tổng quan", bấm vào "Mẫu", bấm tiếp "Chỉnh sửa HTML".
2. Tìm thẻ: ]]></b:skin> . (Xem cách tìm nhanh các thẻ TẠI ĐÂY).
3. Chèn đoạn mã trong khung dưới đây vào phía trên thẻ: ]]></b:skin> vừa tìm được.

#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Chú ý: Con số (960) được tô màu đỏ, nằm trong nền xanh ở đoạn mã trên là độ rộng của thanh menu. Các bạn có thể thay đổi cho phù hợp với blog.
Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
4. Bấm "Lưu mẫu" để lưu vào template.

5. Lặp lại các thao tác ở bước số 1 và bấm vào "Bố cục", bấm tiếp "Thêm tiện ích" [1] (ngay dưới tiêu đề blog - xem ảnh trên), chọn và thêm "HTML/JavaScript" [2] trong bảng tiện ích hiện ra. Để trống tiêu đề và dán đoạn mã trong khung dưới vào phần nội dung:

    <div id='mbtnavbar'>

 <ul id='mbtnav'>
        <li>
        <a href=' link trang chủ'>TRANG CHỦ</a></li>
        <li>
 <a href='link chuyên mục'>TÊN MỤC</a></li>
        <li>
          <a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
 <a href='link chuyên mục'>TÊN MỤC</a>
<ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
        </li>
  <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
         </ul>
      </li>          
 <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN </a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
          </li>
         <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
            </li>
            <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
            <li><a href='link nhãn'>TÊN NHÃN</a></li> 
            <li><a href='link nhãn'>TÊN NHÃN</a></li>
            <li><a href='link nhãn'> TÊN NHÃN</a></li>
            <li><a href='link nhãn'>TÊN NHÃN</a></li>             
       </ul>

  </li>
<li>        
</li>

</ul>  
</div>

Lưu ý:
- Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!".
- Phần mã nằm trong nền xanh ở khung trên là các menu con xổ xuống.
- Thay "link chuyên mục" bằng link của các danh mục hoặc trang tĩnh trong blog; "tên mục" bằng tên các trang hoặc danh mục trong blog của các bạn.
- Thay "linh nhãn" bằng link các nhãn trong blog; "tên nhãn" bằng tên của các nhãn trong blog của các bạn.
Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:

CÁCH GẮN LINK NHÃN LÊN THANH MENU
Cách tạo "nhãn" tại bài viết:
CÁCH TẠO NHÃN (CHUYÊN MỤC) CHO CÁC BÀI VIẾT TRÊN BLOGSPOT

6. Bấm "Lưu" và định vị tiện ích vừa tạo rồi bấm "Lưu sắp xếp" [3] là xong

Cách tạo menu nằm ngang đẹp cho blogspot của blogger

Menu sẽ được tạo bằng các bước đơn giản sau đây:

1. Bấm vào "Thiết kế" trên thanh điều khiển sẽ hiện ra giao diện "Trang tổng quan". Tìm trong giao diện vừa hiện ra nút "Bố cục" và bấm vào đó. Một giao diện khác hiện ra, bấm "Thêm tiện ích" [1].
(Nên chọn vị trí "Thêm tiện ích" ở ngay dưới tiêu đề blog cho tiện.)

2. Trong bảng "Thêm tiện ích" hiện ra - bấm "HTML/Javascript" [2].

Tại giao diện "Định cấu hình HTML/JavaScript" - để trống tiêu đề và dán toàn bộ code trong khung dưới vào vị trí tương ứng.

<ul>
    <li><a href="/">TRANG CHỦ</a></li>
    <li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li>
    <li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li>
    <li><a href="LINK NHÃN 3">TÊN NHÃN 3</a></li>
    <li><a href="LINK NHÃN 4">TÊN NHÃN 4</a></li>
    <li><a href="LINK NHÃN 5">TÊN NHÃN 5</a></li>
    <li><a href="LINK NHÃN 6">TÊN NHÃN 6</a></li>
    <li><a href="LINK NHÃN 7">TÊN NHÃN 7</a></li>
    </ul>

Lưu ý:
- Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
- Thay phần tô màu đỏ bằng link các nhãn trong blog của các bạn, và phần tô màu xanhthành tên các nhãn tương ứng.
- Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:

CÁCH GẮN LINK NHÃN LÊN THANH MENU

Lưu ý:
- Mỗi dòng: <li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li> là một nút bấm dẫn đến các nhãn bài viết hoặc trang tĩnh trong blog. Muốn thêm một nút thì thêm một dòng, muốn xóa bớt một nút thì xóa bớt một dòng như trên.
3. Bấm "Lưu" [3] để lưu lại và hệ thống sẽ tự động trở lại giao diện như ở bước 1 và tại vị trí "Thêm tiện ích" ban đầu đã hiện thị một tiện ích mới với tiêu đề: "HTML/JavaScript" [4]. Đây chính là thanh menu đang tạo

- Trong bước này, các bạn có thể đặt lại vị trí thanh menu (dùng chuột kéo thả, di chuyển tiện ích vừa tạo đến vị trí thích hợp - trường hợp này chỉ cần thao tác khi bạn chọn "Thêm tiện ích" không nằm ngay dưới thanh tiêu đề từ bước 1.)
4. Bước cuối cùng: Bấm "Lưu sắp xếp" [5] để hoàn thành và trở lại trang chủ xem kết quả.

Thứ Hai, 6 tháng 7, 2015

Cách tạo trang liên hệ trên blog của blogger

Tạo một trang liên hệ trên Blogger thì có rất niều cách nhưng nó chỉ đơn giản đối với những người đã thành thành thạo Blogger, nhưng nó lại là một công việc khó chịu khi thêm mẫu liên hệ trong blogger đối với người mới. Blogger mặc định chỉ cung cấp một Mẫu liên hệ bên widget (phía bên blog) để làm hình thức liên lạc của bạn, do đó bạn cần một số kỹ thuật để biến nó thành trang liên hệ cho blog. Bạn tham khảo bài Hướng Dẫn Tạo Trang Liên Hệ Trên Blogger tôi nghĩ đây một cách dễ dàng nhất để thêm một trang liên hệ trên blogger.

Hướng Dẫn Tạo Trang Liên Hệ Trên Blogger

Bài bài này có 2 phần có bạn nhớ xem hết nha, nhất là phần 2 nó sẽ chuyen nghiệp hơn

Mẫu liên hệ thanh bên

Trong phần Hướng dẫn tạo form liên hệ cho Blog này tôi sẽ giới thiệu From mặc định Blogger. Đầu tiên bạn cần đăng nhập vào tài khoản Blogger của bạn https://www.blogger.com/

huong dan tao trang lien he tren blogger

Chọn blog bạn muốn Tạo Trang Liên Hệ Trên Blogger click vào tam giác chọn tiếp "Bó cục"

Hướng dẫn tạo form liên hệ cho Blog

Ở bước này bạn có thể chọn vị trí đặc mẫu liên hệ nằm ở vị trí nào trên blog của bạn, như tôi thì chọn phía bên phải của blog, click vào "Thêm tiện ích" một cửa xổ sẽ bật lên

Hướng dẫn tạo trang liên hệ cho Blogger

Cần phải chọn bên "Tiện ich khác" bạn sẽ thấy "Biểu mẫu liên hệ" click chọn nó

Hướng dẫn tạo from liên hệ cho blogspot

Đặc tên trong "Tiêu đề", nó sẽ xuất hiện trên blog bạn đó

Hướng dẫn tạo Form Contact us

Cuối cùng là vào blog và xem mẫu liên hệ mà chúng ta vừa tạo nhé. Muốn tạo một trang liên hệ chuyên nghiệp hơn thì bạn tiếp tục bài Hướng Dẫn Tạo Trang Liên Hệ Trên Blogger ở phần bên dưới nhé

Trang liên hệ blogger

Có rất nhiều bài hướng dẫn tạo trang liên hệ trên blogger bạn có thể tìm thấy trên google Tuy nhiên cá nhân tôi khuyên bạn nên dùng chính tiện ích của Google để tạo nó luôn, vì sao ? vì Uy tính của Google là quá lớn rồi

Đầu tiên bạn vào trang Google Drive https://drive.google.com/#my-drive bạn đăng nhập chính bằng tài khoản Blogger của bạn cho tiện nhé

Hướng dẫn tạo Contact form cho blogger

Click vào tạo mới > ứng dụng khác > Google biểu mẫu.

Hướng dẫn tạo trang liên hệ cho blogspot

Bây giờ chúng ta đi sơ lược về một số vấn đề trong cái mẫu này nhé

Mẫu không có tiêu đề: bạn click vào đây viết cái tên cho mẫu liên hệ của bạn, tôi thường đặc nó là "Liên Hệ"
Tiêu đề câu hỏi: cái này nó sẽ hiển thị trên trang của bạn ví dụ "Email"
Văn bản trợ giúp: cái này cho người cần lien hệ viết vào, chúng ta để trống phần này
Loại câu hỏi: hãy click vào cái tam giac kế bên nó sẽ xổ xuông menu
Văn bản có nghĩa là nó chỉ hiện trên một dòng cái này ta thường dùng làm Name, Email, Trang web bạn;
Văn bản của bạn: cái này có thể nhập nhiều từ, nhiều dòng dùng để tạo phần nội dung
Mấy cái khác mấy bạn tự tìm hiểu thêm nhé
Câu hỏi bắt buộc: cái này quan trọng nhé, nếu tick vào thì khi họ viết liên hệ họ sẽ không được để trống phần đó. Thường thì chúng ta luôn tick vào nó
Thêm mục: click tiếp cái tam giác nhé

Cái này cho chúng ta tạo thêm mục thường là mình chỉ dùng Văn bản và Đoạn văn bản thôi

Hướng dẫn tối ưu hóa cho blogspot từ A đến Z

Cuối cúng tôi cũng tạo xong một mẫu bên trên rồi tiếp theo là lưu nó lại và lấy code thôi

Hướng dẫn tạo form liên hệ chuyên nghiệp

Vào Tẹp > Nhúng

Thủ Thuật Blog

Bước này không cần để ý gì cả copy cái đoạn code lưu đâu đó rồi click vào "Đã xong" là được. Mình có thể chính sửa bất cứ điều gì sau này

Hướng dẫn làm blog với BlogSpot

Tiếp theo là vào trình điều khiển Blogger để tạo một trang liên hệ. Chon trang > Trang mới

Hướng dẫn tạo Blog để SEO web với dịch vụ Blogspot

Đặc tên trang ví dụ như "Liên Hệ"
Chuyện qua bên Html rồi dán cái code lúc nảy vào
Bạn vào tùy chọn bên phải rồi tick vào "Không cho phép" việc này sẽ ẩn cái commet bên dưới trang đó vì trang liên hệ không cần comment đúng ko
Kiểm tra lại và click và "Xuất bản". xem thử đi, Oh, cái Form nó xấu quá phải không, bạn vào chỉnh sửa nó lại "2 cái số trong cái code đó"
Bạn xem thử trang liên hệ của tôi thử xem nhe http://yeucongngheit.blogspot.com/p/lien-he.html
Cuối cùng coppy cái URL và dán nó vào cái menu thôi, cái này còn tùy vào thiết kế template của bạn nữa nhế, mỗi cái nó lại đặc khác nhau. Nếu lầm không được thì liên hện với tôi

Bạn có thể thêm các hình thức liên hệ blogger mặc định trong sidebar của blog, nhưng tôi không nghĩ rằng thực cái này chỉ để mình thực hành cho biết thôi. Cái bạn cần là một một trang liên hệ xem chuyên nghiệp một tí đúng ko nào vì thế mà cách 2 là tốt nhưng hơi rắc rối tối. Nhưng không sao nếu bạn cần giúp đỡ thì liên hệ với tôi hoặc comment bên dưới. Thank bạn đã đọc bài Hướng Dẫn Tạo Trang Liên Hệ Trên Blogger trên blog thủ thuật blogger của tôi bạn có thể cần biết nhiều thủ thuật hơn hãy vào đây tất cả thủ thuật blogger thank
Bài viết đọc thêm :

Cách cho tiêu đề bài viết hiển thị trước tên blog trên blogger

Theo mặc định, Blogspot hiển thị tên của blog trước tiêu đề của bài viết, điều này đôi khi gây trở ngại cho việc hiển thị đầy đủ tiêu đề trên máy tìm kiếm, đặc biệt là đối với những blog có tên dài.
Chẳng hạn như blog của mình có tên khá "thuồng luồng": Blog Mạng Lưới Toàn Cầu - chiếm tới 23 không gian ký tự, dẫn tới nhiều khi tiêu đề bài viết bị hiển thị thiếu khi ai đó tìm kiếm trên Google như hình dưới đây:

Tiêu đề bài viết ở sau tên Blog - ảnh 01

Tiêu đề bài viết ở sau tên Blog - ảnh 02

Vì không hiển thị đủ tiêu đề nên Google thay bằng dấu ...

Nếu tiêu đề rõ ràng hơn thì người tìm kiếm sẽ nhận được thông tin chi tiết hơn - qua đó giúp tăng lượt Click cho bạn.

Mẹo để thay đổi tiêu đề của bài viết trước tên của blog như sau, bạn vào chỉnh sửa HTML:

Tìm tới dòng:

Rồi thay thế nó bằng cụm code sau:

<b:if cond='data:blog.pageType == "item"'>

<b:else/>

</b:if>

Riêng dòng:

Bạn có thể thay dấu | bằng các dấu khác mà bạn thích như ~ hoặc -

Để xem thử bạn đã làm thành công chưa thì bạn vào một bài viết cụ thể bất kỳ, rồi đưa chuột lên gần tab trên trình duyệt của bài viết đó, nếu thấy hiện lên thông tin như hình dưới đây là OK:

Vậy là tiêu đề bài viết đã ở trước tên của Blog

Bạn phải đợi một thời gian thì máy tìm kiếm mới cập nhật lại chỉ mục cho các bài viết cũ, còn nếu bạn kiểm tra ngay thì nó vẫn chưa thay đổi đâu.

Sau một vài tiếng thì đây là kết quả, bạn thấy đấy, giờ tiêu đề bài viết trở nên rõ ràng hơn nhiều:

Bài viết đọc thêm :