Νέοι bloggers γεια σας !!!Βρήκα ένα πλαϊνό μενού, στατικό, όμορφο, και εύκολο...το τροποποίησα, και σας το δίνω για να το βάλετε, εάν το blog σας έχει περιεχόμενο σχετικά με "μπάλα"-στοίχημα η αθλητικό !!!
Το τροποποίησα επίτηδες για τέτοιου είδους περιεχόμενο, γιατί υπάρχουν πολλά menu για share buttons.Ας βάλουμε και κάτι άλλο...
Ο κώδικας που σας δίνω χρησιμοποιεί CSS3...οπότε το πρώτο μέρος μπαίνει ΠΑΝΩ από το
]]></b:skin> η βάλτε το εκεί που εγκαθιστούμε τους κώδικες css (δείτε φωτό)
Ο ΚΩΔΙΚΑΣ CSS:/* CSS Style for Horizontal Menu */
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(v2button.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(v3button.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hbutton.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hbutton.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#ballmenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#ballmenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#ballmenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#ballmenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfBr56MoOeVsI9TH2O419Coc2vUiy0ljSW0E8IBByhB_Ice9ymh-Y9-VwBpNYZ6OeaJPabxdO2BxMBr7GsRnVTqQwZaKqzEXEyD3mxGY5IJVDVzwbv7gpKry7HNc7NKeGX0kCQi_DsHKI/s190/menu%252520ball.png') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#ballmenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#ballmenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green shadow */
#ballmenu .home { background-position:0 0;}
#ballmenu .home:hover { background-position:0 -39px;}
#ballmenu .home span{
background-color:#A4A4A4;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue shadow */
#ballmenu .about { background-position:-38px 0;}
#ballmenu .about:hover { background-position:-38px -39px;}
#ballmenu .about span{
background-color:#848484;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange shadow */
#ballmenu .services { background-position:-76px 0;}
#ballmenu .services:hover { background-position:-76px -39px;}
#ballmenu .services span{
background-color:#848484;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow shadow */
#ballmenu .portfolio { background-position:-114px 0;}
#ballmenu .portfolio:hover{ background-position:-114px -39px;}
#ballmenu .portfolio span{
background-color:#848484;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple shadow */
#ballmenu .contact { background-position:-152px 0;}
#ballmenu .contact:hover { background-position:-152px -39px;}
#ballmenu .contact span{
background-color:#848484;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Ο ΚΩΔΙΚΑΣ Html/Javascript gadget :<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="ballmenu">
<li>
<a class="Home" href="
#">
<span>
Home</span>
</a>
</li>
<li>
<a class="about" href="
#">
<span>
Super Leage</span>
</a>
</li>
<li>
<a class="services" href="
#">
<span>
Basket Ball</span>
</a>
</li>
<li>
<a class="portfolio" href="
#">
<span>
Champions Leage</span>
</a>
</li>
<li>
<a class="contact" href="
#">
<span>
Hand Ball</span>
</a>
</li>
</ul>
</div>
***φυσικά μπορείτε να βάλετε όλο το κώδικα σαν Html/Javascript gadget : ΟΜΩΣ ΠΡΟΣΕΞΤΕ: Τον κώδικα CSS θα τον βάλετε ανάμεσα στις φράσεις <style> ...(ΚΩΔΙΚΑΣ CSS)...</style> (αλλιώς δεν θα λειτουργήσει)
***Demo έχω βάλει
ΕΔΩ και
ΕΔΩ (για λίγες ημέρες)
***κάντε copy όλο τον κώδικα, και επικολλήστε τον στο demo blog μου για HTML & CSS.κάτω από την ανάρτηση, η
ΕΔΩ***ο κώδικας CSS, μπορεί να συγκρουστεί με τις ρυθμίσεις άλλου κώδικα css που έχετε στο blog σας, και να μη δουλέψει σωστά...αν συμβεί αυτό, μη το βάλετε...οι πιθανότητες είναι λίγες, αλλά υπάρχουν πάντα !!!
***όπου "#" βάζετε το λινκ που θέλετε εσείς να ανοίγει...
***οι ονομασίες με το πράσινο, αλλάζουν !!! βάλτε δικές σας...
***αλλάζουν κι άλλα πράγματα στην εμφάνιση του μενού, αλλά μη τα πειράξετε εκτός και γνωρίζετε..
Πηγή (πριν τη μετατροπή που του έκανα): thanks to : tutorialzine.com
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(κι ότι απορίες έχετε, στείλτε μήνυμα η γράψετε στα σχόλια)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
