Trong quá trình tìm kiếm tài liệu trên mạng internet, ắt hẳn trong số các bạn đã từng gặp trường hợp là sau xem xong tài liệu trên một Website nào đó và khi di chuyển chuột lên khu vực Tab của trình duyệt để thoát trang thì có một Popup hiện lên với nội dung như:
+ Một lời cảm ơn đã xem Blog (Website) kèm theo Form đăng ký nhận bài viết qua email.
+ Giới thiệu một sản phẩm độc đáo nào đó mà họ đang bán.
+ Một lời mời tham dự hội thảo, khóa học...
+ Tặng tài liệu Ebook, Voucher giảm giá...
+ Hoặc một nội dung nào đó mà họ cảm thấy nó có giá trị cho người xem.
Bài này mình chia sẻ với các bạn cách để tạo Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot hay còn gọi là Exit-intent popup.
Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot.
Để sử dụng Exit-intent popup các bạn làm theo các bước sau:
Bước 1:
Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML sau đó dán đoạn CSS và đường dẫn Javascript dưới đây vào trước thẻ </head>
<script
src='https://cdn.jsdelivr.net/gh/ntlruby/javascript/Popup-exit-intent.js'
type='text/javascript'/>
<style>
#ouibounce-Popup-exit-intent{z-index:999999;font-family:'Open
Sans',sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%}#ouibounce-Popup-exit-intent
.underlay{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);cursor:pointer;-webkit-animation:fadein
.5s;animation:fadein .5s}#ouibounce-Popup-exit-intent
.Popup-exit-intent{width:600px;height:400px;background-color:#f0f1f2;z-index:999999;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:4px;-webkit-animation:popin
.3s;animation:popin .3s}#ouibounce-Popup-exit-intent
.Popup-exit-intent-title{font-size:18px;background-color:#3184ff;color:#fff;padding:10px;margin:0;border-radius:4px
4px 0 0;text-align:center}#ouibounce-Popup-exit-intent
h3{color:#fff;font-size:1em;margin:.2em;text-transform:uppercase;font-weight:500}#ouibounce-Popup-exit-intent
h3:hover{text-decoration:underline;}#ouibounce-Popup-exit-intent
.Popup-exit-intent-body{padding:20px 35px;font-size:.9em}#ouibounce-Popup-exit-intent
p{color:#344a5f}#ouibounce-Popup-exit-intent
form{text-align:center;margin-top:35px}#ouibounce-Popup-exit-intent form
input[type=text]{padding:12px;font-size:1.2em;width:300px;border-radius:4px;border:1px
solid #ccc;-webkit-font-smoothing:antialiased}#ouibounce-Popup-exit-intent form
input[type=submit]{text-transform:uppercase;font-weight:700;padding:12px;font-size:1.1em;border-radius:4px;color:#fff;background-color:#4ab471;border:none;cursor:pointer;-webkit-font-smoothing:antialiased}#ouibounce-Popup-exit-intent
form
p{text-align:left;margin-left:35px;opacity:.8;margin-top:1px;padding-top:1px;font-size:.9em}#ouibounce-Popup-exit-intent
.Popup-exit-intent-footer{position:absolute;bottom:20px;text-align:center;width:100%}#ouibounce-Popup-exit-intent
.Popup-exit-intent-footer
p{text-transform:capitalize;cursor:pointer;display:inline;border-bottom:1px
solid #344a5f}@-webkit-keyframes
fadein{0%{opacity:0}100%{opacity:1}}@-ms-keyframes
fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes
popin{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-ms-keyframes
popin{0%{-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-ms-transform:scale(1);transform:scale(1);opacity:1}}@keyframes
popin{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}}
Bước 2:
</body> và dán đoạn code bên dưới vào trước nó.<div id='ouibounce-Popup-exit-intent'>
<div
class='underlay'/>
<div
class='Popup-exit-intent'>
<div
class='Popup-exit-intent-title'>
<h3>Cảm ơn bạn đã xem Blog NTLRUBY!</h3>
</div>
<div
class='Popup-exit-intent-body'>
Nội dung Popup của các bạn
</div>
<div class='Popup-exit-intent-footer'>
<p
onclick='document.getElementById('ouibounce-Popup-exit-intent').style.display
= 'none';'>Không, Cảm ơn! </p>
</div>
</div>
</div>
<script>
var _ouibounce
=
ouibounce(document.getElementById('ouibounce-Popup-exit-intent'),
{
aggressive: true,
});
<p style="text-align: center;">Bạn sẽ là người
đầu tiên nhận được những thủ thuật mới được đăng tải trên Blog <a
href="https://www.ntlruby.com/"><b>NTLRUBY</b></a>
</p>
<div id='subscribe-css'>
<p class='subscribe-note'><span>Nhận
Tin</span> <span class='itatu'/>Khi Có Bài Đăng Mới</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form
action='https://api.follow.it/subscription-form/MUI2a1lpOXUzcXcwa0tGWnluV3NvTFdibTNYa1FpVW8wb0VzRWdZQ3hNcUkvV1ZnZVpLaktuQnZwUmlvZGowRnpNYUdIazU0Z2E2dWFlQUVKTXVUOXlZSWt5R0YxcnBTSEhnN1NpREt1ME1XMXB3T1pSVEVWWjR0MmNaR1dpMlR8S0wzbFVIR05rSXhVL0xNV2liRlVMQWZROWNrL0RnT0xaWnZ3VUhUWTE3MD0=/8'
method='post'>
<input name='uri' type='hidden'
value='Ntlruby'/><input name='loc' type='hidden'
value='en_US'/><input autocomplete='on' class='subscribe-css-email-field'
name='email' placeholder='Nhập Email Của Bạn'
required=""/><input class='ripplelink
subscribe-css-email-button' title='' type='submit' value='Đăng Ký'/></form>
</div>
</div>
</div>
<style>
#subscribe-css{position:relative;padding:20px
0;background:#0a3d53;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#0c4862;color:#ccc;margin:10px
0;padding:15px 20px;width:50%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px
30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all
.6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css
p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span
{position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu
{font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note
span.itatu:before,#subscribe-css p.subscribe-note
span.itatu:after{display:none}
#subscribe-css p.subscribe-note
span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px
0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note
span:before{width:100%;}
.subscribe-css-email-field::-webkit-input-placeholder,.subscribe-css-email-field::-moz-placeholder,.subscribe-css-email-field:-ms-input-placeholder,.subscribe-css-email-field:-moz-placeholder{color:rgba(255,255,255,.7)}
Facebook