Jquery Featured Social Slider Widget
6:50 π.μ.
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.
3.Save the Template.<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/AVvXsEjxIrAC8GkNZOxOkYTx2lQ9UDmoDwVUFdhVqBGBWbJ4u_aOFsWMZ_k9g5Rizbduk3i_oGVu_FrZqUAP4MDiBUcVq3KeOcPyPol5x2RQHF4KGL25lxxwuoYKeXP6pAibJ4Uid9on1pO3-YE/s1600/%5Bbloggertricksdotbiz%5DFACEBOOK.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiK2JMlCc7JJ-Zx3fkAAFGJUXJETparW-Ooq2Ck9VOkxQuk1zIet4W69VjctdnVvGw9U3Wn9ZhC3TKrCVNGBxW_6rdIFOmnjRShATKzxAE8QtB_eKIvxq7L4cgnZk27evKaJj0QOwrRA/s1600/%5Bbloggertricksdotbiz%5DTWITTER.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LmWAhZXvBEhjhwur_dd1_E1v-aVAbPNyvswXyCE4jmc7VFzgi64MoVRbtn3qQv3ncalnjoYNzbNXmeT3XPDs4nC3q8_9s7qL0wcTmkX-w9diqNvXVdssP7v24A97cM7b-iYnm6T4dZs/s1600/%5Bbloggertricksdotbiz%5Dgplus.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdlND69fRkDnlTa1WrZ9PI-MLx1Vl5o5kEB0rwT7jxrWyEeLX8Cqc4ufD9hFCt5s0p8KSvCcbRU04tEOgddKsPm1mc5LeX-OlSL_THY-F296LZy_9u8vaNfiR15M1MM0tqYQzYLLTbIs8/s1600/%5Bbloggertricksdotbiz%5DRSS.png);
}
ul#navigation .Contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNGQ8JR0mNw9zO8uGAXx7AT4sBBmC3WtYhc6QLMkSzKi6m3ECdZQ8AX45xJHNMxJy0GlfyCQjXvRZbhKfuQfe2i6abOt4KImzVEreJbIG0OIQOl697bXbvWNdQPBie06ueVGaE2CFnEI/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/bloggertricksdotbiz'>Facebook</a></li>
<li class='twitter'><a href='http://twitter.com/jackievijay143'>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/bloggertricks/BTVJ'>RSS</a></li>
<li class='Contact'><a href='http://www.bloggertricks.biz/p/contact-us.html'>Contact Us</a></li></ul>
Customizations:
- Replace http://facebook.com/bloggertricksdotbiz with your Facebook Page Url.
- Replace http://twitter.com/jackievijay143 with your Twitter Profile Url.
- Replace https://plus.google.com/110100302012846213219 with your Google Plus Url.
- Replace http://feeds.feedburner.com/bloggertricks/BTVJ with your RSS Feed Url.
- Replace http://www.bloggertricks.biz/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.
Written by Admin
ChromeGT is a modern, powerful and professional Blogger template made for your Portfolio, Business or almost any other kind of website.
0 σχόλια: