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

Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (2)


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.

Θα φαίνεται κάπως έτσι:


Ακολουθήστε τα παρακάτω βήματα για να την βάλετε κι εσείς:

1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com
2. Πανόπτης> Σχεδίαση> Επεξεργασία html
3. Με το ctrl+F βρείτε το </head>
4. Πάνω από αυτό επικολλήστε το παρακάτω:

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

5. Αποθηκεύουμε το πρότυπό μας
6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript
7. Βάλτε τον παρακάτω κωδικό:

<div id="foxmenucontainer">

<div id="menu">

<ul>

<li><a expr:href="data:blog.homepageUrl">Home</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Tutorials</a>
<ul>
<li><a href="#">Blogger Tutorials</a></li>
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">JQuery Tutorials</a></li>
<li><a href="#">Blogger Tools</a></li>
<li><a href="#">Blogger Layouts</a></li>
<li><a href="#">Blogger Templates</a></li>
</ul>
</li>

<li><a href="#" title="#">Contact</a></li>

</ul>

</div>

</div>

Όπου το # βάζετε το link σας και όπου About (και τα άλλα ονόματα) βάζετε το όνομα του link.

Προσέξτε τον χρωματισμό για να καταλάβετε καλύτερα!

8. Αποθήκευση κι είστε έτοιμοι!

Θα ακολουθήσουν κι άλλα σχέδια.

Τα σχόλιά σας, πάντα ευπρόσδεκτα!

Copyrights: http://bloggertips.gr/

Stumble
Delicious
Technorati
Twitter
Facebook

22 comments:

Bianco7Rossi είπε...

to link pws to bazw? to ftiaxnw apo microsoft office world?

Johnpatra είπε...

Όχι, όχι μην μπερδευτήτε με άλλα προγράμματα.

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

Για αυτό θα σας παραπέμπψω σε μια παλαιότερη μου ανάρτηση την http://www.bloggertips.gr/2011/02/blogger-menu-1.html

Η λογική είναι ακριβώς η ίδια, αν δεν καταλάβεις ξανα πες μου

Bianco7Rossi είπε...

john diabasa thn anarthsh omws den katalaba pws bazw ta link...
dhladh gia paradeigma egw exw ena a8lhtiko blog... kai ftiagnw mia enothta me onoma chat room. kai exw to html tou chatbox. pws to bazw wste na patas sthn enothta kai me to link na anoigei sto chat room? efxaristw ek ton proteron file john.

Johnpatra είπε...

@Bianco7Rossi θα ακολουθήσει ανάρτηση για το ερώτημά σου.
Πιστεύω θα την έχω τελειώσει σήμερα.

Johnpatra είπε...

Άκυρο.

Δεν φτιάχνω ανάρτηση γιατί είναι πολύ απλό ζήτημα και δεν αξίζει ανάρτησης.

Εσύ βάλε το html του chat box μέσα σε μια ανάρτηση. Μετά δημοσίευσε την ανάρτηση, και πάρε το λινκ της.

Μετά με το λινκ της ανάρτησης, μπορείς να την βάλεις στην μπάρα.

Στην μπάρα όπου έχει # σημαίνει να βάλεις το λινκ που θέλετε να οδηγεί.

Bianco7Rossi είπε...

johnpatra akou. OXI APLA SE EFXARISTW 8A SOU KANW EIKONISMA SPITI MOU FILE EISAI APEKTOS 8A SOU KANW LAMPADA AFTO TO PSAXNW 8 MHNES.
SE YPEREFXARISTWWWWWWW.
BLOGGERTIPS.GR FOR EVERRRRRRRRR

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

γεια σας, εχω ενα προβλημα με τον κωδικο. οι υποκαρτελες αντι να βγαινουν η μια κατω απο την απο την αλλη, μου εμφανιζει μονο την πρωτη. πειραζοντας τον κωδικο το μονο που καταφερα ηταν να εμφανιζεται η μια πανω απο την αλλη. πως θα το κανω να εμφανιζονται η μια κατω απο την αλλη;
ευχαριστω!

Αρχισυντάκτη είπε...

