Tạo nút Gửi link bài viết sang điện thoại
- Updated on March 20, 2021
Chèn đoạn code sau bên dưới bài viết, tùy vào theme mà code khác nhau, ví dụ
<b:include data='post' name='postBody'/>
<b:if cond='data:view.isPost'>
<b:if cond='!data:blog.isMobile'>
<div class="qrcode">
Gửi link bài viết sang điện thoại: <button onclick="openModal(document.getElementById('modal_1'));">Clink here</button>
</div>
<div id="modal_1" class="modal" aria-hidden="true">
<div class="modal_box">
<p>Quét mã QR để mở bài viết trên điện thoại</p>
<img expr:src='"https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=" + data:post.url'/>
</div>
</div>
</b:if>
</b:if>
Thêm code dưới vào phía trước </body>
<b:if cond='data:view.isPost'>
<b:if cond='!data:blog.isMobile'>
<script>
//<![CDATA[
// github.com/AnTheMaker/Fusilli.js
const modalStyles=".modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);justify-content:center;align-items:center;user-select:none;z-index:999}.modal.open{display:flex}.modal_box{text-align:center;background:#fff;color:#000;margin:7px;padding:18px 20px;border-radius:8px;width:450px;min-height:200px;max-width:100%;max-height:calc(100% - 20px);overflow:auto;box-sizing:border-box;z-index:99;user-select:auto;pointer-events:auto}.modal_box p{color:#000;}.modal_close{float:right;margin:-6px -4px 0 10px;background:#fff;cursor:pointer;font-size:170%;z-index:999;color:#000}@media screen and (max-width:35.5em){.qrcode{display:none}}";function openModal(e){e.setAttribute("aria-hidden","false"),e.classList.add("open")}function closeModal(e){e.setAttribute("aria-hidden","true"),e.classList.remove("open")}window.addEventListener("load",function(){var e=document.createElement("style");e.type="text/css",e.innerText=modalStyles,document.head.appendChild(e),[...document.getElementsByClassName("modal")].forEach(function(e){modal_box=e.querySelector(".modal_box"),modal_box.insertAdjacentHTML("afterbegin",'<div id="close_'+e.id+'" class="modal_close">×</div>'),document.getElementById("close_"+e.id).addEventListener("click",function(){closeModal(e)}),e.addEventListener("click",function(o){closeModal(e)}),modal_box.addEventListener("click",function(e){e.stopPropagation()})})});
};
//]]> ;
</script>
</b:if>
</b:if>
0 comments for Tạo nút Gửi link bài viết sang điện thoại