Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Κάθετο Menu Bar στο Blog σας


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Ένα όμορφο κατακόρυφο menu bar έχω να σας δείξω σήμερα. Είναι πολύ εξυπηρετικό και το κυριότερο είναι ότι δεν χρειάζεται επεξεργασία του Html κωδικού. Μπαίνει απλά σαν widget στην sidebar του blog.
Επίσης μπορείτε να αλλάξετε τα χρώματά του, προσαρμόζοντάς τα με τα δικά σας γούστα, έτσι ώστε να ταιριάζει χρωματικά με το blog του καθενός.
Παρακάτω θα σας δείξω ποιό χρώμα αντιστοιχεί στον ανάλογο κωδικό.

Ο κωδικός του είναι αυτός.


<style type="text/css">

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu{
border: 1px solid #000000;
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
list-style-type:none;
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: #ffffff;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="Το Url του Link σας/">Home</a>
<a href="Το Url του Link σας/">About me</a>
<a href="Το Url του Link σας/">To άλλο μου Blog</a>
<a href="Το Url του Link σας/">Διάφορα</a>
<a href="Το Url του Link σας/">Επικοινωνία</a>
</ul></div>

Όπως προανέφερα, είναι widget, οπότε για να κάνετε την εφαρμογή θα πάτε Πίνακα ελέγχου -->  Σχεδίαση --> Προσθήκη gadget --> Html/Javascript, και κάνουμε επικόλληση τον κωδικό. Πριν πατήσετε Αποθήκευση, πρέπει να κάνετε τις ρυθμίσεις που απαιτούν τα ...γούστα σας.

Στην αρχή του κωδικού, ο αριθμός με το πράσινο χρώμα, αντιστοιχεί στο χρώμα του πλαισίου του widget.
Ακολούθως, το σκούρο μπλε, είναι το χρώμα των γραμμάτων του κεντρικού Menu.
Με το καφέ, είναι το background του Menu.
Με το κόκκινο χρώμα είναι το χρωμα της διαχωριστικής γραμμής του menu.
Με το μπλε, είναι η κάθετη γραμμή δίπλα στο πλαίσιο, που φαίνεται αριστερά του menu.
Με το θαλασσί, είναι το χρώμα του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το φούξια, είναι το χρώμα της κάθετης γραμμής του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το πράσινο, είναι το χρώμα των γραμμέτων του τίτλου.
Τέλος με το πορτοκαλί, είναι το background του τίτλου.

Επειδή ίσως σας μπερδέψουν όλα τα παραπάνω, σας ετοίμασα μια εικόνα, όπου επεξηγώ όλα όσα σας έγραψα στην παραπάνω παράγραφο. Σίγουρα θα σας βοηθήσει να καταλάβετε ακριβώς την θέση την χρωμάτων.
Δείτε την εικόνα.




Προς το τέλος του κωδικού, αυτό με το κόκκινο χρώμα, είναι τα links που θα φαίνονται.
Εκεί που γράφει "Το Url του Link σας/", βάζουμε το direct link που θα οδειγήται ο επισκέπτης πατώντας το, ενώ εκεί που γράφει Home κλπ, γράφουμε αυτό που προσδιορίζει το link.
Μπορούμε να προσθέσουμε, (ή να αφαιρέσουμε), όσα links θέλουμε, επικολώντας κάθε φορά για κάθε link τον κωδικό







<a href="Το Url του Link σας/">Home</a>


Νομίζω ότι είναι αρκετά εύκολο.
Δοκιμάστε το, κι αν σας άρεσε αφήστε μου ένα σχόλιο.


Post by Ekabitis

Stumble
Delicious
Technorati
Twitter
Facebook

12 comments:

Admin είπε...

Polu kalo to arthro s!!!

Kai sugxaritiria gia thn istoselida!!!

Tha ithela na s rwtisw to ekshs:
An dimiourgisw mia anartisi pws tha ginei na emfanistei sto sugkekrimeno
''menu bar'' Egw sugkerkimeno sto blog mou to kanw me tis etiketes... alla an vgalw tis etiketes pws ginete na to kanw me auto to ''menu bar''

Johnpatra είπε...

Καταρχιν μην γράφεις greeklish.

Η ανάρτηση είναι του ekabiti και όχι δικιά μου.

Η κάθε ανάρτηση έχει το δικό της, μοναδικό λινκ.

Π.χ. αυτή εδώ η ανάρτηση έχει αυτό το λινκ: http://www.johnpatra.com/2010/07/menu-bar-blog.html

Απλά βάζεις το λινκ της ανάρτησης που θέλεις.

Σε ευχαριστώ για το σχόλειό σου.

prasinotomaros είπε...

θα μπορουσαμε να εχουμε τους κωδικους χρωματων για να αλλαξουμε το συγκεκριμενο γκατζετακι???
Για γραμματα και για χρωμα πλαισιου

ευχαριστω


www.sanogiaprobata.blogspot.com

prasinotomaros είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
Johnpatra είπε...

http://www.bloggertips.gr/2009/08/html-color-codes-and-names.html

Roadrunner είπε...

Σε ευχαριστούμε φίλε John.
Ότι χρειαζόμασταν.
Συγχαρητήρια και για τα όσα χρήσιμα μας δίνεις στο ξεκίνημα τους blog μας από μας θα έχεις μόνιμο banneraki στην αρχική μας σελίδα!
Σε ευχαριστούμε και πάλι!

giota είπε...

Καλησπέρα! Πολύ ωραίο το post σου απλά μήπως έχεις τίποτα σε κάθετο drop down menu πτυσσόμενο προς τα δεξιά?? Έχω ψάξει τα πάντα αλλά δεν... :( Αρχίζω να αναρωτιέμαι αν αυτό που ψάχνω είναι πια τόσο τρελό!
Ευχαριστώ

Χατζηζήση Φανή είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
Its me είπε...

efharisto me voithas para para poli
http://stories-unbelievable.blogspot.com/

Αντισθένης είπε...

γινεται βαζωντας ετικετα σε μια αναρτηση να πηγενει απευθειας στην αναλογη κατηγορια?

ΒΛΑΧΟΣ ΙΩΑΝΝΗΣ είπε...

καλησπερα
παιδες των ελληνων μια βοηθεια εχω ζαλίστη.
π.χ το δικο μου θα ειναι www.sssssssssss.blogspot.com/home-bar-blog.html η

Stergios Theocharis είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *