Horizontal Solid Block Menu For Blogger ( Νο 11 ) |  Στάλες στο γαλάζιο ® <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWUc8ZEJjliUJ3y2GNiHGUrhazxUkDRmek1WrholAvhAMqRDBP-yeZbkqC0Lcuh-Kg3OKwCLHeEs7AZEQ3B5IQrnDrmaMyFADENqMAUKfstrVzatpQ32QsuPa4xDv0Fw5wPSgHjsBOk_0/s72-c/76479.png' rel='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME6DVcbv3gKvBNmYAN6FDaLxToDKS-E4cTNSSmHJAS370hC-oKXqo1VtWSfx20ExDsIsLjKJppxnTl_N-7lJi_B4ZDQzj5BQ5TZ9fMdN27ybf3x0Yzs0Jd7JQo_Ar824kLqZbIbRkOUU/s640/Stales_sto_Galazio.jpg'/>

5


Horizontal  DropDown Menu,Horizontal Menu,Οριζόντια ΜενούΣτο 99% των templates του Blogger, οι κατηγορίες εμφανίζονται στην πλευρική στήλη.

Στην ανάρτηση αυτήν, θα σας δείξω ακόμα ένα σχέδιο οριζοντίου menu που θα αποτελείται από κατηγορίες κι όχι από σελίδες.

Ας ξεκινήσουμε λοιπόν....

Τώρα θα πάτε στο Ιστολόγιο σας κι αφού κρατήσετε ένα backup το template σας καλού-κακού....

θα μπείτε στο Πίνακας ελέγχου σας & μετά >>> Σχεδίαση >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....


</head>


Μόλις το βρείτε πριν από το κλείσιμο του </head>
Προσθέστε τον παρακάτω κώδικα.


<!--MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<style type='text/css'>
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://i44.tinypic.com/333j255.jpg) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(http://i40.tinypic.com/51wnm9.jpg) center center repeat-x;
}
</style>
<!--MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com-->


Σημείωση!!!!

Λόγω διαγραφής των εικόνων από την tinypic, οι εικόνες αντικαταστάθηκαν με τους παρακάτω συνδέσμους.

Τον σύνδεσμο http://i44.tinypic.com/333j255.jpg θα τον αντικαταστήσετε με τον http://i56.tinypic.com/eg4x3d.jpg

Και τον http://i40.tinypic.com/51wnm9.jpg θα τον αντικαταστήσετε με τον http://i51.tinypic.com/2u7m814.jpg

Μας συγχωρείτε για την ταλαιπωρία που δεχτήκατε άθελά μας & Ευχαριστούμε για την κατανόηση σας!!!!


Κάνετε αποθήκευση προτύπου & πάμε στο 2ο βήμα.....

Πίνακας ελέγχου ---> Σχεδίαση ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.


<!--MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<ul class="solidblockmenu">
<li><a href="...your link..." class="current">Login</a></li>
<li><a href="...your link..." >Home</a></li>
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
<li><a href="...your link...">tab 3</a></li>
<li><a href="...your link...">tab 4</a></li>
<li><a href="...your link...">tab 5</a></li>
<li><a href="...your link...">tab 6</a></li>
<li><a href="...your link...">Contact me</a></li>
<li><a href="...your link...">About</a></li>
</ul>
<!--MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com-->


Το αποτέλεσμα:




Φυσικά μπορείτε να κάνετε κι άλλα tricks με το css σας, αν γνωρίζετε κάποια πραγματάκια.

Ένα απλό κολπάκι είναι, να αντιστρέψετε τους συνδέσμους των εικόνων & από μαύρο ως βασικό χρώμα, να γίνει κόκκινο με το hover ( = όταν περνάει ο κέρσορας από πάνω του) μαύρο.


Δείτε το αποτέλεσμα:



Όπου ...your link... βάζετε τον σύνδεσμο της αντίστοιχης ετικέτας ....tab 1,2,3,4,5 κτλ....

Αφού περάσετε τις ετικέτες που θέλετε κάνετε αποθήκευση & μετά από την διάταξη της σελίδας σας, παίρνεται το gadget & το τοποθετείται ακριβώς κάτω από τη κεφαλίδα σας.

Πατάτε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.

Για σχέδια σε Οριζόντια Μενού δείτε τα.....

