Happy New Year Wishing Popup Widget Script for Blogger

Photo of author
Rohit Baidya

Hello friends, welcome to the Techly360 blog. And today in this article, we will know about Happy New Year Wishing Popup Widget Script for Blogger Script. And in such a situation, many friends nowadays use Blogger or Blogspot to do blogging.

In such a situation, there is no facility to install any plugin for Blogger. So Blogger Widget has been started for this. In this way, new blogger Widgets are being created by coding.

Happy New Year Wishing Popup Widget Script for Blogger

New Year Wishing Popup Widget

Now, finally, what is this Wishing Popup Widget. So let me tell you that this is a Blogger New Year Wishing Popup Widget. After implimenting it in your Blogger or Blogspot Blog, a PopUp Widget will open as soon as your blog opens.

To apply it to your blog, some script has to be used. A mixture of HTML and Pure CSS is seen in this script. So follow the steps given below.

Also Read:–

How to Add New Year Wishing Popup Widget in Blogger

  • First of All Go To Blogger Dashboard
  • Now Go To Theme > Edit Theme & Search </Head>
  • Copy CSS Code Bellow & Paste Above </Head> Tag

<style>
/*  New Year Pop Up Widget By Techly360.com  */
@-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%); }
</style>
  • Search <Body> in Your Blogger template Script
  • Now Copy The Following HTML Codes & Paste Bellow <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.tones7.com/media/happy_new_year281212.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if>
  • Now View or Refresh Your Blog
  • Boom! You’ll See New Year PopUp Widget Box

Conclusion – So friends how did you like this Happy New Year Wishing Popup Widget Script for Blogger article. Be sure to comment below. And do share this article with your friends.