I have given you so many social sharing widgets in my previous tutorials. I have even given you many Jquery tutorials and Jquery featured widgets, sliders for blogger blogs. Many of them were eye-catching to the users but still many of them just disappointed the bloggers by taking long time to load. Today i am giving you one of the unique and most inspired social sharing slider widget with Jquery featured and fast loading speed. This slider widget is styled to stand on the top right position and works similar to the 4 in 1 social slider widget shared on this blog. Enjoy this beautiful and very effective widget on your blog and i can say that this widget is really going to catch the attention of maximum users and thus a rapid growth in your social stats. Here is a Demo of the widget.
Jquery Featured Social Slider Widget demo
Jquery Featured Social Slider Widget for Blogger
1. Go to blogger dashboard --> Template --> Edit Html.2. Find(Ctrl+F) for <body> tag and Paste the following peace of code just below it.
<div class='clear'/>
<style>
/*Social Sharing Top Slider WIdget By BloggerTricks.Biz*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzYC3cbnhO9cGBrUS7iJ0OEBbGQg5W_shyphenhyphenBYt4EoX2I9kK58hjVkVfLCb7jwVjkkwDPH1fFwh75nG6GirO_ufg1QJdGz7WhzMb8pc_s4InzOkGj2kXejd8GxD9IavdAISRg_QOU5CQRo/s1600/%5Bbloggertricksdotbiz%5DFACEBOOK.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCuVfUvQu_ZMRDg4Kc0BAkpv6J1qiwv4QT2c1efCZPelPhm9ygVthfze3_AkFgjt1uJXgEHCrt03DfVbw_hRmy8gdxnvyL90Jlwi9qftHLxRTBieLuQWGY_Oh-BA9WeIIYl4gsT-xd2oc/s1600/%5Bbloggertricksdotbiz%5DTWITTER.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJdxqymQrSBCZgSV9w152LCTfCNeDOW1OTNxDTd_JHOKshrDPlUqbJp6JLcon7vYe7e_Rdd78VJziWqZpfBJ6YjGeYfspty1XEmHBhnuvT-xA9XmSuY4PIW-kMWl0tc4gued2r7tc2XhE/s1600/%5Bbloggertricksdotbiz%5Dgplus.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhFpXLnusPqJhm365V4NWP8WAYGKERHiMIGJh0Gf4gRuYGJiuAr9JL34PR19BszAyj8-EvRKx8J5Pj1TVHYXOgE1FEa6LE-dYAhX-bK5E5x3mcaOmD-0-Mjx3q6Bliv1KMygLtc1OfBk/s1600/%5Bbloggertricksdotbiz%5DRSS.png);
}
ul#navigation .Contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8u4Ytr-y9tiUZaeaOGXGN8FhY1xGm5y-1hxaiU3_AXpJCyHzLHkof-qKMOpr4VG9iRYXUM-cutIXpDOjO0vAUkHGDtNODhMS1C3WbCTK67bYvt4vZrCPT9xhBU5llqtH22V8PJTnJV0/s1600/%5Bbloggertricksdotbiz%5Dcontact.png);
}
/*Social Sharing Top Slider Widget Style End By BloggerTricks.Biz*/
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id='navigation'>
<li class='facebook'><a href='http://facebook.com/khatab.dadi'>Facebook</a></li>
<li class='twitter'><a href='http://twitter.com/freeeagle18'>Twitter</a></li>
<li class='googleplus'><a href='https://plus.google.com/110100302012846213219'>Google+</a></li>
<li class='rss'><a href='http://feeds.feedburner.com/dadou'>RSS</a></li>
<li class='Contact'><a href='http://tell-me-howw.blogspot.com/p/contact-us.html'>Contact Us</a></li></ul>
3. Save the Template.
Customizations:
- Replace http://facebook.com/khatab.dadi with your Facebook Page Url.
- Replace http://twitter.com/freeeagle18 with your Twitter Profile Url.
- Replace https://plus.google.com/110100302012846213219 with your Google Plus Url.
- Replace http://feeds.feedburner.com/blogspot/dadou with your RSS Feed Url.
- Replace http://tell-me-howw.blogspot.com/p/contact-us.html with your Contact Us Page Url.
Finally, View Your Blog and There Comes the elegant Jquery social slider at the top right of your blog.
