Tạo nút tải xuống dạng popup với đồng hồ đếm ngược và có thể cài đặt thêm quảng cáo trên popup trong bài viết trên Blogger là một thủ thuật kéo dài thời gian trên blog của khách truy cập và đồng thời có thể kết hợp thêm thu nhập từ quảng cáo cho blog.Cách thức hoạt động của thủ thuật gần giống như các nút tải xuống hẹn giờ khác, chỉ khác là nó nằm trên một tab thu gọn bật lên và tại đó có thể chèn thêm quảng cáo.
Có rất nhiều lợi ích có thể thu được từ phiên bản nút tải xuống cửa sổ bật lên hẹn giờ này, một số trong số đó là:
– Không cần tạo trang mới
– Dễ dàng thêm nút và tùy chỉnh
– Popup ở trên bài viết chính
– Giảm tỷ lệ thoát của bài viết chính
Xem thử:
Demo
Hướng dẫn cài đặt nút tải xuống hẹn giờ popup trên blog chính
Bước 1: Thêm css vào trước thẻ
<b:if cond='data:view.isPost'>
<style>/*<![CDATA[*/
#button-download{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#fdd929;color:#ff2121}
.adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid}
.btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in}
[data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0}
[data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[data-ml-modal]:target .modal-overlay{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1}
[data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2}
[data-ml-modal] .modal-content{background:#fff;padding:23px 27px}
@media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
/*]]>*/</style>
</b:if>
Bước 2: Thêm javascript vào trước thẻ
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>
Bước 3: Lưu mẫu
Khi đăng bài có đường dẫn tải xuống, bên soạn thảo HTML dùng code sau:
<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download">Download</a></p>
<div data-ml-modal="" id="PopupDownload">
<div class="modal-overlay"></div>
<div class="modal-dialog">
<div class="modal-content center">
<div class="adpop-top">
<h2 style="margin: 0px;">Download Your file</h2>
<div class="ad-pop__close" onclick="document.getElementById("PopupDownload").style.display="none""><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
</div>
<br />
<div style="width: 660px;">
<!-- ads here -->
<ins class="adsbygoogle" data-ad-client="ca-pub-#################" data-ad-format="horizontal" data-ad-slot="########" data-full-width-responsive="false" style="display: block;"></ins><script>
</script></div>
<br />
<a class="button" href="Link tải cần đến" id="button-download">Download File</a>
</div>
</div>
</div>
ÄángÄáºmBlogspotCách làm Pop upCách tạo popup cho websitecÃodáºngháHướng dẫn sử dụng Popup MakerKích thước popup websitenútngÆácpopupPopup WordPressQuáºngTạo nút tải xuống dạng popupTạo nút tải xuống dạng popup với đồng hồ đếm ngược cho BlogspotTạo popup cho flatsomeTạo popup cho website HTMLTạo popup khi click vào linktáºiThêmtrênvàváixuáng
Leave a comment