Add 5 Social Media Slides/Pop Out Subscription Boxes To Blogger

SOCIALIZE IT →

Tweet

Hi friends , A few days ago I shared Facebook fan page like box pop out widget and in this post I am going to share "5 social media pop out subscription boxes widget". This widget comprises of Facebook like box, twitter follower box, Google plus, YouTube and RSS feed subscribe box, and this widget will slide out smoothly when you place your cursor on any of the widget, due to the jQuery effect that is included. Follow the simple steps below to add this stylish pop out widget on your blog/site.

Add 5 Social Media Pop Out Subscription Boxes To Blogger

→ Go To Blogger > Login To Your Account >
→ Go To Your Blog's Template Page "Backup Your Template" 
→ Click On "Edit Html" > Proceed > Tick Expand Widget Template
→  Find </head> And Paste The Following Code Below </head>.   (Tip : Press Ctrl+F To Find)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 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: -323}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
});
</script>

→ Click Save Template.

→ Now Go To Your Blog's Layout Page
→ Click "Add A Gadget" > Choose Html/JavaScript
→ Copy The Code Below And Paste In The Content Box And Leaving The Title Box Blank

<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:260px;height: 238px;position: fixed;right: -264px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;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: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;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: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippxOD-jrb4oF6Twukz3rGzWjNsPYUtBX22GBWoVNV4JKFmCGse0VPcknYG0IehKN4-8EluqlfWBCABT43wvHgOdra1GGoji26u1jAj9HkdBfP0GF1Ttqy2S1koQJKVDqjbw_Z9r59cg/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTricksMasterr&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJWQ0tL9s9qdbZuutT1ZojMpp4C8G4DZq61M_eFSZBtMgBErfzV-9louVtEFvumhXGW0Wf3Lk9WV3RyWJP1B6k3xX88IXhowQlDjbXkmn3v2eB5d-wPks3rgOqYp4dLNC2UG6XQbSJw/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("YaqoobAlone");</script>
</div>
</div>
</div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_E6-LPxXAovnjMrNMC4JqAOg-rkW1QM2tY2b7T5ph6GvLA0EzkaFeD9-PIWiBgOliivu7IiNE52AIZVQ0ViPpNqCQI_AaLt4et53fO82udouY4VrvxmNd7vsr_HxQA8wCfSZWDw0wDQ/s1600/Google+Plus.png"/>
   <div style="float:left;margin:1px 0px 0px 2px;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbG59-zH0p5M6MYUvuaDujB-glX-dmgPqtWSjOisob1QMh_pKKSROvavi4VNcL-BEITOkC94R77Ub9q6Pnv16kVWfkBwY7iE-nFTs9Wg_YdljkN4WxiUQg72iu2NwoxfHXtLLTEfz7lQ/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=yaqoobalone style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get Free E-Mail Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TricksMaster', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your E-Mail Here...&#39;;}" onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="TricksMaster" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhypmxE06kSDbad4TRHdmq-Cv0j6xKjyEnUPkdkVdFsd-SN7nda4YCMF9NeE1LO9dZ7VTO6EtKxE6J7fiQV6l1jLKDtsqaYAyY8QpoztMhRzF5TK1JnMZQeKp07jz6gGsVY2ZBhBxIw/s1600/Subscribe.png" />
</div>
</div>
</div>

→ Replace TricksMasterr With Your Facebook Fan Page Username.
→ Replace YaqoobAlone With Your Twitter Username.
→ Replace yaqoobalone With Your Youtube Username.
→ Replace http://feedburner.google.com/fb/a/mailverify?uri=TricksMaster With Your Feed burner URL.
→ Replace TricksMaster With Your Feed Burner Username.
→ Click Save When You Have All Done This Editing.

I Hope You Liked This Widget. ;-)

Join Our Email Newsletter Now!

Join over 1,000 people who get free and fresh content delivered automatically each time we publish.

Get This Now!