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

<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://ift.tt/3rfhSIz' 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://ift.tt/2NPabur' 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://ift.tt/2Pkp347' 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>

<script src='https://ift.tt/3bcGSup>