GH Template - Responsive Template

Hôm nay mình xin chia sẻ đến độc giả của TrollVL một template mới mà mình vừa hoàn thành. Như Easy TVL mà mình viết trước kia, template này cũng mang một phong cách đơn giản và độ responsive cao thích hợp với mọi kích cỡ màn hình, kể cả điện thoại và máy tính bảng. Một số tính năng của GH Template

1. Hiển thị tốt trên mọi thiết bị như các di động, máy tính bảng. Bạn có thể kiểm tra mức độ responsive của GH Template tại đây
2. Hiển thị tốt trên IE nhưng không hỗ trợ chức năng responsive
3. Auto readmore nhưng vẫn giữ được các thẻ html như in đậm, nghiêng, ghạch chân, và màu sắc ...
4. Tự động lấy 3 widget thứ 2,3,4 trên cùng tại sidebar phải và gộp thành các tab để không chiếm diện tích blog và trông pro hơn
5. Comment phân cấp mặc định của blogger với style bắt mắt phù hợp với giao diện blog và hỗ trợ chức năng chèn Emoticons cho comment
6. Menu 2 cấp độ tự chuyển sang dạng drop đối với các thiết bị màn hình nhỏ

Và một số tính năng thú vị khác
Update: Chuyển main body từ hai cột sang một cột do một số lỗi phát sinh. Nhưng mình vẫn cho download để cùng nhau khắc phục.

Demo và Download

Download GH 1 Cột(Update) | Download GH 2 Cột(có thể xảy ra lỗi hiển thị)

Demo

Cách cài đặt và tuy chỉnh template

1. Cài đặt template:
Sau khi download về máy bạn giải nén ra và làm theo hướng dẫn bằng hình ảnh bên dưới

2. Tùy chỉnh menu bằng cách chỉnh sửa đoạn code sau trong template:

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Select&#160;a&#160;page</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

3. Tắt chế độ trình duyệt blog trên điện thoại mặc định của blogger để hiển thị blog đẹp và đầy đủ chức năng nhất với độ responsive của GH Template

4. Thay đổi ID blog trong template để hiển thị phân trang ngoài trang chủ
Sau khi cài đặt template bạn tìm 4382925584099486033 và thay thế bằng ID blog của mình. Lấy id bằng cách chọn blog cần lấy sau đó nhìn lên thanh trình duyệt, ví dụ ID blog được đánh dấu như hình dưới

Hi vọng bạn sẽ thích template này và đừng quên góp ý để mình hoàn thiện hơn nữa nhé, cảm ơn!