Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




5 CSS3 Πλαϊνό menu για αθλητικά blogs

Νέοι 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://lh4.googleusercontent.com/-rkJDnUVC8Qg/Tr2cMdzl1TI/AAAAAAAACsM/PsG03_1A28U/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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

5 σχόλια:

mygdalia.blogspot.com είπε...

ο καλύτερος ολων!!!

Ανώνυμος είπε...

file mou to topo8etisa sto blog mou alla mou vgazei panw panw sto kentro tou blog mou stin korifi omws afto --> ti skata borei na einai afto kai pws to vgazw?

pandelees karagiann είπε...

Polydore, βγάλε τις φράσεις <style> και </style> που υπάρχουν στην αρχη και στο τέλος του κώδικα css

Ανώνυμος είπε...

το έβαλα ολο τον κωδικα κωδικα δουλευει μια χαρα σαν gadget
αυτο που θελω ειναι πως αλλαζουμε τις εικονες(μπαλες)με αλλεσ φωτογραφιεσ
και πως προσθετουμε αλλο link πx
Super Leage
1 Leage

pandelees karagiann είπε...

...για τις φωτογραφιες φαινονται ποιες ειναι, μεσα στον κωδικα css.....τα υπολοιπα τα εξηγω στα χρωματισμενα σημεια...δες τις σημειωσεις στο τελος της αναρτησης...