Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Blog

Hướng dẫn tạo Popup Sale ảo hiển thị trên blogspot

Hướng dẫn tạo Popup Sale ảo hiển thị trên blogspot hoặc các website bán hàng, nhằm thu hút sự chú ý của khách hàng và tăng chuyển đổi bán hàng trên trang web hoặc blogspot.

Hướng dẫn tạo Popup Sale ảo hiển thị trên blogspot

Cách cài đặt đơn giản là bạn chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.


<style>
.jas-sale-pop{background:#fff;bottom:-100%;left:20px;right:20px;padding:10px 30px 10px 10px;box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:3px;opacity:0;visibility:hidden;transition:all 2s;z-index:99999;position:fixed;right:auto;top:auto!important;border-radius:7px}
@media (max-width:480px){.jas-sale-pop{left:10px;right:10px;max-width:300px}.jas-sale-pop .jas-sale-pop-content{max-width:180px}}
.jas-sale-pop .mr__20{margin-right:10px}
.jas-sale-pop h4{color:#fff;margin:0;font-size:14px;font-weight:normal;margin-bottom:5px}
.jas-sale-pop h3{margin:0;font-size:15px;max-width:255px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.jas-sale-pop h3 a{color:#fff;margin:0;font-size:14px}
.jas-sale-pop .jas-sale-pop-timeago{color:#fff;font-size:12px}
.jas-sale-pop .pe-7s-close{right:5px;top:0;cursor:pointer;position:absolute;color:#fff}
.jas-sale-pop .pe-7s-close:before{content:"\00D7"}
.jas-sale-pop.slideUp{bottom:20px;opacity:1;visibility:visible}
.jas-sale-pop.middle-xs{-webkit-box-align:center;-ms-flex-align:center}
.jas-sale-pop.flex{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;background: #f02b2b;}
</style>
<div class='jas-sale-pop flex pf middle-xs'/>
<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function($) {
    SalesPop()
  });

  function fisherYates(myArray) {
    var i = myArray.length,
      j, temp;
    if (i === 0) return false;
    while (--i) {
      j = Math.floor(Math.random() * (i + 1));
      temp = myArray[i];
      myArray[i] = myArray[j];
      myArray[j] = temp;
    }
  }
  var collection = new Array();
  collection[0] = "<a href='#' class='jas-sale-pop-img mr__20'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisr1s-Ak9AXEzxREU25QSh28dRedrHqflxm1h-GhvosBVt7Y3_oAAxcvb2f0Zc_zSQYztP1yYa5XIVzvEEgMZVUBzPPPneWYRPI5mJjLkvjD0_HPR0xVWyW_9aUy5gjNip1TmnHXzlhI0/w240-h240-p-k-no-nu/d.jpg' alt='Jumsuit họa tiết hoa cột eo' width='65' height='84' /></a><div class='jas-sale-pop-content'><h4 class='fs__12 fwm mg__0'>Sản phẩm</h4><h3 class='mg__0 mt__5 mb__5 fs__18'><a href='#' title='Jumsuit họa tiết hoa cột eo'>Jumsuit họa tiết hoa cột eo</a></h3><span class='fs__12 jas-sale-pop-timeago'></span></div><span class='pe-7s-close pa fs__20'></span>";
  collection[1] = "<a href='#' class='jas-sale-pop-img mr__20'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEPKhNAkdt_npJtH0kZZkdEWYAkcKj_nZk8qy9cOPWUvqVmyo0auLs_3Lmr4SGuimFx4MwVWd2vQaLNDMXl2RyYB9Z_GD1f72T8n_gnW0tpcuuAwbOVzdhnpwWy61C1CvTXvBCUfzRJ0/w240-h240-p-k-no-nu/d1.jpg' alt='Áo khoác kaki nữ sang trọng' width='65' height='84' /></a><div class='jas-sale-pop-content'><h4 class='fs__12 fwm mg__0'>Sản phẩm</h4><h3 class='mg__0 mt__5 mb__5 fs__18'><a href='#' title='Áo khoác kaki nữ sang trọng'>Áo khoác kaki nữ sang trọng</a></h3><span class='fs__12 jas-sale-pop-timeago'></span></div><span class='pe-7s-close pa fs__20'></span>";
  collection[2] = "<a href='#' class='jas-sale-pop-img mr__20'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw9sjdw6Brf8aUWt2FdoTCGZ-uUKjM2f9rJFuBTG6GiFkOCBRGtUGHG8pY25wtAITvNV1_MsMnB99JMSGYJ7Up2ADdHIPswRXYTCYyqAGxbAEJRYqbOMeqm23sHDnsxRSIJen-rctgg6U/w240-h240-p-k-no-nu/deal.jpg' alt='Áo dài phối váy tay ngắn' width='65' height='84' /></a><div class='jas-sale-pop-content'><h4 class='fs__12 fwm mg__0'>Sản phẩm</h4><h3 class='mg__0 mt__5 mb__5 fs__18'><a href='#' title='Áo dài phối váy tay ngắn'>Áo dài phối váy tay ngắn</a></h3><span class='fs__12 jas-sale-pop-timeago'></span></div><span class='pe-7s-close pa fs__20'></span>";

  function SalesPop() {
    $(".jas-sale-pop").length < 0 || setInterval(function() {
      $(".jas-sale-pop").fadeIn(function() {
        $(this).removeClass("slideUp")
      }).delay(5e3).fadeIn(function() {
        var t = ["1 phút", "5 phút", "10 phút", "12 phút", "14 phút", "16 phút", "18 phút", "20 phút", "25 phút", "30 phút", "36 phút", "38 phút", "40 phút", "42 phút", "45 phút", "50 phút", "1 giờ", "2 giờ", "3 giờ"],
          e = Math.floor(Math.random() * t.length),
          p = Math.floor(Math.random() * collection.length),
          a = collection[p],
          h = t[e];
        $(".jas-sale-pop").html(a), $(".jas-sale-pop-timeago").text("Đã được mua cách đây " + h), $(this).addClass("slideUp"), $(".pe-7s-close").on("click", function() {
          $(".jas-sale-pop").remove()
        })
      }).delay(15e3)
    }, 5e3)
  }
  fisherYates(collection);
  //]]>
</script>


Trong đó:

Mỗi sản phẩm chính là collection bên trên, nó gồm link hình, link sản phẩm, tên sản phẩm. Các bạn có thể thêm nhiều collection[0] -> [n].

Chỉnh lại CSS bên trên cho phù hợp với Template bạn đang dùng như: Màu chữ, màu nền...

Blogspot phải sử dụng thư viện jQuery, đa số blogspot nào cũng sử dụng  thư viện này, các bạn bỏ qua bước này, blogspot nào chưa có thì phải thêm thư viện bên dưới trước thẻ đóng </head> hoặc dán bên trên của đoạn code ở trên.


Bản không có hình ảnh

Popup Sale ảo




<style>
.jas-sale-pop{line-height: 1.2;bottom:-100%;left:20px;right:20px;padding:10px 30px 10px 10px;box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:3px;opacity:0;visibility:hidden;transition:all 2s;z-index:99999;position:fixed;right:auto;top:auto!important;border-radius:7px}
@media (max-width:480px){.jas-sale-pop{left:10px;right:10px;max-width:350px}}
.jas-sale-pop .mr__20{margin-right:10px}
.jas-sale-pop h4{color:#674747;margin:0;font-size:14px;font-weight:normal;margin-bottom:5px}
.jas-sale-pop h3{margin:0;font-size:15px;max-width:350px;color:#674747}
.jas-sale-pop .jas-sale-pop-timeago{color:#674747;font-size:12px}
.jas-sale-pop .pe-7s-close{right:5px;top:0;cursor:pointer;position:absolute;color:#674747}
.jas-sale-pop .pe-7s-close:before{content:"\00D7"}
.jas-sale-pop.slideUp{bottom:20px;opacity:1;visibility:visible}
.jas-sale-pop.middle-xs{-webkit-box-align:center;-ms-flex-align:center}
.jas-sale-pop.flex{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;background: #e2d6d6}
</style>
<div class='jas-sale-pop flex pf middle-xs'></div>
<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function($) {
    SalesPop()
  });

  function fisherYates(myArray) {
    var i = myArray.length,
      j, temp;
    if (i === 0) return false;
    while (--i) {
      j = Math.floor(Math.random() * (i + 1));
      temp = myArray[i];
      myArray[i] = myArray[j];
      myArray[j] = temp;
    }
  }
  var collection = new Array();
  collection[0] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Phạm Văn Long</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  collection[1] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Trần Minh Phương</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  collection[2] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Phạm Ngọc Hải</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  collection[3] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Trịnh Ngọc Thu</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  collection[4] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Lê Thị Ngọc</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  collection[5] = "<div class='jas-sale-pop-content'> <h4 class='fs__12 fwm mg__0'>Phạm Thu Thảo</h4> <h3 class='mg__0 mt__5 mb__5 fs__18'>Đã đăng ký thành công và nhận 500K</h3><span class='fs__12 jas-sale-pop-timeago'></span> </div><span class='pe-7s-close pa fs__20'></span>";

  function SalesPop() {
    $(".jas-sale-pop").length < 0 || setInterval(function() {
      $(".jas-sale-pop").fadeIn(function() {
        $(this).removeClass("slideUp")
      }).delay(5e3).fadeIn(function() {
        var t = ["1 phút", "5 phút", "10 phút", "12 phút", "14 phút", "16 phút", "18 phút", "20 phút", "25 phút", "30 phút", "36 phút", "38 phút", "40 phút", "42 phút", "45 phút", "50 phút", "1 giờ", "2 giờ", "3 giờ"],
          e = Math.floor(Math.random() * t.length),
          p = Math.floor(Math.random() * collection.length),
          a = collection[p],
          h = t[e];
        $(".jas-sale-pop").html(a), $(".jas-sale-pop-timeago").text("Cách đây " + h), $(this).addClass("slideUp"), $(".pe-7s-close").on("click", function() {
          $(".jas-sale-pop").remove()
        })
      }).delay(15e3)
    }, 5e3)
  }
  fisherYates(collection);
  //]]>
</script>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Post a Comment