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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Whl0jkaA3k3hcEdxeTmPIY1K7neZSELaqYwZGyU3M8Fk6Imu5hbenWH0OZu0NLroZvv3_YVYE0zyMYvb1ItopZAIHp0x-6VLcayiCclitvl6YHkF2sBFDjKf0PP1LxQTahW3VAs7fBZg/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGpWa0k6O5E0h3iGDPN0g2Xa5RXh7ipnlhh01OrIgh0a_AdSljQTnariXidqIrCOidbOJYZxwqQBO5zpOAdaLK6xFl0xGRXmLNAHEqM_Mhyqv7p4oTain3GC6C2b2p-V21IHpegvGUcGp/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRZGCiUjQKWysMYsuAK-ojTsoKqe86JryI-9I0r_xPqPhBilamKxu_zjg7vp8bat2VD7ec7rxBbqLsov213EA8mnnZJaGXS2GTtdj8sg_hm26-ETJKRPlL4UNlsDG9zYuBRHRvV5DufhK/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4ulnjkgox2s-eyEjsokFMR2HOTSY6FtWlHrnALid8WDLw_uGolgpOpeGmNelOw4Zjj4XcGCdP8810d-Wm5k2sbk86TlbyPh_MzGKoQSYutjvtV8uDk61POihlGu7Eu19wtQRdgw33wAt/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRkZQOcS8ImUm9JIbfne5fQMacjJ0y9UWENA8I71ilTG0HrhGQ1bnD4Agje6Yve89Q7GDYva8y0t8QZ0W59uz7eZDNYWJgbx0C3D-Vs3hyTXw2z0YL9MG8AA9aZlUON7DY1TNCoIlmVjDP/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!!!
Αναρτήθηκε από στις 3:43 μ.μ.
Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.

Stay Connected With Free Updates!

Follow us!
Ετικέτες , ,

0 σχόλια :

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

Εγγραφή σε: Σχόλια ανάρτησης ( Atom )
Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .