Home
Blogger

Merry Christmas & Happy New Year wishing popup for Blogger

2


Hello Guys! Welcome to Shiva Technic World in this article we are going to give the Merry Christmas & New Year popup for Blogger so let's check.

Advantages

By using the Merry Christmas & Happy New Year popup you can wish your visitors Happy Christmas & Happy New Year and your site visitors will become happy.

How it works?

It will show a popup after the page is completely loaded it also has a close button to close the popup. It only shows on the homepage and is also responsive.

Which codes are used?

This popup code used CSS and HTML Codes.

How to add?

First copy this CSS and paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;
 <style>
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .STW-christmas-new-year{ position: fixed; background-image: url(&#39;https://media2.giphy.com/media/hqIaXesRGpP44/giphy.gif?cid=ecf05e47ci9vsj9lkzi1gtai2zgxeh9smpre73kyvgfzt2df&amp;rid=giphy.gif&amp;ct=g&#39;); 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; } .STW-new-year:before{ content: &quot;&quot;; background-image: url(&#39;https://cdn.statically.io/img/1.bp.blogspot.com/-IELKsnCdJ_E/X-CNUytCXVI/AAAAAAAADPU/ajvjFLDFEbE8qCFuQLn0Z93HR6NymMpOwCLcBGAsYHQ/s0/giphy.gif&#39;); background-size:cover; width: 100%; height:100%; opacity: 0.1; } .stw-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: 13px;display:block;padding-top:12px;font-family: &#39;Bangers&#39;, 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>
Then add this code above </body> or &lt;!--</body>--&gt;&lt;/body&gt;
<b:if cond='data:view.isHomepage'>
<div class='STW-christmas-new-year' id='546478'> <div class='stw-close' onclick='document.getElementById(&quot;546478&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'>MERRY CHRISTMAS &amp; HAPPY NEW YEAR </div> <div class='title2x'> </div> <div class='subtext'>We wishes you and your family Merry Christmas &amp; Happy New year. </div></div></div>
</b:if>
View demo  Watch tutorial

Last words

Hope this article will help you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site. Have a nice day!

We wish you and your family Merry Christmas & Happy New Year!