Tạo popup Happy New Year có nhạc cực chất cho Blogspot

Chào các bạn, dịp tết đang đến gần và mọi người đang chuẩn bị đón nó bằng cách trang trí nhà cửa, sắm đồ chơi tết... Còn đối với mình và cũng như các bạn thì còn một việc nữa là trang trí cho Blog của mình để có thêm không khí của mùa Xuân đúng không nào!

Tạo popup Happy New Year có nhạc cực chất cho Blogspot.

Đây có lẽ là một ý tưởng mới để tạo trang trí tết cho blogspot. Popup có nút tắt, có kết hợp trình phát nhạc. Tuy nhìn đơn giản nhưng nó là sự mới lạ.

Tạo popup Happy New Year có nhạc cho Blogspot

Đầu tiên các bạn tạo một Tiện ích HTML/Javascript và chèn đoạn code phía dưới vào

<style>
/*  New Year Pop Up Widget By AnhTraiNang.com  */
@-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>

Lưu tiện ích lại.

Tiếp theo các bạn vào Chủ đề > Chỉnh sửa HTML và tìm đến thẻ /body và chèn đoạn code sau lên trên nó

<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'> 2024 </div> <div class='subtext'> Mong chờ những cuộc phiêu lưu mới. </div> </div> <div class='player-bottom'> <audio autoplay='' controls=''> <source src='https://www.tones7.com/media/happy_new_year281212.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if>

Cuối cùng lưu chỉnh sửa lại và ra trang chủ Blog của bạn nhấn F5 để xem kết quả nhé!

Lời kết

Chúc các bạn và gia đình một năm mới nhiều niềm vui mới. Mình sẽ cố gắng cho ra nhiều bài viết trang trí tết sắp tới cho các bạn. Cảm ơn tất cả các bạn đã ghé thăm nhé!

HAPPY NEW YEAR

2024

Mong chờ những cuộc phiêu lưu mới.