Tạo Popup Chúc Mừng Năm Mới 2021 Đẹp Cho Blogger/Blogspot

Tạo Popup Chúc Mừng Năm Mới 2021 Đẹp Cho Blogger/Blogspot

Tạo Popup Chúc Mừng Năm Mới 2021 Đẹp Cho Blogger/Blogspot


Xin chào các bạn, chỉ còn vài ngày nữa thôi là qua năm 2021 rồi cho nên hôm nay mình sẽ chia sẻ cho các bạn cách Tạo Popup Chúc Mừng Năm Mới 2021 Đẹp Cho Blogger/Blogspot. Với popup này, nó sẽ giúp cho blog của bạn có một không khí tết rất bắt mắt nhé.

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 Mừng Năm Mới 2021 Đẹ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 NguyenLamBlog  */
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .AT-new-year{ position: fixed; background-image: url('https://ift.tt/3aHSgik'); 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://ift.tt/3mNxYGr'); 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='https://ift.tt/2lINxlf 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://ift.tt/3pqtEhQ' type='audio/mpeg'/> </audio> </div> </div>
</b:if>

Thay phần màu vàng thành link nhạc của bạn

Ví dụ:

<body>
<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='https://ift.tt/2lINxlf 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://ift.tt/3pqtEhQ' type='audio/mpeg'/> </audio> </div> </div>
</b:if>

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é.

Read This

We share content only for testing purpose and help those who didn't afford money to buy, not for commercial use.Please, If you have money then we strongly recommend to buy it from original authors or legally because they put really very hard work in making it.
If you are the owner of this content and you have problem with this then, mail us We will remove it as soon as Possible.



Previous Post
Next Post

post written by:

Tips And Tricks । Tech Forum and Community

0 Comments: