Friday, 15 April 2016

Happy New Year Responsive Popup Widget for Website.

Posted by Unknown

You may find a demo popup on this page. Yes you will get same popup widget for your website and blog. This widget having totally responsive design that will match with your mobile version also. 

On occasion of Happy New Year 2017, Wish a very happy new year to your visitor with help of popup widget for blogger blog or a website. Visitors relationship are most important for any business and when it's come to the website or blog one will never miss that opportunities.  



Desktop Screenshot of a widget.
New Year popup wish widget




Mobile Screenshot of a widget.


New Year popup Widget


Happy New Year Responsive Popup Widget for Website.


<style type='text/css'>
#happynewyears2016FBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#happynewyears2016FBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#happynewyears2016FBpop').animate({top:"50px"}, 1000);
// Widget by www.happynewyears2016.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='happynewyears2016FBpop'>
<!-- Widget by www.happynewyears2016.com Start -->
<center><b><a class="Happynewyears2016">Wishing You All A Very Happy New Year...</a></b><br/></center>
<center>
<a href="http://www.happynewyears2016.com/2015/11/popup-wish-widget-for-website.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Happy New Year 2017 Widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGMkV6_Smz9qdAwfk6BGu1mYK5eTLmylG-PQ24wANJL9bPtR7AUvnMf-7mKmzzfc022LPAI1MH-ikdecjXSmM_bckdr8nQnPxlt4bXQzCAZAdP_zmCZzUtkRFt48Pm_fGj9EAl4rBDJE/s1600/new-year-widget-blogger-popup.jpg" title="Happy New Year 2017 Widgets" /></a></center>
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.happynewyears2016.com/2015/11/popup-wish-widget-for-website.html">Happy New Year 2017</a></center>
</div>
You may change image in above bold image code. Make sure that your new image size will be in 292px*258px dimension.



If you are blogger user than navigate blogger dashboard > layout > add widget > paste the above code in content field. and than Click on Save button that set.

If you are non blogger user and want to use this widget than add the above code anywhere in <body>


 tag that set.



Conclusion:


This is free and open source to share this code, however to reach every needy person we have added a link to this post in widget so we request you please do not remove that link. Thanks a lot for using our tutorial.

0 comments:

Post a Comment