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

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>


<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qX7srgIcHdovRMR0no_KzbGo_9JKRx_69qFhHptGd_rnOsqt1YCxgBjR-Guo8Zd9qQbsT2WHENQ3t0Gh4ayxQtElm7uSA8stvuQknTiTknxbXJlqtIS-ZZqpWYef_HEhDKyVXgy_Mgdp/s1600/MD-Facebook1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmfsMeruScrq8RI_kRy1svL5w6LMFZhDd6pD2rHidaSYDrOyeOuuqh3NUb_KVBjZCs1qa8K6AMr1-8wcJRZifRUYTlsmZ_rp33QEvE6islhphUpIcHtE7XIn02YnN7a9nDfVWMpWK5oCi6/s1600/MD-Facebook2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qX7srgIcHdovRMR0no_KzbGo_9JKRx_69qFhHptGd_rnOsqt1YCxgBjR-Guo8Zd9qQbsT2WHENQ3t0Gh4ayxQtElm7uSA8stvuQknTiTknxbXJlqtIS-ZZqpWYef_HEhDKyVXgy_Mgdp/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6I_FnEC9hTn7X2xc-Us6VoZax4DOivM_ozPTrdljbgsyuMvmeeUsR8LgX0slKTngdJeRq9QGm2f_AKMDKeoGU11xPyzvzsimCMb_zGRBpr_QF6tQJWrMKkIxuavjl7Eb84MGrf2X4uya/s1600/MD-Twitter1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVV5AWT5XIMtmBF5v93nIRW_bzMllpTnplJqZLoaWtvaHWoSn68Gd1EDZA9yVZWgGwjrAsYsXy8lV9HAl_gYRxhHQlV4ARBsjVXarpros3Oox6JylEwAQufAUAY8m0v_yyBkaslp9kEmKQ/s1600/MD-Twitter2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6I_FnEC9hTn7X2xc-Us6VoZax4DOivM_ozPTrdljbgsyuMvmeeUsR8LgX0slKTngdJeRq9QGm2f_AKMDKeoGU11xPyzvzsimCMb_zGRBpr_QF6tQJWrMKkIxuavjl7Eb84MGrf2X4uya/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHqQ7hjs7uoN2D0-mv-nLkcdoRplFg-dUln_dYV4WT7d5S9uGjs0vEPdLpPfPPVsOKr8teNvdtOadILSEru1G_5G7h5RBfP9QJNP8Pa7A342Ur19GkWjk9A7keuoS86WfFv6XhaHp8V2z/s1600/MD-Google1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YleMA91Go2R-y3VLa7yi9oEcAeuKczLc-8vzFlmu9TrcTsQG-AW10ZOrggI47ZZeI8qziYEGzvilokVV5fmktOmKso0POhpbyHYqtbGOELLazESEUaFQY4m6aGAnaYH8YhDCP7gX0f48/s1600/MD-Google2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHqQ7hjs7uoN2D0-mv-nLkcdoRplFg-dUln_dYV4WT7d5S9uGjs0vEPdLpPfPPVsOKr8teNvdtOadILSEru1G_5G7h5RBfP9QJNP8Pa7A342Ur19GkWjk9A7keuoS86WfFv6XhaHp8V2z/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkRE2Ep6Nkuhp7_-K1f43lgf8SeX8kdSI5mBvZKfMa-LQHo9T_pcgUTzPYvIHsxc0vA27PRdJGwjU8FxDIpACYoJvFoLlECxtWp6YyuJ_wX_gjXCYLAlZl5iARKG3TYPgciIlKnk2FgZdG/s1600/MD-Feedburner1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2tY9xhlQwm66mH9GlXYplIE9O4OOtti_5Rso_n60K_vlUelmuXBCIfRig0tp7CqTru_iapOcrL0_azB1W-8P8qa9WvLJHZ2FYVIDlTBZABhqpOrW-cn1GUUxBtWlbJYXyJOueFg12Wjr/s1600/MD-Feedburner2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkRE2Ep6Nkuhp7_-K1f43lgf8SeX8kdSI5mBvZKfMa-LQHo9T_pcgUTzPYvIHsxc0vA27PRdJGwjU8FxDIpACYoJvFoLlECxtWp6YyuJ_wX_gjXCYLAlZl5iARKG3TYPgciIlKnk2FgZdG/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='';"onblur="if(this.value=='')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.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 12:04 AM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Sliding In-Out Social Sharing For Blogger. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2012/11/how-to-add-sliding-in-out-social.html" target="_blank">How To Add Sliding In-Out Social Sharing For Blogger</a>