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

5/5 - (1 bình chọn)
Tạo Popup Chúc Mừng Năm Mới 2021 Đẹp Cho Blogger/Blogspot

Xem Thêm : Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

 

Xem Thêm : Hướng dẫn cài đặt templates blogspot bán hàng chuyên nghiệp

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

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

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

Xem Thêm : Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

 

Xem Thêm : Hướng dẫn cài đặt templates blogspot bán hàng chuyên nghiệp

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://www.nguyenlamblog.xyz/2020/12/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://www.nguyenlamblog.xyz/2020/12/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é )

Xem Thêm : Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

 

Xem Thêm : Hướng dẫn cài đặt templates blogspot bán hàng chuyên nghiệp

<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://www.nguyenlamblog.xyz/2020/12/https://kit.nguyenlamblog.xyz/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
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://www.nguyenlamblog.xyz/2020/12/https://kit.nguyenlamblog.xyz/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

Xem Thêm : Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

 

Xem Thêm : Hướng dẫn cài đặt templates blogspot bán hàng chuyên nghiệp

———————————–


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

  1. Unknown says:

    cho e hỏi chút ạ
    a href=&#39;/search/label/Tinh%20D%E1%BA%A7u%20Nguy%C3%AAn%20Ch%E1%BA%A5t&#39;&gt;
    khi để link như thế này sao lại không có các bài đăng có label &quot;tinh dầu bán chạy&quot;
    bác chỉ cho e cách fix lỗi này với ạ

  2. Nguyễn Vũ --- ĐÔNG HÀ LAND says:

    admin cho mình hỏi làm sao để có thể kết nối thanh toán đến với google docs với ạ

  3. Đỗ Mạnh Hồng says:

    Xem hướng dẫn ở đây nha bạn share123bloggertemplates.com/2017/08/huong-dan-lien-ket-forms-lien-he-voi-google-docs.html

  4. Phương says:

    Cho em hỏi cái danh mục sản phẩm click ra sp đó a, sao cứ nằm dưới giỏ hàng ,e chỉnh z-index hoài k lên được, A chỉ e giúp ạ?

  5. PxLog says:

    xin lỗi bạn, nhưnng tại sao mình cài template, mầu sắc bố cục trang lại lộn xộn lung tung so với demo của bạn thế nhỉ??.
    shop-halong.blogspot.com/
    Mình không biết chỉnh kiểu gì, mong bạn giúp đỡ.

  6. Unknown says:

    a ơi, Em muốn hỏi về phần nhập nội dung sp ạ. Em đã set up phần bài viết vào phần khác và đã được như a hướng dẫn ạ. Nhưng khi e thay đổi nội dung sp thành nội dung sp của em thì nó lại bị như thế này ạ.
    gaudephcm.blogspot.com/2018/01/gau-bong.html
    Anh hỗ trợ giúp em với ạ, Em cảm ơn anh ạ

  7. Tràn thủ Độ says:

    Bác Đỗ Mạnh Hồng bác có thể hướng dẫn em xóa cái ảnh cứ ở cuối cùng trong mỗi bài viết về thông tin liên hệ mua tinh dầu oải hương với được ko ah. Em tìm ảnh đó trong mẫu mà không thấy. Bài nào cũng có bác ah. Em chuyển từ blog cũ sang có dược không ah. Còn mỗi phàn đó là chưa làm được mong bác giúp dỡ ah. Em bảm ơn!
    Blog của em: bangcannuocsikahanoi.blogspot.com/
    một làn nữa em xin cảm ơn bác. Blog thật tuyện làm trang web chính cũng quá ổn

  8. Đỗ Mạnh Hồng says:

    Bạn tìm đoạn ảnh này và thay ảnh khác nha -yfZmdrg2YpY/WmoTn506ocI/AAAAAAAAAJ8/167nZtPlcYsSUkjQTLJwBLtXMWKnFQWigCLcBGAs/s1600/banner%2Bblog%2Bbang%2Bcan%2Bnuoc.jpg

  9. tubevivu says:

    anh cho em hỏi: em click vào Label thì trên trang không hiển thị bài đăng nào cả, Label em kiểm tra rất kỹ liên kết đầy đủ mà khi click thì tất cả bài đăng thuộc nhãn đó không hiển thị. anh chỉ giùm em nhé

  10. Unknown says:

    Bác ơi có thể chia sẽ phần miền sửa ảnh dc không ạ. miển phí nhe bác.Cảm ơn bác. blog đẹp lắm ạ.