Νέοι 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>
Το τροποποίησα επίτηδες για τέτοιου είδους περιεχόμενο, γιατί υπάρχουν πολλά 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> (αλλιώς δεν θα λειτουργήσει)
***κάντε copy όλο τον κώδικα, και επικολλήστε τον στο demo blog μου για HTML & CSS.κάτω από την ανάρτηση, η ΕΔΩ
***ο κώδικας CSS, μπορεί να συγκρουστεί με τις ρυθμίσεις άλλου κώδικα css που έχετε στο blog σας, και να μη δουλέψει σωστά...αν συμβεί αυτό, μη το βάλετε...οι πιθανότητες είναι λίγες, αλλά υπάρχουν πάντα !!!
***όπου "#" βάζετε το λινκ που θέλετε εσείς να ανοίγει...
***οι ονομασίες με το πράσινο, αλλάζουν !!! βάλτε δικές σας...
***αλλάζουν κι άλλα πράγματα στην εμφάνιση του μενού, αλλά μη τα πειράξετε εκτός και γνωρίζετε..
Πηγή (πριν τη μετατροπή που του έκανα): thanks to : tutorialzine.com
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(κι ότι απορίες έχετε, στείλτε μήνυμα η γράψετε στα σχόλια)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
5 σχόλια:
ο καλύτερος ολων!!!
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?
Polydore, βγάλε τις φράσεις <style> και </style> που υπάρχουν στην αρχη και στο τέλος του κώδικα css
το έβαλα ολο τον κωδικα κωδικα δουλευει μια χαρα σαν gadget
αυτο που θελω ειναι πως αλλαζουμε τις εικονες(μπαλες)με αλλεσ φωτογραφιεσ
και πως προσθετουμε αλλο link πx
Super Leage
1 Leage
...για τις φωτογραφιες φαινονται ποιες ειναι, μεσα στον κωδικα css.....τα υπολοιπα τα εξηγω στα χρωματισμενα σημεια...δες τις σημειωσεις στο τελος της αναρτησης...
Δημοσίευση σχολίου