popup cute


xin chào mọi nha, nay một ngày đẹp trời, nên hôm nay mình xin chia sẽ cho mọi người một cái popup siêu đẹp và siêu cute phô mai que nha

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 Đẹ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ó.
        @-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%); }
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é )



Thay phần màu vàng thành link nhạc của bạ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'> 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>

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='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>

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.
DMCA Terms Of Use Contact