Template #1: Giao diện Mini-BloggerViet cho blog tin tức - công nghệ

Mang phong cách thiết kế hiện đại thích hợp cho các blogger về tin tức - công nghệ. Ưu điểm code nhẹ, thiết kế responsive thân thiện di động, dễ tùy chỉnh, kích thước sidebar phù hợp quảng cáo...
Dưới đây là hướng dẫn cài đặt và sử dụng

DOWNLOAD PREVIEW

1. Hướng dẫn cài đặt

Bạn nên sử dụng decktop để tương thích tốt với trang quản trị cũng như chỉnh sửa giao diện của blogspot nhez.

B1. Upload file giao diện lên Blogspot

- Sau khi tải về, mở file và nhấn ctrl + a và copy tất cả sau đó dán vào phần chỉnh sửa HTML của Blog muốn thay đổi giao diện.

B2. Mở trang bố cục
- Tại menu bên trái trang quản trị blog, bạn chọn vào phần Bố cục

B3. Chỉnh sửa widget

a. Search box 

- Nhấn vào chỉnh sửa widget Search-box - thêm code sau vào khung HTML/Javascript:

<div class='search-box'>
  <form action='/search' id='searchbox' method='get'>
     <input id='input-text' name='q' placeholder='search...' size='15' type='text'/>
     <span/>
       <i aria-hidden='true' class='fa fa-search'/></i>
     </span>
     <input id='button-submit' type='submit' value=''/>
  </form>
</div>

b. Menu responsive

- Nhấn vào chỉnh sửa widget Menu responsive và thêm code vào khung HTML/Javascript:

<div class='head-menu'>
  <nav class='menu-inner'>
     <input type='checkbox'/>
     <label class='close-menu'><i aria-hidden='true' class='fa fa-times'/></i></label>
     <label class='open-menu'><i aria-hidden='true' class='fa fa-bars'/></i></label>
     <ul class='menu-list'>
        <li class='menu-name' id='menur'><a class='menu-link' href='#'>Menu 1</a></li>
        <li class='menu-name' id='menu'><a class='menu-link' href='#'>Menu 2</a></li>
        <li class='menu-name' id='menu'><a class='menu-link' href='#'>Menu 3</a></li>
     </ul>
  </nav>
</div>

c. Post of the week

- Nhấp vào chỉnh sửa widget Post of the week một của sổ bật lên
- Thiết lập như hình dưới

d. Bài đăng trên Blog

- Nhấp và chỉnh sửa widget Bài đăng trên blog
- Thiết lập như hình dưới

e. Blogging, Blognote, Blogtrick, Template

Đây là các widget hiển thị bài đăng theo nhãn
- Đặt lại tiêu đề
- Thêm code sau vào khung HTML/Javascpit

<script type='text/javascript'>
var rpbl_comment = 'Nhận xét';
var rpbl_readmore = 'Đọc tiếp';
var numposts = 8;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Lưu ý 8 là giá trị số bài viết hiển thị trong widget và Blogging là tên nhãn các bạn muốn hiển thị (phân biệt chữ hoa và chữ thường) các bạn chỉnh lại cho phù hợp với Blog của mình nhé

f. Best ever

- Nhấp và chỉnh sửa widget Best ever
- Thiết lập như hình dưới

g. Bloglist

Bạn thêm link của các trang web hoặc Blog hay mà bạn biết, widget này sẽ liên tục cập nhật bài viết mới nhất của các trang này góp phần làm phong phú nội dung cho Blog của bạn.
Đừng quên thêm Blogggerviet.net nhez:))

h. Labels

- Không cần tùy chỉnh

i. Dự án, Sự kiện, Tạp chí

Đây cũng là các widget hiển thị bài đăng theo nhãn, bạn thực hiện tương tự mục e
Gợi ý: Nếu Blog của bạn có những bài viết hay mà bạn copy từ các trangg web khác, hãy thêm nhãn "Tạp chí" cho bài viết và hiển thị chúng ở widget này nhé

2. Lưu ý khi viết bài

- Tại trang chủ và các trang index các post không lấy ra toàn bộ bài viết mà chỉ lấy ra đoạn trích là 140 chữ cái đầu tiên. Chính vì vậy nếu bài viết của bạn không được bắt đầu với text (chữ viết) mà bắt đầu với hình ảnh hoặc video chẳng hạn thì sẽ không lấy được nội dung đoạn trích

- Ảnh trên trang chủ và các trang index là ảnh đầu tiên trong bài viết. Nếu bài viết không có ảnh minh họa thì nó sẽ không lấy ra ảnh mặc định. Bạn nên thêm ảnh vào mỗi bài viết giúp bài sinh động đồng thời thân thiện với giao diện hơn

- Nên đặt nhãn (label) một cách thông minh, không nên thêm qua nhiều nhãn cho một bài viết để đảm bảo Blog của bạn không bị sắp xếp loạn xạ và khó theo dõi nhez :))

3. Lời kết

Hi vọng với việc ra mắt giao diện đầu tiên , cũng chính là giao diện mà BloggerViệt.net đang sử dụng và cho phép cài đặt miễn phí sẽ đáp ứng được nhu cầu của các bạn. Ở bài viết sau mình sẽ phát triển thêm một số tùy biến để các bạn có thêm nhiều lựa chọn phiên bản màu sắc phù hợp với nội dung trên Blog của mình cũng như tiếp tục cho ra mắt các mẫu giao diện mới, thú vị hơn

Cảm ơn các bạn đã sử dụng template này. Mời các bạn tham gia Groups chính thức của bọn mình tại facebook.com/groups/BloggerViet.net để được hỗ trợ cài đặt cũng như giao lưu chia sẻ cùng nhau.

Đừng quên like và chia sẻ các bài viết trên BloggerViệt.net nếu cảm thấy chúng thực sự hữu ích nhez!