Easy TVL - Responsive template

Chính thức ra mắt Easy TVL - Responsive template. Đúng như tên gọi của nó, template này mang một phong cách đơn giản, gọn nhẹ, tối ưu hóa tốc độ tải trang. Ngoài ra, template còn hỗ trợ chức năng tự động thay đổi kích thước cho phù hợp với thiết bị sử dụng (Responsive Design). Sau đây mình xin giới thiệu một số tính năng thú vị của Easy TVL

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 Easy TVL 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 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. Hỗ trợ bảng điều khiển chỉ hiển thị cho admin với các chức năng như đăng bài mới, chỉnh sửa HTML, chỉnh sửa bố cục và quản lý nhận xét...
7. Hiển thị thống kê số lượng bài viết và comment cho blog

Và một số tính năng khác đang chờ bạn khám phá
Template vẫn đang trong giai đoạn thử nhiệm nên còn nhiều thiếu sót vì vậy mong mọi người góp ý nhiệt tình nha!

Update 15/03/2013

-Chỉnh sửa phần RELATED POST hiển thị tốt trên mọi kích cỡ
-Thêm hiệu ứng tooltip cho popular post
-Chỉnh sửa thanh điều hướng Bài Mới Hơn | Trang Chủ | Bài Cũ Hơn hiển thị tốt hơn khi để giao diện tiếng Việt

Download template

Download Easy TVL Template Demo For Easy TVL Template

Tùy Chỉnh

1.Bảng điều khiển cho admin:

Sau khi cài đặt template quay lại trang chủ của blog bạn sẽ thấy một widget Admin chạy dọc blog như sau

Click vào biểu tượng cờ-lê sau đó dán vào phần nội dung đoạn code sau:

<div style="text-align: center;"><span style="font-size: large;">

<a href="http://www.blogger.com/post-create.g?blogID=4053054262763327427">Đăng bài</a></span></div>

<div style="text-align: center;"><span style="font-size: large;">

<a href="http://www.blogger.com/blogger.g?blogID=4053054262763327427#template" target="_blank">HTML</a></span></div>

<div style="text-align: center;"><span style="font-size: large;">

<a href="http://www.blogger.com/blogger.g?blogID=4053054262763327427#pageelements" target="_blank">Bố cục</a></span></div>

<div style="text-align: center;"><span style="font-size: large;">

<a href="http://www.blogger.com/blogger.g?blogID=4053054262763327427#publishedcomments/src=dashboard" target="_blank">Nhận Xét</a></span></div>

• Thay toàn bộ 4053054262763327427 thành ID blog của bạn và lưu lại

Cách lấy ID blog
Vào blogger > Chọn blog bạn muốn lấy ID sau đó nhìn lên thanh trình duyệt web, ID sẽ có dạng như các con số được đóng khung ở hình bên dưới

2.Thiết lập hiển thị thống số lượng bài viết và comment cho blog

Tìm trong template đoạn code sau (tìm đoạn code được bôi màu xanh)

<script>function showpostcount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script>
<div id='count_blog'>
<a href='http://template.trollvl.com' target='_blank'><h2 class='count_comment'><script src='http://template.trollvl.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount'/><small>Comments</small></h2></a>
<a href='http://template.trollvl.com' target='_blank'><h2 class='count_post'><script src='http://template.trollvl.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount'/><small>Posts</small></h2></a>
</div>

Và thay đổi các dòng bôi màu vàng thành link blog của bạn
3.Tùy chỉnh menu bằng cách chỉnh sửa lại đoạn code sau trong template (tìm đoạn code được bôi màu xanh)

<nav id='nav'>       <ul id='menuhlng1'>
           <li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='#'>About</a></li>
           <li><a href='#'>Archive</a>
<ul class='submenu hidden'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
           <li><a href='#'>Comments</a></li>
       </ul>
    </nav>