hí anh em, thì cũng sắp qua năm mới rồi, cuối năm thì mình cũng muốn làm gì đó đẹp đẹp cho đời, cho nên hôm nay mình sẽ share cho anh em một cái code popup đón năm mới nhé.
code này có vài ưu điểm là khi các bạn reload lại trang thì popup này sẽ hiện lên, làm cho người dùng có chúc nào đó khó chịu. vì đây là code popup chúc tết nên chúc ta chỉ cần để vài ngày là đủ nhe, để trành gây nên tình trạng làm ảnh hưởng đến trải nghiệm người dùng.
 |
| 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("746427").style.display="none"'><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á.