ΠΡΟΒΛΗΜΑ.Καλησπέρα καταρχάς, Φίλε μου είναι αυτό που ψάχνω εδώ και καιρό. Αλλά δεν έχω καταλάβει το θέμα με τα link. Θέλω αυτά να οδηγούν σε ετικέττες ως υποκαρτέλες. Δοκίμασα (αν και αρχάριος) διάφορα κόλπα μήπως κάτι δεν κατάλαβα καλά. Θα με εξηπηρετούσε να γινόσασταν πιο αναλυτικός βήμα-βήμα. Δοκίμασα και το (1) αλλά εκεί με μπέρδεψε περισσότερο. Παρακαλώ βοηθήστε όσο μπορείτε. Ευχαριστώ πολύ.

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

@Traveler καταρχας να σου πω ότι εχεις πολυ ωραιο blog και ως φανατικος ταξιδιωτης, θα το επισκεπτομαι συχνα.

Σχετικα με την απορια δεν καταλαβα τι εννοεις και ενω επισκεφτηκα το blog σου δεν το ειδα. αργησα βεβαια, αλλα....

@Αρχισυντάκτη σε όλα τα menus η προσθήκη συνδέσμων είναι η ίδια. δες μια στο http://www.bloggertips.gr/2009/07/blog-link.html που τα περιγράφω αναλυτικά.

Traveler είπε...

Johnpatra eyxaristw poly.

to provlima pou exw me to menu ayto einai oti den mou evgaze tis ypokarteles. mou edeixne mono tin prwti kai oi alles den fainontan apo katw se seira alla empainan pisw apo tin prwti ws apotelesma na min fainontai.

to evgala apo to blog logo toy provlimatos aytou, perimenw kapoia voitheia na to diorthwsw.

eyxaristw gia ta kala sou logia kai gia ola ayta ta xrisima pou exeis kai mas voithas!

Johnpatra είπε...

Α ναι τωρα κατάλαβα τι λες...

όχι αυτο το προβλημα ακομα ψαχνω που οφειλεται..

πάντως εχω παρατηρησει οτι γινεται σε μερικα μονο προτυπα και ενα απο αυτα ειναι το δικο σου

ΒΟΝΙΤΣΑ PRESS είπε...

eno exo ftiaksei ton kodika ton perasa sto blog kai simvainei to eksis paralogo. eno stin deksia stili moy anoigei to ypomenoy kanonika otan to pernao stin korifi kato apo ton titlo den anoigei katholou tis karteles ti mporei na ftaiei???
sigxaritiria katapliktiki doyleia

Greek Downloads είπε...

to idio kai se emena bonitsa... ama to exo sto plai anoigoun kanonika i karteles mia kato apo tin alli... ama bazo omos tin mpara stin korifi mou anoigi mono to proto kai i alles einai san na min uparxoun!

ΒΟΝΙΤΣΑ PRESS είπε...

ti mporei na ftaiei? ksereis?

diadrastiko είπε...

Παρακαλώ πολύ θα ήθελα να μου διευκρινίσετε τι βάζω στην κόκκινη και τι στην πράσινη #. Διότι κάπου κάνω λάθος και μου εμφανίζει την υποκαρτέλα μαζί με την # και όταν βάζω το ποντίκι επάνω εξαφανίζεται η υποκαρτέλα και δεν την προλαβαίνω (υπόψη ότι το link που δίνω στην πράσινη # είναι το http://κλπ κλπ από ετικέτες που μέσα του περιέχουν αναρτήσεις) Σας ευχαριστώ πολύ. Όποτε έχετε λίγο χρόνο βοηθήστε λίγο κι εμένα.

diadrastiko είπε...

Ενώ το κατάφερα, αντιμετωπίζω το ίδιο πρόβλημα με τον Traveler: Στις υποκαρτέλες όλες πέφτουν πίσω από την πρώτη και δεν φαίνονται, παρά ίσα μία ιδέα ότι σαν κάτι να υπάρχει από πίσω.
Τι θα μπορούσαμε να κάνουμε για να το φτιάξουμε (υπάρχει κάποιο στοιχείο όπως το /ul που "σπρώχνει" στα δεξιά, να θέτει την κάθε καρτέλα κάτω από την άλλη);

