Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot - NTLRUBY -->
Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot
  • Popup hiển thị khi di chuyển con trỏ chuột ra khỏi Website Blogspot

       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.

    Thủ thuật blogger
       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.
       Exit-intent popup là thủ thuật để phát hiện khi người dùng rời khỏi trang Web của các bạn. Đây là một thủ thuật tuyệt vời giúp website có nhiều người đăng ký, tăng doanh số bán hàng, tăng view cho một website...Và thủ thuật này sẽ mang lại sự chú ý của người dùng một cách triệt để.
       Xem

    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:&#39;Open Sans&#39;,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}}

      </style>

    Bước 2:

       Tiếp théo các bạn kéo xuống thẻ </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(&apos;ouibounce-Popup-exit-intent&apos;).style.display = &apos;none&apos;;'>Không, Cảm ơn! </p>

                  </div>

          </div>

          </div>

          <script>

            var _ouibounce = ouibounce(document.getElementById(&#39;ouibounce-Popup-exit-intent&#39;), {

                aggressive: true,

            });

          </script>
       Trong đó chỗ "Nội dung popup của các bạn" là phần code hiển thị nội dung mà các bạn muốn truyền tải đến người dùng của mình.
          Ví dụ như trong Demo ở trên mình chèn Form đăng ký nhận bài viết qua Email.

          Nếu các bạn muốn sử dụng Form như trong Demo thì các bạn sử dụng đoạn code bên dưới.

    <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:&#39;&#39;;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)}

    </style>
       Trong đó các bạn nhớ thay đoạn mình tô vàng để thành Form đăng ký của các bạn nhé. Nếu bạn nào chưa nắm cách thay Form thì có thể tham khảo thêm bài này.

    Chúc các bạn thành công!

  • Bài Viết Liên Quan

    Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

    Google

    Zalo

    Không có nhận xét nào :

    Đăng nhận xét

    Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!