3:58 PM

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






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!
4 Comments
Comments

4 comments

Còn thiếu cái ID app của FB kìa bác :-d
ID App của FB cho cái gì hả bác @-)
7/12/13
I really like the template you made, how can I see a demo and download the template above, thank you!
7/12/13
You can click G+ button then will see the links

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->