Hướng dẫn tạo trang xem trước Demo và Download cho blogger mới nhất 2018

Cụ thể là khi nhấn vào nút DEMO hoặc DOWNLOAD sẽ chuyển tới trang nhất định hiển thị nội dung mà không cần tải lại trang hoặc chuyển hướng tới một trang khác.

Ưu điểm là bạn có hoàn toàn kiểm soát được nội dung trên trang hiển thị một cách đơn giản không cần qua nhiều bước như các thủ thuật trên mạng hướng dẫn. Cách đăng bài dễ dàng, hiển thị đẹp mắt đối với người dùng.

Bạn có thể xem trước thủ thuật này trước khi tiến hành thực hiện

XEM DEMO

Hoặc hình ảnh minh họa của trang này

Cách thực hiện: 

Mình khuyên nên backup lại template của bạn nếu có lỗi xảy ra thì có thể cập nhật lại như cũ.

Để thực hiện thủ thuật này bạn tiến hành theo các bước sau:

Bước 1: Bạn vào mẫu và tìm đến thẻ <data:post.body/> (lưu ý bạn xác định đúng thẻ hiển thị bài viết nhé) thường là một mẫu có 2 hoặc 3 thẻ này, nếu chưa xác định thì bạn có thể thử để có kết quả.

Sau khi đã xác định thẻ bạn dán đoạn code này vào phía dưới <data:post.body/>

<div id="template-view">
<div id="live-demo">
<a class="close-demo" href="#close-demo" title="Close"><i aria-hidden="true" class="fa fa-times"></i></a>
<iframe frameborder="0" height="100%" id="demo" src="#" width="100%"></iframe>
</div>
<div id="download-now">
<a class="download-now" href="#" id="download" target="_blank"><i class="fa fa-download"></i> Download Here</a>
<a class="close" href="#close" title="Close"><i aria-hidden="true" class="fa fa-times"></i></a>
<br />
<div style="text-align: center;">
<img src="https://i.imgur.com/AmcA8ek.png" style="float: none; margin-top: 65px; max-width: 100%;" />
</div>
</div>
<div style="display: inline-block; padding: 0; text-align: center; text-transform: uppercase; width: 100%;">
<div style="text-align: center;">
<a href="#live-demo" id="xemngay" title="Xem online"><i class="fa fa-eye"></i> Demo</a></div>
<div style="text-align: center;">
<a href="#download-now" id="taingay" title="Download"><i class="fa fa-download"></i> Download</a></div>
</div>
<style>.none{display:none}</style>
</div>

Bước 2: Bạn tìm đến thẻ đóng </body> và dán đoạn JS này lên phía trên đó

<script>
      function xemvatai(code){
        var code = '[' + code + '](.*?)[/' + code + ']';
        var re   = new RegExp(code);

        var blog = document.getElementById('Blog1');

        return blog.innerHTML.match(re)[1];
      }

        var download = document.getElementById('download');
        download.href = xemvatai('linktai');

        var download = document.getElementById('demo');
        demo.src = xemvatai('linkxem');

          alert(xemvatai('gia')); 
          document.write(xemvatai('mota'));
</script>

Bước 3: Để làm đẹp cho trang bạn sử dụng CSS sau, tìm ]]></b:skin> và dán lên phía trên:

#template-view{display:none}
#live-demo,#download-now{width:100%;position:relative;margin:0 auto;display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#live-demo:target,#download-now:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);background:#fff}
a.close-demo,a.close{z-index:999;background:#c0361a;top:0;right:0;position:absolute;line-height:55px;padding:0 10px;font-size:35px;text-decoration:none;color:#fff;text-transform:uppercase;transition:.4s;width:50px;height:60px;text-align:center}
a.download-now{z-index:99;background:#359131;top:0;left:0;position:absolute;width:100%;line-height:60px;padding:0 20px;font-size:20px;text-decoration:none;color:#fff;text-transform:uppercase;text-align:center}
a#xemngay{padding:5px 15px;color:#fff;background:#e67e22;font-weight:700;border-radius:5px;font-size:14px;display:inline-block;float:left;box-shadow:0 5px 0 0 #CD6509}
a#taingay{padding:5px 15px;color:#fff;background:#9b59b6;border-radius:5px;font-weight:700;font-size:14px;display:inline-block;float:right;box-shadow:0 5px 0 0 #82409D}
a.close-demo:hover,a.close:hover{background:#222}
a#xemngay:active,a#taingay:active{transform:translate(0px,5px);-webkit-transform:translate(0px,5px);box-shadow:0 1px 0 0}

Bước 4: Cấu trúc đăng bài:

Bài viết bạn viết như bình thường cuối bài viết bạn mở qua tab HTML trên thanh công cụ và dán code này vào cuối bài viết

<style>#template-view{display:block}</style>
<div id="taingay">
</div>
<div class="none">
[linkxem]chèn link xem[/linkxem] 
[linktai]chèn link tải[/linktai] 
</div>

Bạn thay thế chèn link xem và chèn link tải thành link của bạn là được rồi ^^

Kết luận:

Trên đây mình đã hướng dẫn các bạn cách thực hiện trang xem trước Demo và Download cho blogger mới nhất 2018 với nhiều ưu điểm nổi bật cũng như tính năng sử dụng nó

Chúc bạn thành công, nếu có thắc mắc hãy để lại bình luận mình sẽ hỗ trợ bạn.