How to Create Wishing Pop Up Widget in Blogger Website
Hello Friends, Welcome to The Kathait. In this article, We will Discuss, How to Create Wishing Pop Up Widget on the blogger website. Adding Wishing Pop Up Widget is Very Easy to Implement And there will also be a good bonding between you and your readers. This article will be very helpful for you.
Happy New Year 2022 Wishing Pop Up Widget
A New Year is usually considered as a new beginning to all your works and letting go of laziness. People set their corresponding New Year resolutions and have fun on this day to a large extent. The New Year is considered and maintained as a national public holiday and most of the businesses and offices are closed on this lucky day. Here you can find a lot more stuff on happy New Year 2022.
Happy New Year 2022 is about to come and it has come with all kinds of fanfare. It is a huge festival and people all over the world celebrate it with great joy and awe. So many millions of people around the world, so much to party, so much to enjoy and so much to learn. People wait for this day throughout the year. We have handpicked a pop-up gadget to wish all your readers a Happy New Year's Eve.
- You can apply the Pop-Up New Year Widget on your blog by using the below code.
Step 1: Look for the code </head> on your template and paste the following code just above the </head> code.
<style>
/* New Year Pop Up WIdget By The Kathait */
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .AT-new-year{ position: fixed; background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEiowCg9gCPuJx4Bt0DbHgLN-zyrZrKjNvqsL8BdO_jW4LH42COr1s6vvT5sGHWLgvw9QzhHjkS8aHqHQaP6VaeK7UzfavWM5VwqJNSlzmJLWGxNV3thzKOh7G_DJD5HrjMyo_lkqzT8Ck3kUfBXNxUQDjsUHWNmwXd2iw83q0L2YtdKyACAEj8G5nTchw=s16000'); 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>Step 2: Search for the code </body> on your blog and paste the following code just above the </body> code.
<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'> 2022 </div> <div class='subtext'> P S Kathai wishes you and your family a very happy new year 2022. </div> </div> <div class='player-bottom'> <audio autoplay='' controls=''> <source src='https://www.mp3bell.com/ringtones/happy-new-year-2021-ringtone.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if>If you have added please Click Save Theme on your template.
Merry Christmas 2021 Wishing Pop Up Widget
On this delighted day, everyone wants to celebrate this huge day with their own style. Some people love to arrange parties to welcome the beginning of the new year. Some others love to do a firework and welcome new year 2022 with full of energy. Most cities decorate their streets with wonderful street lamps and amazing lightning. Many houses also still remain decorated from the Christmas festival which just went by 5-6 days ago. To compare these 2 festivals both have a very large and greater impact on the world than any other festival in the world. We have handpicked a pop-up widget to wish all your readers a Happy Merry Christmas Eve.
- You can install the Pop-Up New Year widget on your blog by following the given setup using the code given below.
Step 1: Search for the code </head> on your blog and paste the following code just above the </head> code.
<style>
/* New Year Pop Up WIdget By The Kathait */
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .AT-new-year{ position: fixed; background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEieeO9rrVblzQfolPDrT4kKrsnFxwjQ8p2OCw6GEW_Tfa4-dpprjnK3yJdQ8ykKImgnCtyoPS5OszwvxZ0YdhW9bq7PqKJGaExtzlb5chR5rqT5GNsmBVxxELvKAYMoBwviTrLglLCv2ZjSDZFdM3gW1uPFZtrhjNQrvLSJnK1Zl7JprRuvGj6rXzWOBw=s16000'); 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>
Step 2: Search for the code </body> on your blog and paste the following code just above the </body> code.
<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'> MERRY CHRISTMAS </div> <div class='title2x'> 2021 </div> <div class='subtext'> P S Kathai wishes you and your family a very Merry Christmas. </div> </div> <div class='player-bottom'> <audio autoplay='' controls=''> <source src='https://www.mp3bell.com/ringtones/happy-new-year-2021-ringtone.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if>If you have added please Click Save Theme on your template.
P S Kathai wishes you and your family a very Merry Christmas & Happy New Year 20222.
Post a Comment