Johnpatra είπε...

ΠΡΟΣΟΧΗ ΣΕ ΠΕΡΙΠΤΩΣΗ ΠΟΥ ΣΑΣ ΛΕΕΙ ΟΤΙ Η ΕΙΚΟΝΑ ΑΠΟ ΤΟ TINYPIPIC ΕΧΕΙ ΔΙΑΓΡΑΦΕΙ ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ ΣΤΟΝ ΚΩΔΙΚΑ ΤΑ:

ΤΟ http://i45.tinypic.com/rlw8qe.jpg

ΜΕ ΤΟ

http://4.bp.blogspot.com/_4HKUHirY_2U/SwyU1a1gbOI/AAAAAAAAAUk/L3j02eS_vEs/menu.jpg

ΚΑΙ ΤΟ

http://i47.tinypic.com/20zxzdj.jpg

ΜΕ ΤΟ

http://1.bp.blogspot.com/_4HKUHirY_2U/SwyU4P9aMgI/AAAAAAAAAUs/Q5AkIuvWg3g/menuhov.jpg


ΤΟ ΚΑΘΕΝΑ ΠΡΕΠΕΙ ΝΑ ΤΟ ΑΝΤΙΚΑΤΑΣΤΗΣΕ 2 ΦΟΡΕΣ ΓΙΑΤΙ ΥΠΑΡΧΕΙ 2 ΦΟΡΕΣ ΜΕΣΑ ΣΤΟΝ ΚΩΔΙΚΑ!!

ΣΟΥ ΠΡΟΤΕΙΝΩ ΓΙΑ ΝΑ ΜΗΝ ΞΑΝΑΕΧΕΙΣ ΤΕΤΟΙΑ ΠΡΟΒΛΗΜΑ ΝΑ ΑΝΕΒΑΣΕΙΣ ΤΙ ΕΙΚΟΝΕΣ ΑΥΤΕΣ ΣΤΟ http://imageshack.us/ ΜΟΝΟΣ ΣΟΥ ΚΑΙ ΝΑ ΑΝΤΙΚΑΤΑΣΤΗΣΕΙΣ ΣΤΟΝ ΠΑΡΑΠΑΝΩ ΚΩΔΙΚΑ ΜΕ ΤΟ ΔΙΚΟ ΣΟΥ ΛΙΝΚ!

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

όμορφα και τα τρία που ΄δοκίμασα και σε ευχαριστώ. Για α δουλέψει όμως και να βγάζει πάνω από ένα υπομενού που είναι 29 px το καθένα και πολαπλάσια αντί να μεγαλώνεις το ύψος ανάλογα με τα πόσα υπομενού θέλεις που έχει σαν αποτέλεσμα να μεγαλώνει και η απόσταση μεταξύ καρτελών και ανάρτησης - γιατί το άκουσα στις προτάσεις - να μπεί αυτό (height:auto;) αντί για (height:29px;) Και φυσικά το χρώμα φόντου του προτύπου διάφανο (transparent)Θα είθελα όμως αν μπορείς κάτι για τις φωτό τις δύο που βάζουμε για φόντο μπορώ να φτιάξω και να αποθηκεύσω μία σε χρώμα ας πούμε κόκκινο; και πώς σαν μια απλή φωτό με συγκεκριμένη διάσταση στο φοτοσοπ ; Η ΣΦΗΚΑ sioualtec.blogspot.gr

Internet Mania είπε...

εχω φτιαξει αυτην την σελιδα http://free-moviesgr.blogspot.gr/ και θελω να βαλω μια navigation bar και εχω φτιαξει μια στο web plus της serif και εχω κανει export σε html. Μήπως μπωρώ να βαλω την δικια μου μπαρα και αν ναι πως θα το κάνω? θα παω στο Πρότυπο> Επεξεργασία html θα βαλω αυτο που μου λετε και μετα θα παω Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και θα βάλω τον δικο μου κωδικα??

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

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

ΟΧΙ 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 *