How To Add Sliding In-Out Social Sharing For Blogger

Social Sharing can help your blog to get more traffic and for this you need attractive and beautiful social sharing widget.In this post I will give you good looking social sharing widget by which you will get more like plus one and tweets on your post.This widget is very different from others be’coz it’s a Sliding In-Out Social Sharing Widget which will embed at the bottom of your blog and you can easily use Slide IN OR OUT by clicking on it via mouse. It includes the 3D effect of social sharing button.

Live Demo

Bloggerheroe-Sliding-In-Out-Sharing-Widget

Add Sliding In-Out Pro Social Sharing Widget

  • Log in to blogger Design > Page Element.
  • Click Add Gadget and select ‘HTML/Javascript
  • Now Paste Below code.
<style type="text/css">
#mdfixedfootermain{
z-index:999999;
width:300px;
height:0px;
position:fixed;
bottom:0%;
right:5px
}
#mdfixedfooterdiv{
border-top:3px solid #444;
border-right:3px solid #444;
border-left:3px solid #444;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
background color:#d7d7d7;
overflow:none;
width:300px;
height:250px;
position:fixed;
bottom:0%;
right:5px;
background:#fff;
background:-moz-linear-gradient(top, #fff 0%,#e5e5e5 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e5e5e5));
background:-webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%);
background:-o-linear-gradient(top, #fff 0%,#e5e5e5 100%);
background:-ms-linear-gradient(top, #fff 0%,#e5e5e5 100%);
background:linear-gradient(to bottom, #fff 0%,#e5e5e5100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e5e5e5',GradientType=0 )}
#mdfixedfooterhide{
z-index:999999;
position: absolute;
bottom:250px;
right:5px;
width:285px;
height:25px;
cursor:pointer;
background-color:#fff;
padding-top:5px;
border-top:3px solid #444;
border-left:3px solid #444;
border-right:3px solid #444;
border-top-right-radius:5px;
border-top-left-radius:5px;
}
#mdfixedfootershow{
position:absolute;
bottom:0px;
right:5px;
width:285px;
height:25px;
cursor:pointer;
background-color:#e5e5e5;
padding-top:5px;
border-top:3px solid #444;
border-left:3px solid #444;
border-right:3px solid #444;
border-top-right-radius:5px;
border-top-left-radius:5px
}
.mdfixedfooterdownarrow{
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #333
}
.mdfixedfooteruparrow{
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #333
}
.mdfixedfooterblockarrow{
width:8px;
height:10px;
background-color:#333
}
#mdfixedfootersocial{
position:absolute;
bottom:220px;
right:10px;
width:280px;
height:30px;
float:right
}
#mdfixedfootersocialicon{
position:absolute;
bottom:135px;
left:10px;
width:auto;
height:64px
}
#mdfixedfooteremailsubscribe{
position:absolute;
bottom:0px;
width:242px;
height:90px;
right:30px
}
.mdfixedfooteremailsubscribebox input.email{
padding:7px 10px 7px 10px;
font-family:"Arial","Helvetica",sans-serif;
width:218px;
font-size:12px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
}
.mdfixedfooteremailsubscribebox input.subscribe{
-moz-box-shadow:inset 0px 1px 0px 0px #fff;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff;
box-shadow:inset 0px 1px 0px 0px #fff;
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );
background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9');
background-color:#f0f0f0;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 18px;
text-decoration:none;
text-shadow:1px 1px 0px #fff
}
.mdfixedfooteremailsubscribebox input.subscribe:hover{
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );
background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0');
background-color:#c9c9c9
}
</style>
<!--[if IE]>
<style>
.mdfixedfooteremailsubscribebox input.subscribe{
width:243px
}
</style>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient{
filter:none
}</style>
<![endif]-->
<div id="mdfixedfootermain">
<center id="mdfixedfootershow"onmouseup="document.getElementById('mdfixedfooterdiv').style.display='block'">
<table  style="margin-top:-2px;">
<tr>
<td>
<center style="color:#333;font-size:15px;font-weight:bold;">
Be Socialized And Subscribed
</center>
</td>
<td>
<center>
<div class="mdfixedfooteruparrow">
</div>
<div class="mdfixedfooterblockarrow">
</div>
</center>
</td>
</tr>
</table>
</center>
<div id="mdfixedfooterdiv">
<center id="mdfixedfooterhide"onmouseup="document.getElementById('mdfixedfooterdiv').style.display='none'">
<table  style="margin-top:-2px;">
<tr>
<td>
<center style="color:#333;font-size:15px;font-weight:bold;">
Be Socialized And Subscribed
</center>
</td>
<td>
<center>
<div class="mdfixedfooterblockarrow">
</div>
<div class="mdfixedfooterdownarrow">
</div>
</center>
</td>
</tr>
</table>
</center>
<div id="mdfixedfootersocial">
<center style="color:#333;font-size:12px;">
Recive All Latest And Hottest Articles,Tips And Tricks,Awesome Widgets Directly Into Your Inbox And Stay UpDate With Us...!!!
</center>
</div>
<div id="mdfixedfootersocialicon">
<table>
<tr>
<td>
<a href="https://www.facebook.com/bloggerhero">
<img height="48px"width="48px"title="Like Us On Facebook"alt="Facebook"src="http://3.bp.blogspot.com/-BkJDK_8pmxQ/UKugAcRF2YI/AAAAAAAAEmM/yIqqz-Hy2Es/s1600/MD-Facebook1.png"onmouseover="this.src='http://3.bp.blogspot.com/-csoGGZYigdw/UKugBaKyjYI/AAAAAAAAEmU/76aVjzqoyn8/s1600/MD-Facebook2.png'"onmouseout="this.src='http://3.bp.blogspot.com/-BkJDK_8pmxQ/UKugAcRF2YI/AAAAAAAAEmM/yIqqz-Hy2Es/s1600/MD-Facebook1.png'"/>
</a>
<br />
<a href="http://twitter.com/jaa_09">
<img height="48px"width="48px"title="Follow Me On Twitter"alt="Twitter"src="http://2.bp.blogspot.com/-5fgN0kz3gRg/UKugE396qCI/AAAAAAAAEm8/Jqf0_zUlSRI/s1600/MD-Twitter1.png"onmouseover="this.src='http://4.bp.blogspot.com/-5H7fc__0r7k/UKugF1fOIhI/AAAAAAAAEnE/2T8MQ-K00Tw/s1600/MD-Twitter2.png'"onmouseout="this.src='http://2.bp.blogspot.com/-5fgN0kz3gRg/UKugE396qCI/AAAAAAAAEm8/Jqf0_zUlSRI/s1600/MD-Twitter1.png'"/>
</a>
</td>
<td width="75px"valign="top">
<a style="font-size:12px;color:#333;font-weight:bold;"href="https://www.facebook.com/bloggerhero">Like Us On FaceBook
</a>
<br />
<br />
<a style="font-size:12px;color:#333;font-weight:bold;"href="https://www.twitter.com/jaa_09">Follow Us On Twitter
</a>
</td>
<td>
<a href="https://plus.google.com/106957260261276964704"><img height="48px"width="48px"title="Add Us To Your Circle"alt="Google Plus"src="http://3.bp.blogspot.com/-7dwA3YnUxoI/UKugDW2hrtI/AAAAAAAAEms/GgVcpOI1BeY/s1600/MD-Google1.png"onmouseover="this.src='http://2.bp.blogspot.com/-AznorpF9Rd4/UKugENCYM8I/AAAAAAAAEm0/fZBaJRGvRXc/s1600/MD-Google2.png'"onmouseout="this.src='http://3.bp.blogspot.com/-7dwA3YnUxoI/UKugDW2hrtI/AAAAAAAAEms/GgVcpOI1BeY/s1600/MD-Google1.png'"/>
</a>
<br />
<a href="http://feeds.feedburner.com/bloggerheroe">
<img height="48px"width="48px"title="Subscribe Our RSS"alt="RSS"src="http://1.bp.blogspot.com/-pUSJdcDDpBM/UKugB3QVbrI/AAAAAAAAEmc/Vk1zQ1N5rhA/s1600/MD-Feedburner1.png"onmouseover="this.src='http://2.bp.blogspot.com/-av0ZDwqnX0c/UKugCjqsloI/AAAAAAAAEmk/5oq0OskXYvY/s1600/MD-Feedburner2.png'"onmouseout="this.src='http://1.bp.blogspot.com/-pUSJdcDDpBM/UKugB3QVbrI/AAAAAAAAEmc/Vk1zQ1N5rhA/s1600/MD-Feedburner1.png'"/>
</a>
</td>
<td valign="top">
<a style="font-size:12px;color:#333;font-weight:bold;"href="https://plus.google.com/106957260261276964704">
Add Me <br />In Circle
</a>
<br />
<br />
<a style="font-size:12px;color:#333;font-weight:bold;"href="http://feeds.feedburner.com/bloggerheroe">
Subscribe <br />Our RSS
</a>
</td>
</tr>
</table>
</div>
<div id="mdfixedfooteremailsubscribe">
<div class="mdfixedfooteremailsubscribebox">
<form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="Enter Your Email Here.."onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/>
<input type="hidden"value="bloggerheroe"name="uri"/>
<input type="hidden"name="loc"value="en_US"/>
<br />
<input class="subscribe"name="commit"type="submit"value="Subscribe Our News Letter Now"/>
</form>
</div>
<center style="color:#333;font-size:8px;">
E-Mail Will Be Delivered By FeedBurner.
</center>
</div>
</div>
</div>
  •  Click “Save”.
  • View your blog to see the widget.

Make This Changes

  • Bloggerheroe – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is
  • Bloggerheroe as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe
  • http://feeds.feedburner.com/bloggerheroe – Replace this with your feedburner link.
  • http://twitter.com/jaa_09 – Replace with your twitter profile link.
  • https://www.facebook.com/bloggerhero – Your facebook page or profile link here.
  • https://plus.google.com/106957260261276964704/ – Replace with your Google+ profile link.

Now If You Enjoy This Post! Please Take 5 Seconds To Share It.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. website to check out says:

    Hmm iit seems like your website ate my first comment (it was
    extremely long) so I guess I’ll just sum it up what I submitted and
    say, I’m thoroughly enjoying your blog. I too am an aspiring blog blkogger but I’m still new to everything.
    Do you have any suggestions for beginner blog writers?
    I’d genuinely appreciate it.

Speak Your Mind

*


*