Οριζόντιο Μενού Νο 1
Οριζόντιο Μενού Νο 2
Οριζόντιο Μενού Νο 3
Οριζόντιο Μενού Νο 4
Οριζόντιο Μενού Νο 5
Οριζόντιο Μενού Νο 6
Οριζόντιο Μενού Νο 7
Οριζόντιο Μενού Νο 8
Οριζόντιο Μενού Νο 9
Οριζόντιο Μενού Νο 10
Οριζόντιο Μενού Νο 11
Οριζόντιο Μενού Νο 12
Οριζόντιο Μενού Νο 13
Οριζόντιο Μενού Νο 14
Οριζόντιο Μενού Νο 15
Οριζόντιο Μενού Νο 16
Οριζόντιο Μενού Νο 17
Οριζόντιο Μενού Νο 18
Οριζόντιο Μενού Νο 19
Οριζόντιο Μενού Νο 20
Οριζόντιο Μενού Νο 21
Οριζόντιο Μενού Νο 22
Οριζόντιο Μενού Νο 23
Οριζόντιο Μενού Νο 24
Οριζόντιο Μενού Νο 25
Οριζόντιο Μενού Νο 26
Οριζόντιο Μενού Νο 27
Οριζόντιο Μενού Νο 28
Οριζόντιο Μενού Νο 29
Οριζόντιο Μενού Νο 30
Οριζόντιο Μενού Νο 31
Οριζόντιο Μενού Νο 32
Οριζόντιο Μενού Νο 33
Οριζόντιο Μενού Νο 34
Οριζόντιο Μενού Νο 35
Οριζόντιο Μενού Νο 36
Οριζόντιο Μενού Νο 37
Οριζόντιο Μενού Νο 38
Οριζόντιο Μενού Νο 39
Οριζόντιο Μενού Νο 40
Οριζόντιο Μενού Νο 41
Οριζόντιο Μενού Νο 42
Οριζόντιο Μενού Νο 43
Οριζόντιο Μενού Νο 44
Οριζόντιο Μενού Νο 45
Οριζόντιο Μενού Νο 46
Οριζόντιο Μενού Νο 47
Οριζόντιο Μενού Νο 48
Οριζόντιο Μενού Νο 51
Οριζόντιο Μενού Νο 52

Για σχέδια σε Κάθετα μενού δείτε τα....

