Announcement:

BLOGGER HEROE IS UNDER CONSTRUCTION

How To Add Sliding In-Out Social Sharing For Blogger

Posted by Editorial Team on 12:04 AM in , , ,
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>
<!--[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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0tlx61PI6UU5-N6B19SiZ6U9ZfTRHcWpgtUMVzro-Tr7OL_-KbxpGzEaQU68iTDIyleFNMiq2m1WrGUbSZcWHarp2I8i8w0WVYS1AcRv0nS1jtnZXQTAnTseUxBV9hoG78Zl5xAZLGLc/s1600/MD-Facebook1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWgrteE1R53qC_MZSn7ACFgiBYa97S7YOyptIeDC0QvYQ_cFRR8gXYdSAZeY8NmKogGZTyYKle0iVhjWx3vIkm8_5MPaxija-8n-0efFcXP3mrUI99CBdTaOYo4-Mc7A278lhKVHO0aRQ/s1600/MD-Facebook2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0tlx61PI6UU5-N6B19SiZ6U9ZfTRHcWpgtUMVzro-Tr7OL_-KbxpGzEaQU68iTDIyleFNMiq2m1WrGUbSZcWHarp2I8i8w0WVYS1AcRv0nS1jtnZXQTAnTseUxBV9hoG78Zl5xAZLGLc/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/AVvXsEh6c38ynCWX9eFIbZAyZ0hXEqwBNsoZAPDU58FK4xV5ToNc5VNi_MsUekZaw7nd_eEN4h_ll5HedHEbNAsJcFQVSHetgBFC7VhOIbF-rZRJBIObXeHLGIoULLJVVELNpf9zuWJVA0foXyLl/s1600/MD-Twitter1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtqiz2uvaf-gSQ-xOSDjvsdpqh-SedgdbJk2TQ_-MmF-Eblz-EZ-5K2uT7fbV_eEkF7EX0-Q598NBhR0GnR-OPfX09rRHzvhGAn5dmUpTBi-mqec6AxfJTJXd9zsEkFXn27P2cN1PJ8bC/s1600/MD-Twitter2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6c38ynCWX9eFIbZAyZ0hXEqwBNsoZAPDU58FK4xV5ToNc5VNi_MsUekZaw7nd_eEN4h_ll5HedHEbNAsJcFQVSHetgBFC7VhOIbF-rZRJBIObXeHLGIoULLJVVELNpf9zuWJVA0foXyLl/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/AVvXsEgxAnfDt8b1ON_Wmqp4fald79HaIgE3MqcrCou2Hwum600hx-YnEF1qJeHgzEM97AQQX1wdOCAEZn4vkLVTUl-Z9YAc7rntd31RT5k-4IXgZiDn48FmLKtwpY9A7iVwccbF7j_93KUtCrgU/s1600/MD-Google1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJo1CBwViMvTacy4SN5z-6aoTnttr40SU2s5o8fNI_8VbRzhyzdtLWPjCyvqpYHjSUZ5tCFWWFFxUUO4rFHbY9WMtLNFeKt9BEfgt5evXdWoVbbDrASuX6iEjmgIB_TG8XAPKpV1mfMQ0/s1600/MD-Google2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAnfDt8b1ON_Wmqp4fald79HaIgE3MqcrCou2Hwum600hx-YnEF1qJeHgzEM97AQQX1wdOCAEZn4vkLVTUl-Z9YAc7rntd31RT5k-4IXgZiDn48FmLKtwpY9A7iVwccbF7j_93KUtCrgU/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/AVvXsEhHW-mRHbqQ5__vZF4kAcDbakBi-618wB2xTTOt_ZU9BPwHmklRMwVdrxHygnF9IzzOmnMJBj8pNke5iuOEGi-YtqaFc6L-qF0L29UiICTAHtEp0JTMKwo0yJ_BeAPxaCWTAAcWOtoAgY4k/s1600/MD-Feedburner1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduAXtxCEvvNNuFTBafiFa5EgsUBNy0rvMUcaEnGwc-9glknxYjeEEn69hHanXasTXV_ieqHizWlDNQZrbqo2bTabv2kXmGWorZrD-c6AiLG2LZa9CgvOR-YZVv7TlLcjrLzNpf-OSCgkn/s1600/MD-Feedburner2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHW-mRHbqQ5__vZF4kAcDbakBi-618wB2xTTOt_ZU9BPwHmklRMwVdrxHygnF9IzzOmnMJBj8pNke5iuOEGi-YtqaFc6L-qF0L29UiICTAHtEp0JTMKwo0yJ_BeAPxaCWTAAcWOtoAgY4k/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.
Share it Please

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML code in comments then please use our HTML Encoder
2. For perfect customization of our tutorials, use our HTML Editor
3. Please do not spam, Spam comments will be deleted immediately upon our review.

Regards,
Adrian Lucernas

Subscribe to: Post Comments (Atom)

Copyright @ 2013 BLOGGER HEROE. Designed by BloggerHeroe | Love for Blogger Heroe