4 in 1 hover slide out social networking widget for blogger

Tuesday, September 24, 2013

4 in one social network widget for blogger

Add a very beautiful hover effective four in one slide out social networking blogger widget to your blog and let your visitors like your facebook fan page, follow you on twitter, add you on their circles and subscribe your blog through email news letters. This widget will inspire your blog readers and increase your blog visitors from social networks sites. The more you have followers, facebooks fans, google plus circles and subscribers, the more visitors your blog will attract from the social network websites because after posting a post webmasters and bloggers either manually or automatically publish their blog posts to FB fan page and twitter account and similarly your blog fans, followers, subscribers and people on google plus who have added you to their circle will now about your new post. This mean the more you have followers, fans and subscribers the most your blog will have traffic.

Feature of this widget

This unique widget lets your blog visitors easily subscribe to your blog
This four in one widget
This stylish widget inspires your blog readers
This widget is easy to add to your blog without messing with the template html codes.
This widget lets your blog visitors to follow you on twitter, like your fb page, add you to their circles, and subscribe to your blog via emails.
This widget does not take any extra place or slot on your blog.

How to add this 4 in one slide out widget to your blog?

Login to your blogger account > dashboard > Layout
Click on Add a Gadget > select Html/Javascript
Now copy and past the below script after editing

<style> img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 240px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; } #NBTfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #NBT_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; } #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; } #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #NBT_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #NBT_right img { position: absolute; top: -2px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #NBT_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #NBT_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; } .submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } #youtube_right { z-index: 10001; background-color: #fefefe; border:2px solid #ff0000; border-top:2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right:2px solid #5b5b5b; border-left: hidden; width:301px; height: 106px; position: fixed; right: -304px; } #youtube_right_img { position: absolute; top: -2px; left: -33px; border: </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); jQuery("#youtube_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#youtube_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwz6X-iFREKzw6etdZ8T3b2RXHNlNW35xIe0c0nr84n6ip-BwZgwPw7KZGeE3Ctjv2SzPB7aBKqsu-D6tHdR8M_6cxHAJRXY6KiKqJLhaRnd3e7nKQTqvYcwzX_joOz4EdWrC-SCxuIbx2/s1600/NBTfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftenofworld&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 24%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGFWbmmYGZZe67hEc4l86CKhHf1AAlG-zwAf5BkJPGP6N-r4rqRWu5Vpdap2brsKa9HIVBnQ73dtdtQy-Z9733vVNYDN8UYQAYp6pd3gbqcwmzMj28L_p-GhXF6YK5I8YzltNXeL32PkW/s1600/NBTtwitter_right.png" /> <div style="width:248px;font-size:8px;text-align:right;"> <script type="text/javascript"> document.write(unescape( "%3Cscript src='http://twitterforweb.com/twitterbox.js?username=tenofworld1&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E" )); </script> <a href="http://NewBloggerTips.com" target="_blank"></a> </div> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 41%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt9t2bNchigKbN0lFmxY8lu9_NuuAL06xp5yK5MWSnbfWJNveCPt3zGC9cupD8MJtR0XzqVUPKMqdtdoR3zTGmfThSgpzdm79g7Cg_rpb-bdU9GSK-AaZIW0Wp4NT96QzFhEiPIlGNUcA/s1600/NBTgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://newbloggertips.com'> <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRl27KviqzmoO8cCOxjqOlbif8T_Z8-yXLpJZw_D5TT3ABbodZNMirC0QN4Rg9wcgjjQB2d2LzkcAJwnU_h7IeY2cRJuQ1sgd8MqubnaZ0lcoKWk6DDqq7bomSC-qWV1lQrU-VtVqQnl1G/s1600/best+blogger+tips.png' /> </a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/108164145416459843153" data-source="blogger:blog:followers" data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; var po = document.createElement( 'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName( 'script')[0]; s.parentNode.insertBefore( po, s); })(); </script> </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 58%;"> <div id="NBTfeedburner_div"> <center> <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TenOfWorld', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /> <input name="uri" type="hidden" value="TenOfWorld" /> <input class="submitbutton" type="submit" value="Submit" /> </form> </center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXq5abq6T-LdfFnPBHwi8d7Ru2gAi7tikFt7redMU2AkhHIprj6s-ZfK7kR_svIULyZ2KbwM9dSZnE3bJ2Bg-lroDxsmbZ5RfZpDUzZPfup7vAzNQR26joHaQlFaMpbvNDozyzvISHixF8/s1600/NBTfeedburner_right.png" /> <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:10px;"> <a href="http://bloggingways.blogspot.com/">Get This Now</a> </span> <span style="font-size:8px;"></span> </div> </div> </div> </div> </div>

Editing

Replace tenofworld with your facebook fan page
Replace tenofworld1 with your twitter username
Replace 108164145416459843153 with your google plus ID
Replace both TenOfWorld with your feedburner value

Feel free to ask any question!!