Happy New Year Wishing Popup Widget Script for Blogger/Blogspot

Hello friends! Today in this article we are going to talk about Happy New Year Wishing Popup Widget Script for Blogger/BlogSpot. We will know all the answers to the Happy New Year Wishing Popup Widget Script for Blogger/BlogSpot. So stay with this article to know in more detail.

As we know New Year is coming and many of us bloggers want to put a Happy New Year widget in their blogger blog. It is very easy to install this widget in WordPress site because for this you have to install some plugins which after installing you will install Happy New Year widget in your blog. 

We need some scripts as no plugins of any kind are installed in Blogger. Using which you can put New Year Wishing Popup Widget in your Blogger blog. You must follow the steps below to install this widget in your Blogger blog. I hope you can easily apply the Happy New Year Wishing Popup Widget to your Blogger blog after following these steps.


How to add Happy New Year Pop-up Widget Script in Blogger (Step by Step)

Before you know the steps to add Happy New Year Pop-up Widget Script in Blogger, we would recommend you to make a backup of your Blog template, because if anything goes wrong then you have save your blog design safely.
  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code
  • Search for </head>, Paste the code above to this </head> tag.

/*  New Year Pop Up Widget By Wikitechlibrary.com  */
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .wiki-new-year{ position: fixed; background-image: url('https://1.bp.blogspot.com/-JSg66l0UE6c/X-3KfEdbamI/AAAAAAAAAS0/nZKpxiqYhXcqn2u1O48h6bW8tOthnRbzACLcBGAsYHQ/w400-h225/wikitechlibrary-happy-new-year.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; } .wiki-new-year:before{ content: ""; background-image: url('https://1.bp.blogspot.com/-YuidzgsZiHc/X-3K_mLiRlI/AAAAAAAAAS8/BuEkoeUpOCESdfC4kMF72FU0D1bQPr8YgCLcBGAsYHQ/w400-h265/wikitechlibrary-gif-happy-new-year.gif'); background-size:cover; width: 100%; height:100%; opacity: 0.1; } .wiki-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%); }
  • Now again press Ctrl+F and search for <body> and copy the below code.
  • Paste this code just below to the <body> tag.

<b:if cond='data:view.isHomepage'>
<div class='wiki-new-year' id='746427'> <div class='wiki-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.tones7.com/media/happy_new_year281212.mp3' type='audio/mpeg'/> </audio> </div> </div>

  • Now click on Save theme icon.
  • I hope you guys enjoyed the Happy New Year Wishing Popup Widget Script for Blogger. Now enjoy this Happy New Year Wishing Popup Widget Script for Blogger.


The purpose of today post is to provide you with the Happy New Year Wishing Popup Widget Script for Blogger/BlogSpot. Did you like these Happy New Year Wishing Popup Widget Script for Blogger/BlogSpot? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!