Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and happy new year, we are releasing today a dynamic popup for new year so that you may not remain dependant on a fixed background theme and instead change the date and time by editing the text.
This Popup plugin contains 4 Unique Features!
- Falling snowflakes,
- It has a digital countdown timer,
- It has 3 different animations,
- Supports HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can choose to show the popup once or several times.
It is perfectly compatible with all major browsers. A perfect way to greet your website visitors. You can add it easily to your blogspot or wordpress blogs or on HTML webpage you may have. It is extremely easy to customize. View the demos below and then proceed to the installation guide.
Note: I have willingly set the counter to 2017 so that the demo may live longer :)
How to install this popup?
All steps are exactly similar to the ones we already shared on our christmas popups tutorial except for the styling which I will discuss here. Kindly therefore follow all steps shared in the Winter Holidays tutorial linked below. Follow all steps there and skip step#5.
Add the following CSS code instead of the code shared in step#5 of previous tutorial:
/* --------------------------------------------------
New Year Popup by MBT
-------------------------------------------------- */
#mbt-counter {
padding: 10px;
font-family: oswald,verdana;
background-color: transparent !important;
position: relative;
top: 28%;
font-size: 25px;
left: 28%;
text-shadow: 1px 2px 4px rgb(51, 51, 51);
color: rgb(255, 254, 198) !important;
border: 2px solid orange;}
.reveal-modal h2 {
position: relative;
top: 25%;
font-family: oswald,arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: orange;
text-align: center;}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin-left: -300px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtU3aX2esST0txTR2jBguN0HwxYQytb3CRxs9kvcs02AcO7gCOyv-Hcj_I_0IcWSoml0HYLkpbmKhOcWPsKNMmCJDL-ub6-OGe6Rb74XqKs-PxvhYx9cBkBTj608hTCFB8QDsTD6KYxJ0/s1600/happy-new-year-png.png) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: orange;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
That's all!
Hide Winter Snow Fall
If you don't want to show the falling snow then kindly remove this code:
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250});
This code is given in step#4 of previous tutorial.
The HTML
For step#6 use the following HTML code
<div id="myModal" class="reveal-modal" >
<h2>Count Down Begins...</h2>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Need Help?
Kindly let me know if you needed any help. I whole heartedly expect that you will like this pleasant gift for new year. Happy new year 2016 buddies but before I go here goes my new year resolution:
"Spending more time with my newly born baby "Ifza" and ofcourse blogosphere."
Love you all buddies! What are your new year resolution? =)
Now that you have learnt how to hide HTML content in Blogspot blogs using the conditional tag "isMobileRequest", Its time to learn how to prevent blogger Widgets from loading inside Mobile devices for Responsive Blogger Templates. It is really important that your mobile site may load as faster as possible due to slow internet speed of Mobile browsers. In order to achieve this purpose, we need to hide some widgets that makes no sense in small screen devices. These Sidebar widgets could include your Fancy Subscription boxes, search boxes, Labels, Archives, PopularPosts, Blog ROLL, Recent comments and so on. Most of these widgets use jQuery or JavaScript that really slows down the site. Therefor we will not just hide the Widget HTML content but would also disable its javaScript. You can continue showing them in Desktop/Laptop devices but it is really advisable that you hide such widgets for mobile devices in order to speed up your Page load time as much as possible in order to rank higher on Mobile Search results. We have experienced a tremendous positive impact of this technique on our Blogger blog (mbt) and it has really helped increasing our mobile traffic a lot. Lets get started!
We have been asked several times how to find Gadgetid or widgetid of Blogger widgets so we thought a separate tutorial would be helpful in this case. We will share two ways to find and locate the widgetid and sectionid so both Windows users and Macintosh users may find it helpful. The page elements Section is now referred to as Layout section in Blogger dashboard. The widgets are mostly referred as Gadget in Layout section with blue highlighted links. Through this tutorial you will also understand how to easily locate widgets inside your blogger template using their IDs. 
Are we are going to discuss electronics or logic gates here? Of course not! :) Blogger Team has recently made some performance based changes to their XHTML Widget tags for layouts. They have introduced some logic operators to simplify long conditional expression using short and simple syntax thanks to Blogger Logical Operators. I have been testing Blogger templates since 7 years and the best thing I loved about it is the simplicity to retrieve data from the server. Although users are restricted from accessing the server side and database records but they have been given a great deal of access to call objects on Front end using Layout tags. Lets get straight to the fun ride!
In the first part of our series you learnt how to add a contact Form to your BlogSpot blog and control its display settings. Today you will learn how to change its stylesheet to reflect your custom styles with a more 
