.png "English"){kind=small}
Τρίτη 3 Δεκεμβρίου 2013
CSS Circle Menu
κουμπιά για τις κατηγορίες του, διαφέροντας έτσι από άλλα που έχουμε δει σε
παλαιότερες αναρτήσεις, και είναι και αυτό με Css κώδικα για να μην καθυστερεί
το άνοιγμα του blog μας!
Δείτε εδώ το DEMO
και για να το εγκαταστήσετε και εσείς
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
................................................................................................................................................................
<center>
<style type="text/css">
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15;
}
</style>
<div class="circlemenu">
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
</ul>
</div></center>
<style type="text/css">
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15;
}
</style>
<div class="circlemenu">
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
</ul>
</div></center>
..........................................................................................................................................................
ΑΛΛΑΓΕΣ
ΔΙΕΥΘΥΝΣΗ URL-- Eδώ βάζετε το link της διεύθυνση σας!
ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο που θα φαίνεται στην μπάρα του μενού!
Μόλις τελειώσετε Αποθήκευση και είστε έτοιμοι!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to dynamicdrive.com
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου