Home Blogs and Websites How to Add Social Media Slide out widget to Your blogger

How to Add Social Media Slide out widget to Your blogger

Views:

Friends, Now i share a good social media widget to your blogger. it is a hidden widget.  When visitors mouse over on this widget  it slide out from side. If we move mouse from this widget, It automatic hide in blogger body. If you want to install in your blogger. Follow  this post….

 Social Network J-Query Slide Out Widget For Your Blogger masterhacksindia.blogspot

 

Log in to Blogger account

  • Select Templates

 

  • Click on Edit HTML

 

  • Tick On  Expand Widget Templates.

 

  • Find (Ctrl + F)   ]]></b:skin>

 

  • Copy  the code shown below and paste Before/Above it.

 

 

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#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:246px;height: 353px;position: fixed;right: -250px;}
#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:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;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;}
#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: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

 

  • Again  Find (CTRL+F)   </head> tag.

 

  • Now Copy below code and paste before It.

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -203}, 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); });
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); });
});
</script>

 

  • Save Templates.

 

  • Then go to Layout

 

  • Now Click On Add Gadget Button.

 

  • Select HTML/Javascript option from given list.

 

  • Copy below code and paste it .

 

 

<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoGEfWe5Vqqe95G7zcMToRiCy0ury1grlk3rZdm8-oxVCLFKld1c9lhzCOluTgBbN2iddiUc7mWV1LXuXAf-x8RaCO3OcnSaka_SVhiMOxZwy4_xnnOQm5V1sXzUetZyFeNY7baBHdw/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR-FACEBOOK-FANPAGE-LINK-HERE&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"scrolling="no"></iframe></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/AVvXsEhoY9h3E3FuK9baIv79Y7auInXPkrFO80jZVpZCzdS298VPniCVNZE5lwYfcCEWZw0Ym1AXtslfGPeEAy0_IWVtzQFAGR3O2YOwrQvJDIbqyh-1chmfjxVgAi4IeLZDzCMBngy6E3-LSQ/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-HERE').start();</script></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/AVvXsEg3XaK1_lSoBaNPyl92nBvRrJVx6E6XSuMpL8lqc5mhNcss4nvpetckMwRNnTyax6v8C-CQs6o_DxwkcDmD_pudHLL_nahYgOVA8-yW6Hv0rPwc4ZQjFFw6NDbH91oeG5JpeKXMMZxk_Q/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">You Can Also Receive 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=YOUR-FEEDBURNER-ID-HERE','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="FEEDNAME-HERE"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/AVvXsEgYzQzPng-SKs-viqCCZkfEq-eiKonhZQC8blzMPUtSw6ggrNao-jwpTvlQt4wuJtLXtJZb5FjRmg9AqyCPK3wRvQ1id0zfIOIWgpg7Zkvk1Bv7ctO6J_-5Klct-rzbCqaaqIhFi6X6vw/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1zkI1ZIsoAdI69lklmYt-8Bc09Pycx_uC9yzm6iEhmVKpQQ9aQEmCmsnKdqcgmEHjf2awOSR6pk1rCES7h1D24JUMiwANKainsIgIg1GtT1_R1JKbj1dkKF7HqH_CkW909fZyQpP8Q/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=YOUTUBE-ID-HERE ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>

</div></div></div>

</div>

 

 

  • Save it.

 

 

 

Are you happy?….. Do you like this blog ….. comment below………………..

How to Add Social Media Slide out widget to Your blogger How to Add Social Media Slide out widget to Your blogger Reviewed by Gaint Hackers on 00:32 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.