New
Loading...
Bạn là một Blogger và không có thời gian tự làm cho mình một giao diện blog đẹp. Template miễn phí sẻ là lựa chọn tốt nhất cho bạn vì bạn không phải tốn thời gian, công sức, chi phí để làm mà lại có nhiều lựa chọn khác nhau. Sau đây là một số Template blogger miễn phí tuyệt đẹp cho các bạn lựa chọn.

1. Timeline


Các chức năng chính của Template:
  • Fully Responsive Design
  • Automatic Mega menubar
  • Auto resize thumbnail image
  • Well Documentation
  • Threaded Comment
  • Optimize SEO
  • Ads Ready
  • Related post widget Ready
  • Custom Error 404 Page
  • Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
  • Professional admin layout, help you easy work with blog layout.
Demo

- Download ( Chọn bản miễn phí nhé)

 2. Revoltify Responsive Blogger Template


Chức năng:
Giao diện đơn giản 2 cột cho một trang tin với menu drop down, có box tin mới, comment, thống kê truy cập... Đặc biệt đã hỗ trợ sẵn Responsive.

- Demo

- Download

3. Dribble Clean & Responsive Blogger Template 



Với đầy đủ chức năng một trang tin, box tin nỗi bật, hỗ trợ menu dropdown, các box tin mới, comment, social...
Hỗ trợ giao diện responsive.

- Demo

- Download (Chọn bản Free nếu bạn không muốn tính phí)

Xem thêm:
- 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 tạo trang liên hệ 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 


Sau đây là các bước đơn giản để gắn breadcrumbs (thanh điều hướng) cho blogger của bạn.

- Đăng nhập trình quản lý blogger của bạn => blogger.com
- Chọn Layouts Sau đó chọn Edit HTML
- Để an toàn trước khi edit template bạn nên download một bản về backup
- Bây giờ bạn tìm đoạn code sau :
<b:include data='top' name='status-message'/>
Và đổi thành đoạn code dưới đây:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
- Tiếp theo bạn tìm đoạn code sau:

<b:includable id='main' var='top'>

Và thay thế bằng đoạn code này:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Không hiện ở trang chủ -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb chỉ hiện trong trang chi tiết -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb chỉ hiện trong trang label archive và trang search -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
Cuối cùng bạn tìm đoạn code sau:
]]></b:skin>
Và thay thế bằng đoạn code bên dưới:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>
Lưu lại và xem kết quả ở trang chi tiết bài viết nhé!

Lưu ý là thanh breadcrumb sẻ tự động lấy danh mục là thẻ label cuối cùng của bài viết đó!

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