Στο 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
Καλησπέρα παλιόφιλε,
ΑπάντησηΔιαγραφήμε έσωσες με αυτό το widget...
θέλω να ρωτησω αν γίνεται σε αυτό να βάλουμε υποκατηγορίες.
α και κάτι άλλο. ρε συ σε παρακαλώ βγάλε αυτά τα πλαίσια που έχεις μέσα τους κώδικες, γιατί όταν αντιγράφω τον κώδικα προστίθονται και οι αριθμοί και κάθομαι να σβήνω τους αριθμούς. σου προτείνω αυτο που έχω εγώ: http://www.deluxetemplates.net/1999/02/how-to-display-codes-and-scripts-in.html
καλη σου μερα
Δε σε ξεχασα johnny απλα ελειπα ΣΚ γι αυτο & δεν απαντησα
ΑπάντησηΔιαγραφήΛοιπον....
Το μενου αυτο ειναι απλο οριζοντιο χωρις υπομενου.
Φυσικα αν κατσεις να προσθεσεις καμια 10αρια γραμμες κωδικα ΟΛΑ αυτα τα μενου μπορουν να μετατραπουν με υπομενου.
Σκοπος μου ηταν να ξεκινησω απο τα απλα μενου μιας & οι περισσοτεροι δεν εχουν καν μενου & δεν ηξεραν πως φτιαχνεται & μεσα σ αυτα εβαλα & καποια με υπομενου οπως τα Νο 4, 6 29, 30, και καποια στιγμη που θα βαλω το 36 σε 8 χρωματα.
Σιγα-σιγα θα μπουν κι αλλα....
Και μολις τελειωσω μ αυτα θα μπουν τα πιο φαντασμαγορικα....με flash.
Οσο για τα πλαισια που εμφανιζονται οι κωδικες ειναι πολυ πιο ευκολο αυτο που χω βαλει ΑΝ καταλαβεις πως δουλευει.
Λοιπον κανε τα εξης....
Θα πας τον κερσορα στην δεξια πανω γωνια του πλαισιου διπλα στην διευθυνση του blog μας που 'χω βαλει σαν σχολιο.
Εκει θα σου εμφανισει το view source & άλλες 3 εντολες.
Πατα το view source & θα σου ανοιξει ενα ξεχωριστο παραθυρο που θα εμφανιζεται ολος ο κωδικας χωρις νουμερακια & απλα αντιγραψε τον & περασε τον στο δικο σου. Τοσο απλο ηταν...
Φυσικα η μαλακια του ειναι, που αυτο το παραθυρακι με τις 4 εντολες οταν το χα περασει το εμφανιζε, τωρα όμως με τις μετατροπες & βελτιωσεις του blogger δε δειχνει τιποτα!!!
Το χω στα υποψην αυτο για να το κοιταξω & να δω τι θα κανω, γιατι αυτο που μου στειλες να δω, ναι μεν ειναι ευκολο αλλά αν μπει καποιο script μεσα με jquery ή Mootools δε μπορει να το κρατησει στα ορια του παραθυρου & θα το βγαζει στην sidebar, πραγμα που δε ειναι ωραιο.
Αυτος ηταν κι ο λογος που εβαλα αυτο, γιατι μολις φορτωσει κραταει ολον τον κωδικα στο παραθυρο που εμφανιζει, αλλά βλεπεις ολα τα πραγματα εχουν τα Υπερ & τα Κατά.
Πιστευω να σε κάλυψα...χαχα
Την καλημερα μου & καλη εβδομαδα!!!
Α το άνοιξα το ξεχωριστό παραθυράκι με τον κώδικα. Πατούσα λίγο στα "τυφλά" πάνω δεξιά, αλλά το βρήκα. Πάντως επιμένω ότι αυτό που σου πα κι εγώ είναι απλό και πολύ καλό, αλλά δεν ξέρω τα μειονεκτήματα του σε jquery και Mootools που λες.
ΑπάντησηΔιαγραφήΣχετικά με τα μενους κανεις πολυ καλη δουλεια. Θα φτιαξω μια αναρτηση με εικονες απο όλα τα σχέδια και όταν τις πατάει κάποιος θα παραπέμπουν στην αρχική τους ανάρτηση.
Ξέρω πως να φτιάχνω τα υπομενούς. Θα το δοκιμάσω τώρα μόνος μου. Αλλά μπορώ να κάνω το υπομενού, δίχως να πειράξω τον κωδικό που έβαλα πάνω από το /head? Γιατί αν πρέπει να πειράξω κι εκείνον τον κωδικό, τότε δεν ξέρω.
Θα σου στείλω ένα μαιλ τώρα γιατί θέλω κάτι να αλλαξω στο blog και θέλω την γνώμη σου και την βοηθειά σου :)
Το χρησιμοποιώ στο μπλογκ μου ,αυτο που θέλω να ρωτησω ειναι πως γίνεται οταν ο επισκέπτης ειναι σε μια κατηγορια πχ "καιρός" να είναι το αντίστοιχο block highlighted δηλαδή να του δείχνει οτι βρίσκεται σε αυτη τη κατηγορία. Αν δε γινεται με αυτο το μενου ,μπορεις να μου προτείνεις καποιο άλλο? που να μπορώ να αλλάξω και τα χρώματα πιο εύκολα? αυτο ειναι το μπλογκ μου: http://www.toxrisimo.gr/
ΑπάντησηΔιαγραφή@VangelisΑυτο μπορει να γινει μόνο αν συμπληρώσεις καποιες γραμμές στο css του μενού ή με javascript ή ακόμα & με jQuery για πιο εντυπωσιακα εφέ.
ΑπάντησηΔιαγραφήΘα δω μήπως στο μέλλον παρουσιάσω κατι σαν αυτο που θες.