Κάθετο Μενού Νο 1
Κάθετο Μενού Νο 2
Κάθετο Μενού Νο 3
Κάθετο Μενού Νο 4
Κάθετο Μενού Νο 5
Κάθετο Μενού Νο 6
Κάθετο Μενού Νο 7
Κάθετο Μενού Νο 8
Κάθετο Μενού Νο 9
Κάθετο Μενού Νο 11
Κάθετο Μενού Νο 12
Κάθετο Μενού Νο 13
Κάθετο Μενού Νο 14
Κάθετο Μενού Νο 15
Κάθετο Μενού Νο 16
Κάθετο Μενού Νο 17
Κάθετο Μενού Νο 18
Κάθετο Μενού Νο 20
Κάθετο Μενού Νο 21
Κάθετο Μενού Νο 22
Κάθετο Μενού Νο 23
Κάθετο Μενού No 26
Κάθετο Μενού Νο 30


ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!

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

  1. Καλησπέρα παλιόφιλε,

    με έσωσες με αυτό το widget...
    θέλω να ρωτησω αν γίνεται σε αυτό να βάλουμε υποκατηγορίες.
    α και κάτι άλλο. ρε συ σε παρακαλώ βγάλε αυτά τα πλαίσια που έχεις μέσα τους κώδικες, γιατί όταν αντιγράφω τον κώδικα προστίθονται και οι αριθμοί και κάθομαι να σβήνω τους αριθμούς. σου προτείνω αυτο που έχω εγώ: http://www.deluxetemplates.net/1999/02/how-to-display-codes-and-scripts-in.html

    καλη σου μερα

    ΑπάντησηΔιαγραφή
  2. Δε σε ξεχασα johnny απλα ελειπα ΣΚ γι αυτο & δεν απαντησα
    Λοιπον....
    Το μενου αυτο ειναι απλο οριζοντιο χωρις υπομενου.
    Φυσικα αν κατσεις να προσθεσεις καμια 10αρια γραμμες κωδικα ΟΛΑ αυτα τα μενου μπορουν να μετατραπουν με υπομενου.
    Σκοπος μου ηταν να ξεκινησω απο τα απλα μενου μιας & οι περισσοτεροι δεν εχουν καν μενου & δεν ηξεραν πως φτιαχνεται & μεσα σ αυτα εβαλα & καποια με υπομενου οπως τα Νο 4, 6 29, 30, και καποια στιγμη που θα βαλω το 36 σε 8 χρωματα.
    Σιγα-σιγα θα μπουν κι αλλα....
    Και μολις τελειωσω μ αυτα θα μπουν τα πιο φαντασμαγορικα....με flash.

    Οσο για τα πλαισια που εμφανιζονται οι κωδικες ειναι πολυ πιο ευκολο αυτο που χω βαλει ΑΝ καταλαβεις πως δουλευει.
    Λοιπον κανε τα εξης....
    Θα πας τον κερσορα στην δεξια πανω γωνια του πλαισιου διπλα στην διευθυνση του blog μας που 'χω βαλει σαν σχολιο.
    Εκει θα σου εμφανισει το view source & άλλες 3 εντολες.
    Πατα το view source & θα σου ανοιξει ενα ξεχωριστο παραθυρο που θα εμφανιζεται ολος ο κωδικας χωρις νουμερακια & απλα αντιγραψε τον & περασε τον στο δικο σου. Τοσο απλο ηταν...

    Φυσικα η μαλακια του ειναι, που αυτο το παραθυρακι με τις 4 εντολες οταν το χα περασει το εμφανιζε, τωρα όμως με τις μετατροπες & βελτιωσεις του blogger δε δειχνει τιποτα!!!

    Το χω στα υποψην αυτο για να το κοιταξω & να δω τι θα κανω, γιατι αυτο που μου στειλες να δω, ναι μεν ειναι ευκολο αλλά αν μπει καποιο script μεσα με jquery ή Mootools δε μπορει να το κρατησει στα ορια του παραθυρου & θα το βγαζει στην sidebar, πραγμα που δε ειναι ωραιο.
    Αυτος ηταν κι ο λογος που εβαλα αυτο, γιατι μολις φορτωσει κραταει ολον τον κωδικα στο παραθυρο που εμφανιζει, αλλά βλεπεις ολα τα πραγματα εχουν τα Υπερ & τα Κατά.

    Πιστευω να σε κάλυψα...χαχα

    Την καλημερα μου & καλη εβδομαδα!!!

    ΑπάντησηΔιαγραφή
  3. Α το άνοιξα το ξεχωριστό παραθυράκι με τον κώδικα. Πατούσα λίγο στα "τυφλά" πάνω δεξιά, αλλά το βρήκα. Πάντως επιμένω ότι αυτό που σου πα κι εγώ είναι απλό και πολύ καλό, αλλά δεν ξέρω τα μειονεκτήματα του σε jquery και Mootools που λες.

    Σχετικά με τα μενους κανεις πολυ καλη δουλεια. Θα φτιαξω μια αναρτηση με εικονες απο όλα τα σχέδια και όταν τις πατάει κάποιος θα παραπέμπουν στην αρχική τους ανάρτηση.

    Ξέρω πως να φτιάχνω τα υπομενούς. Θα το δοκιμάσω τώρα μόνος μου. Αλλά μπορώ να κάνω το υπομενού, δίχως να πειράξω τον κωδικό που έβαλα πάνω από το /head? Γιατί αν πρέπει να πειράξω κι εκείνον τον κωδικό, τότε δεν ξέρω.

    Θα σου στείλω ένα μαιλ τώρα γιατί θέλω κάτι να αλλαξω στο blog και θέλω την γνώμη σου και την βοηθειά σου :)

    ΑπάντησηΔιαγραφή
  4. Το χρησιμοποιώ στο μπλογκ μου ,αυτο που θέλω να ρωτησω ειναι πως γίνεται οταν ο επισκέπτης ειναι σε μια κατηγορια πχ "καιρός" να είναι το αντίστοιχο block highlighted δηλαδή να του δείχνει οτι βρίσκεται σε αυτη τη κατηγορία. Αν δε γινεται με αυτο το μενου ,μπορεις να μου προτείνεις καποιο άλλο? που να μπορώ να αλλάξω και τα χρώματα πιο εύκολα? αυτο ειναι το μπλογκ μου: http://www.toxrisimo.gr/

    ΑπάντησηΔιαγραφή
  5. @VangelisΑυτο μπορει να γινει μόνο αν συμπληρώσεις καποιες γραμμές στο css του μενού ή με javascript ή ακόμα & με jQuery για πιο εντυπωσιακα εφέ.

    Θα δω μήπως στο μέλλον παρουσιάσω κατι σαν αυτο που θες.

    ΑπάντησηΔιαγραφή

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)