Chia sẻ HaiVL.Com Template phiên bản responsive

Trước khi chia sẻ template này mình cũng đã suy nghĩ rất nhiều bởi trước đó mình cũng đã từng chia sẻ lên 1 group trên Facebook và cũng nhận được nhiều ý kiến trái chiều. Có người ủng hộ nhưng cũng có bạn bảo rằng mình "ăn cắp" code của họ rồi thay đổi tên tác giả thành của mình, thật ra mình cũng chẳng quan tâm bởi nếu họ đã làm được một template như vậy thì chỉ đơn giản là view source thôi cũng đủ để biết khác biệt như nào rồi. Lúc mà mình viết template này do một người bạn nhờ thì thật sự mà nói mình cũng không nghĩ rằng trên mạng cũng chia sẻ rất nhiều dạng tương tự, nếu biết nói thật mình cũng chẳng viết làm gì cho mệt cả. Nhưng xem xét kỹ thì thật sự những template họ đưa trước không có nhiều ưu điểm như template của mình giới thiệu sau đây :D

Demo Download

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

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

Logo
Tìm đoạn sau

a#logo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_YUlmC1wczYGWdinbIV0-4AmgiM0dLESdlS8CvZc6xNW9gji9x-chcRdrKysBclFsUHWmAhnQyw6MXYiEBfnLWfpyhEBiUXMe0u9aUda1nQeFtWFkZg3y3HqoYp0fc3TuY42RgO629g/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
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

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