Chia sẻ temple blog trang HaiVL.Com rất đẹp

Đây là template do một người bạn nhờ mình viết.
Trên mạng cũng có rất nhiều template nhưng họ đưa trước không có nhiều ưu điểm như template của mình giới thiệu sau đây.

Demo Download

Một vài tính năng của template này

Thích hợp với mọi kích thước màn hình - Responsive
Sử dụng hotkey ← và → để chuyển qua lại bài viết/trang
Hỗ trợ đóng mở khung tìm kiếm thân thiện người dùng
Tự động lấy thumbnail từ hình ảnh và video
Tự động nhận biết video để thêm button Play vào thumbnail
Tự động chuyển đổi hình ảnh sang kích cỡ ảnh gốc
Hỗ trợ nhận xét bằng tài khoản Facebook
Hiển thị chính xác lượt view và số lượng nhận xét
Tự động chuyển đổi các ký hiệu sang mặt cười như haivl.com tại trang chủ và widget Bài Xem Nhiều
Tự động lấy tên tác giả và thống kê số lượng bài viết của tác giả đó
... Và còn một số chức năng khác đang chờ bạn khám phá

Chỉnh sửa trong template

Thay Logo
Tìm đoạn sau

a#logo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY_8GzHACT2xuC3F1mMPCqnkPBDSFYllcisXAC1tVN3mtT8REzOv9Dkkr36UH7YKYL3Se0WY8wLWNk5XDuPI-VPiOJxFSXFYz8q8GvJDh1CXxGX3V3oMc7du3X6T2Rbb98N0qkcheHpo/s1600/logo.png) no-repeat;height:40px;width: 108px;margin-top: 5px;margin-bottom: -5px;float:left;text-indent:-9999px}

Và thay link logo của bạn vào
Thay Menu
Trong template bạn tìm đoạn code sau và chỉnh sửa lại cho phù hợp

<ul id='menuBar'>
<li><a href='/search/label/Nhạc%20chế'>Nhạc chế</a></li>
<li><a href='/search/label/Game%20show'>Game Show</a></li>
<li><a href='/search/label/Girl'>Girl</a></li>
<li><a class='timkiem' title='Tìm Kiếm'>Tìm kiếm</a></li>
</ul>
<div id='headerRight'>
                <div class='login'>
<a class='upload' href='https://www.blogger.com/blogger.g?blogID=2174783240269434194#editor/src=header' target='blank'>Đăng ảnh</a>
<nav id='Dropmenu' style='display: none;'>
<ul class='menu'>
<li><a href='#'>Menu</a>
<ul class='hidden'>
<li><a href='/search/label/Nhạc%20chế'>Nhạc chế</a></li>
<li><a href='/search/label/Game%20show'>Game Show</a></li>
<li><a href='/search/label/Girl'>Girl</a></li>
<li><a class='timkiem' title='Tìm Kiếm'>Tìm kiếm</a></li>
  </ul></li></ul>
</nav>

1. 2 dòng <li><a class='timkiem'>Tìm kiếm</a></li> bạn giữ nguyên nếu muốn có chức năng tìm kiếm như trang demo
2. Các dòng được tô màu vàng  ở trên và dưới phải khớp nhau để hiện thị tốt và chính xác ở các kích thước màn hình
3. Thay đổi 2174783240269434194 thành ID blog của bạn để các tác giả có thể tiện đăng bài một cách nhanh nhất

Tìm Kiếm
Code đoạn tìm kiếm trong template như sau

<script>
  (function() {
    var cx = &#39;005618512589546074367:s_2wrmb0guw&#39;;
    var gcse = document.createElement(&#39;script&#39;);
    gcse.type = &#39;text/javascript&#39;;
    gcse.async = true;
    gcse.src = (document.location.protocol == &#39;https:&#39; ? &#39;https:&#39; : &#39;http:&#39;) +
        &#39;//www.google.com/cse/cse.js?cx=&#39; + cx;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
        <gcse:search/>

Thay đổi thành mã trang tìm kiếm của bạn 005618512589546074367:s_2wrmb0guw
Cách lấy mã trang tìm kiếm
Vào www.google.com/cse/?hl=vi‎ và Add trang web của bạn vào. Sau khi hoàn tất bạn click vào Nhận Mã và copy dòng được tô màu bên dưới và thay thế mã của mình phía trên là được

Thông báo random
Tìm đoạn code sau và chỉnh sửa cho phù hợp

thbao[0]=' Ấn hotkey ← và → để chuyển qua lại bài viết/ trang nhanh hơn';
thbao[1]=' Đăng nhập vào Facebook để nhận xét';
thbao[2]=' Like và share nếu bạn thấy bài viết hay';
thbao[3]=' Chia sẻ Việt TrollVL đến bạn bè';

Lưu ý

Trong template có đoạn code sau:

 <div id='mycontent'/>

Mong rằng bạn nào sử dụng template này không xóa đi dòng này hoặc tự thay thế tên của mình vào. Mặc dù mình đã mã hóa và cũng có rất nhiều các để ẩn hoặc thay thế nó nhưng nếu như bạn bỏ ra không ít thời gian để viết một template chia sẻ cho mọi người thì bạn sẽ hiểu tại sao mình làm như vậy.

Hướng dẫn sử dụng temple

Post ảnh
Bạn nên sử dụng chức năng để đăng ảnh lên vì như vậy hệ thống mới tự nhận biết để lấy ảnh thumnail trên trang index và chuyển link sang ảnh với kích cỡ thật
Post video từ youtube
Bạn up video theo hướng dẫn sau

Vậy bạn sẽ nhận được đoạn code ví dụ như sau:

<iframe width="560" height="315" src="//www.youtube.com/embed/kTr94grb5WA" frameborder="0" allowfullscreen></iframe>

Công việc của bạn là phải thêm http: vào trước //www.youtube.com/... sẽ được

<iframe width="560" height="315" src="http://www.youtube.com/embed/kTr94grb5WA" frameborder="0" allowfullscreen></iframe>

Phải làm như vậy thì widget Bài Xem Nhiều mới tự động nhận thumbnail