Κρυφό Share Menu

Νέοι bloggers γειά σας !!!H σημερινή ανάρτηση είναι ένας κώδικας για κρυφό share menu ...Δηλαδή ένα μενού που βρίσκεται στη δεξιά πλευρά του blog σας, στατικό, κρυφό, και ανοίγει (αναδυόμενο προς τα αριστερά) όταν περνάει από πάνω το ποντίκι σας...βέβαια εσείς αν γνωρίζετε τα βασικά από HTML η CSS, μπορείτε να το τροποποιήσετε για κάποιο άλλο σκοπό, πχ. να φτιάξετε ένα μικρό μενού για τις αναρτήσεις σας, η ένα μενού με link για τα υπόλοιπα blog που έχετε κατασκευάσει !!!

DEMO
Ο ΚΩΔΙΚΑΣ :

<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #000;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvl5EQ0kHqrp1Ons92pUxfxGpwZWe3n3FrJsIb_j48nGH6WKQeKALfCmvH5ziBgSCjzcNi1q12IWvpowAxVGNyUhgeSV0EG5y_6ebL6-Bzf5Er3cIdKBHVe06hSk-VvHbxJaz1RG5vLhl/s64/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYEyHh2l3u9Va5xPntqXcMHWfv1ih7SgijVruIM5sN0AB5ZgGkwgRNoCSgDbiaWA-0ExV3K9V5P3hI5ajGTSK8tzebJkw_aqHAFkFSZTBW5xtYOS2NcGu0sV1Ilu8gh8jv8jMU3CexxVRW/s64/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqWBXpeFTJfttO7E_GweakGNubWicowOLnhZ9kvkGm8Zvo0daKRu3ZTEGXAh7f-grv1Lma29v0pJEsnZ4xFw7sWTlREs2keJTlIshvjP3A0OfcSmjRvB1voLLO3XKPUp23pLCF1HmVAu6/s64/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHz472yhJs397DqNGkAouhK8pzPCWg9yvHv50xlFVdb3yXG_RaLuokjolMLpfcx5cBCVK5X7cU6Pl2kPieQL4TMrtRB_I7o2zrDuznMWGPUQjhRvVjNvqOHRQPz5craN9z_axMcpiR_DE/s64/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhyaF00F0bdNCATP4rb4P4nLlYO5umSNK_SX5OBVux7hfkVwCRYfXiHiDUMF67H210jrmg6b0Zpu3Vveif8qnuCC0yyGJSEKk_jUJEvfu3G0FPDBj5g12UlayvuIhxWB_leo_gBQcSRlQ/s64/mail.png);
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>


<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);

$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script>

<ul id="navigation1">
<li class="rss"><a href="#" target="_blank"></a></li>
<li class="facebook"><a href="http://www.facebook.com/" target="_blank"></a></li>
<li class="twitter"><a href="http://twitter.com/" target="_blank"></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/" target="_blank"></a>
</li>
<li class="e-mail"><a href="#" target="_blank"></a>
</li>
</ul>

ΕΔΩ ΣΑΣ ΒΑΖΩ ΚΑΠΟΙΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ:
***ΠΡΟΣΟΧΗ...Επειδή, τώρα τελευταία χρησιμοποιούμε παρόμοια τέτοια αναδυόμενα gadgets, μπορεί να έχετε ήδη στον κώδικα HTML του blog σας κάποιο παρόμοιο " .js " .Ψάξτε τον κώδικα του blog σας, μήπως υπάρχει ήδη, (ειδικά το πρώτο, από τα 2) και αν υπάρχει, μη βάλετε το παρόμοιο που έχει αυτός ο κώδικας (με τα μπλε γράμματα)...
***Το   top: 150px;   ορίζει την απόσταση του gadget αυτού, από τη κορυφή του blog σας
***Οπου βλέπετε   a href="#"   βάλτε τα δικά σας link (διευθύνσεις...fb η twitter)
***Tις φωτογραφίες (εικονίδια), καλό θα ήταν να τις ανεβάσετε σε δικό σας άλμπουμ (host page)
***Mπορείτε να βάλετε χρώμα πίσω από τα εικονίδια στο  background-color:transparent;
***Στο DEMO που σας δίνω, έχω βάλει όλο το κώδικα σαν gadget, HTML/javascript...Κανονικά πρέπει να βάλετε κάθε κομμάτι του κώδικα, στην ανάλογη θέση...αν δεν ξέρετε που μπαίνει το κάθε κομμάτι, δείτε τις προηγούμενες αναρτήσεις μου με παρόμοια gadgets....
Πηγή,  thanks to:  tips-blogbego.blogspot.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}