popup cute

Hôm kia mình có lướt trên youtube và thấy popup này rất hay của anh Ấn Độ nên mình bê về chia sẻ cho các bạn :V


Cách Tạo Popup chúc tết Đẹp Cho Blogger/Blogspot


Để tạo popup này, các bạn hãy làm theo các bước sau đây nhé.

Bước 1: Đăng nhập vào Blogger.

Bước 2: Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML.

Bước 3: Tìm thẻ </head> và dán đoạn CSS dưới vào trên nó.


 
          <style>
/*  New Year Pop Up WIdget By KiMiDev  */
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .AT-new-year{ position: fixed; background-image: url('https://cdn.statically.io/img/1.bp.blogspot.com/-iT8SkVmVQf8/X-CNYZtQyFI/AAAAAAAADPc/HWj3qmXbqIMB0IiUHJ15Eep98GAaDLDQQCLcBGAsYHQ/s0/pngtree-festive-2019-pig-new-year-background-design-display-boardspring-festival-image_74331.jpg'); background-size:cover;-webkit-animation:hue 1s linear infinite; z-index: 50; align-items: center; max-width: 500px; max-height: 300px; border-radius: 5px; box-shadow: 0 6px 18px 0 rgba(9,32,76,.035); display: flex; padding: 12px 15px 12px 12px; left: 50%;box-sizing: border-box;transform: translate(-50%, -100%); top: 70%;width: 100%; height:100%;text-align: center;border: 4px solid #fefefe; } .AT-new-year:before{ content: ""; background-image: url('https://cdn.statically.io/img/1.bp.blogspot.com/-IELKsnCdJ_E/X-CNUytCXVI/AAAAAAAADPU/ajvjFLDFEbE8qCFuQLn0Z93HR6NymMpOwCLcBGAsYHQ/s0/giphy.gif'); background-size:cover; width: 100%; height:100%; opacity: 0.1; } .AT-close svg { width: 35px; height: 35px; fill: #fff; position: absolute; top: 4px; right: 8px; } .text-content{ z-index: 2; color: #fff; position: absolute; display:block; align-items: center;width: 100%; justify-content: center;padding-bottom: 42px; } .title2 { font-size: 34px; font-weight: 800;display:block; text-align: center; } .title2x{ font-size: 68px; font-weight: 800; text-align: center;display:block;text-shadow: 4px 4px #222, 7px 5px #ffff00; } .subtext{ font-size: 12px;display:block;padding-top:12px;font-family: 'Bangers', cursive; } .player-bottom { display:block;align-items: center;text-align: center;justify-content: center;} audio{height:32px; width: 250px; position: fixed; top: 92%; left: 52%; display: flex;flex-grow: 1; transform: translate(-50%, -100%); }
</style>
Các bạn chỉnh phần màu đỏ thành link ảnh tùy thích của bạn

Bước 4: Sau khi thêm CSS xong thì bạn hãy tìm đến thẻ <body> hoặc <body và dán đoạn mã HTML bên dưới vào dưới nó. ( Thẻ <body> hoặc <body thường nằm bên dưới </head> đấy nhé )

          <b:if cond='data:view.isHomepage'>
<div class='AT-new-year' id='746427'> <div class='AT-close' onclick='document.getElementById(&quot;746427&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='text-content'> <div class='title2'> HAPPY NEW YEAR </div> <div class='title2x'> 2021 </div> <div class='subtext'> Looking forward to new adventures. </div> </div> <div class='player-bottom'> <audio autoplay='' controls=''> <source src='https://kit.KiMiDev.ga/happy_new_year.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if>
Thay phần màu vàng thành link nhạc của bạn
Sau khi dán xong thì các bạn hãy ấn Lưu lại và vào blog của bạn xem kết quả nhé.
nếu có thắc mắc gì hay không làm được thì hãy comment cho mình biết mình sẽ giúp nhá.