Ads 468x60px

Τρίτη, 28 Μαΐου 2013

Floating Social Bookmarks with Mouseover

Μία πολύ ωραία μπάρα με socials tabs θα δούμε σε αυτήν την ανάρτηση η οποία μπαίνει στην κορυφή του blog μας δείχνοντας σαν κρεμασμένα τα κουμπιά της,και η ανάδυση τους γίνεται όταν περνάμε  το ποντίκι από πάνω τους!!!

Η εγκατάσταση είναι πάρα πολύ απλή!



 Πηγαίνετε blogger--> Διάταξη -->Προσθήκη

gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--> 
....................................................................................................................................
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 170px;
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 .rss a{
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/s400/yahoo_64x64.png);
}
</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="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>
............................................................................................................................................
Κάποιες αλλαγές
Το right: 170px; το έχω έτσι για να είναι η θέση της περίπου στο κέντρο του blog και να μην
πέφτει πάνω στην μπάρα του blogger όπως θα δείτε στο demo.Αυτό είναι για όσους χρησιμοποιούν πρότυπο blogger και έχουν εκεί την μπάρα!!Αυξάνοντας το 170 έρχεται πιο αριστερά,μειώνοντας το
170 έρχεται πιο δεξιά!!
Για όσους ξέρουν μπορούν να πειράξουν και άλλα στοιχεία από τον κώδικα!!

Τα μπλε γράμματα στο τέλος του κώδικα τα αλλάζετε με τα δικά σας στοιχεία!! 
ΠΡΟΣΕΧΤΕ μόνο τα μπλε!
Μόλις είστε έτοιμοι πατήστε αποθήκευση!


Καλή επιτυχία!!

Edit by vaiol!!!

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog