Hello every one, First of all a very happy new year to all of you. Here we have created this special new year event blog that is serving you all the stuff related to new year celebrations and here today we are come up with "Responsive Happy New Year with Sidebar Popup Widget."
Many web developers and blogger are too much curious about wishing new year through their website and blogs. We have identified such need and created many widgets for the same. Here on this blog post you will find responsive widget that will helps you to attract more visitors. Following are the screenshot of the images and you might be able to track this widget on right side of your desktop, laptop, tablets or mobile screen.
Desktop view of widget:
Mobile view of widget:
Wishes Happy New Year with Sidebar Popup Widget.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9D_KRT08Nbf80afD29tybqFIN5jKJ8vdg5ua8OkaFwW0AG130S4CAB8fBMMOqUS4mugv2LT2Csh_i401EiDtfq0JKDF3GDyDZSce7aSBEfd0cHiLxKp32ZFuYlo0HxKsOdVQDQVapOiM/s1600/new-year-popup-sidebar.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGMkV6_Smz9qdAwfk6BGu1mYK5eTLmylG-PQ24wANJL9bPtR7AUvnMf-7mKmzzfc022LPAI1MH-ikdecjXSmM_bckdr8nQnPxlt4bXQzCAZAdP_zmCZzUtkRFt48Pm_fGj9EAl4rBDJE/s1600/new-year-widget-blogger-popup.jpg" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>
Conclusion:
For Blogger User:If you are a blogger user than follow blogger Dashboard > Layout > Add Widget > Paste above code in content field without title.
For Non-blogger User:
Expect blogger user non blogger user may use this widget you just need to insert above code in your website template under <body> tag.
0 comments:
Post a Comment