12 Σεπτεμβρίου 2009



34 Οριζόντιο Links Menou

Μετά απο αρκετές αιτήσεις πολλών απο σας, για το πώς να βάλετε μια οριζόντια μπάρα με Links επάνω στην κορυφή του blog σας, αποφάσισα να κάνω την σημερινή ανάρτηση για όσους σας ενδιαφέρει να το κάνετε.

Έχω διαβάσει πολλά tutorials και μάλιστα πολλές φορές έκανα άνω κάτω το Template μου για να δοκιμάσω κάποια απο αυτά, για το πώς να βάλω μία οριζόντια Link λίστα στο Blog μου, ακριβώς κάτω απο την επικεφαλίδα του blog, για να δείχνει τα διάφορα απαραίτητα για μένα links. Το σημερινό αυτό tutorial μοιάζει αρκετά με όλα όσα έχω δεί και διαβάσει μέχρι τώρα, όμως διαφέρει σε κάτι βασικό.

Η διαφορά είναι πως, αυτή τη φορά, θα δημιουργήσουμε ένα link list widget που θα εμφανιστεί απο το "πουθενά" στο πρότυπό μας, και συγκεκριμένα στήν "Διάταξη" του blogger layout, κάτω ακριβώς απο το blogger header, και απο όπου θα μπορείτε πανεύκολα να προσθέτετε να αφαιρείτε η να επεξεργάζεστε τα διάφορα links, χωρίς πλέον να χρειάζεστε να ασχολείστε με τον html κώδικα του blog σας. Και τώρα δώστε προσοχή στο σημερινό tutorial (tutorial=μάθημα) ΚΑΝΤΕ ΠΡΩΤΑ BACK UP ΤΟ ΠΡΟΤΥΠΟ ΣΑΣ!!! Πηγαίνετε "Διάταξη --> Edit Html Βρείτε το </b:skin> Επικολήστε τον Css κώδικα που ακολουθεί, απο πάνω απο το </b:skin>

/* ----- LINKBAR ----- */ #linkbar { margin: 6px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; position: relative; background: #000; border: 1px solid #000; border-bottom: 0; } #linkbar ul { margin: 0px 0px 0px 0px; padding: 5px 5px 7px 5px; text-align: left; list-style-type:none; } #linkbar li { display: inline; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #linkbar h2 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: none; visibility: hidden; } #linkbar a { clear: both; margin: 0px -4px 0px 0px; padding: 3px 20px 3px 20px; width:100%; text-decoration:none; font-family: arial, sans-serif; font-weight: bold; font-size: 12px; color: #fff; border-right: 1px solid #fff; } #linkbar a:hover { color: #000; background: #fff; }


Βρείτε τώρα τους παρακάτω κώδικες-
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/> </b:section> </div>


Επικολήστε τον HTML κώδικα που ακολουθεί ΜΕΤΑ (κάτω απο) το </div>

<div id='linkbar-wrapper'> <b:section class='linkbar' id='linkbar' showaddelement='no'> <b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:loop> </ul> </div> </b:includable> </b:widget> </b:section> </div>


Thats It! Πατήστε προεπισκόπιση. Δεν έδειξε κανένα λάθος; Υπέροχα. Πατήστε "Αποθήκευση προτύπου".

Τώρα πηγαίνετε στην "Διάταξη" και κοιτάξτε επάνω ψηλά, κάτω απο την "Κεφαλίδα" του blog σας. Βλέπετε το gadget ονόματι: "linkbar" κάτω απο την κεφαλίδα του blog;
Δεν σας θυμίζει ένα γνωστό gadget του Blogger;

Πατήστε τώρα στο "Edit" Button που βλέπετε επάνω στο gadget. Ένα νέο window θα ανοίξει..άνοιξε; αυτό έλειπε, να μην ανοίξει.
Γράψτε το link που θέλετε να εμφανιστεί στην κορυφή του blog σας..τα υπόλοιπα σας είναι γνωστά. Απο εδώ πλέον θα μπορείτε να διαχειρίζεστε κάθε link. Εύκολο; Ελπίζω να σας άρεσε το σημερινό tutorial. nerd




Print this post



Related Posts :



34 σχόλια:

TeO` είπε... Best Blogger Tips

Μπράβο Νικο, ωραια δουλεια!!
Το δοκιμασα σε ενα τεστ blog που εχω και λειτουργησε αψογα.
Βεβαια στο blog μου το κανονικο, προτιμω να κρατησω το μενου που εχω αυτη τη στιγμη.
Σε ευχαριστω για τα καλα tutorials.


Tv-Greek είπε... Best Blogger Tips

Νίκο δεν βάζεις και ένα link για την αρχική σου σελίδα, γιατί όση μπαίνουμε από google Reader διαβάζουμε την εκάστοτε καινούργια ανάρτησή σου αλλά μετά δεν μπορούμε να πάμε στην αρχική σελίδα. Επίσης εγώ που μπαίνω με firefox δεν βλέπω την επικεφαλίδα του blog σου (με explorer, safari, opera και chrome φαίνεται κανονικά)και είναι λίγο μπέρδεμα. Ένα link με [αρχική] θα έλυνε αυτό το πρόβλημα. Επίσης άμα έχεις λίγο χρόνο μπες να δεις της αλλαγές που έκανα στην σελίδα μου, κάθε παρατήρηση έχει σημασία για μένα. Χερετό σε!


varelogiannis@gmail.com είπε... Best Blogger Tips

Νίκο καλημέρα
Το δοκίμασα στα δικά μου blogs όλα καλά εκτός από το χρωμα του ιστολογίου το κάνει και το διατηρεί ασπρο από μαυρο που είναι το
επανέφερα με Διαταξη - επιλογή νεου προτυπου
έχεις καμιά λύση γιατί με ενδιαφερει
Δημήτρης
http://varelogiannisfoto.blogspot.com/
http://mesochoraphotos.blogspot.com/


indianbet είπε... Best Blogger Tips

ΕΙΣΑΙ ΜΑΓΟΣ!!!!!!
thanksssss


Dorothea είπε... Best Blogger Tips

Νίκο μου ευχαριστούμε! Θα το δοκιμάσω όταν βρω ώρα :)
Καλή εβδομάδα!


Εξύμνoς είπε... Best Blogger Tips

Λοιπον, το δοκιμασα σε αλλο blog και λειτουργησε! Μου βγαζει ομως τα λινκ με κουκιδες το ενα κατω απ' τ' αλλο... και απο τον html δεν βρισκω τροπο να πειραξω κατι... Βασικα σε πριζω... θα το παλεψω Νικολα! ΤΗΝΧ!


Global Greek είπε... Best Blogger Tips

Νίκο είσαι Θεός! μόλις το έκανα και είναι σούπερ τέλειο. Εβαλα τώρα όλους τους "followers", επάνω και θα βάλω κι άλλα λινκ! ευχαριστούμε!!!!


Stelios Saja Original είπε... Best Blogger Tips

to ekana sto blog mou alla meta otan thelhsa na allaxo template (apo ta epilegmena toou blogger) mou emfanistike katheto. epeita piga diataksi> kai soixeia selidas kai to diegrapsa. meta omos atan akolouthisa ta vimata sou den vrika to div id='header-wrapper' gia na epikoliso na ypolipa. mporeis mipos na mou peis pou peripou briskete gia na to epikoliso . ha ma exeis mia alli idea gia to pos mporo na bgalo tin bara pes tin pou plzzzzzzz


ypoga είπε... Best Blogger Tips

καλημερα και απο μενα. νικο μετα την επικολληση και του 2ου κοματιου που δινεις μου πεταει αυτο:

Βρέθηκαν περισσότερα γραφικά στοιχεία με αναγνωριστικό: LinkList1. Τα αναγνωριστικά γραφικών στοιχείων πρέπει να είναι μοναδικά.

με συνεπεια να μην μπορω να κανω κατι


ypoga είπε... Best Blogger Tips

νικο δεν εχω λογια..............

ευχαριστώ ολα δουλεψαν ρολοι μετα το mail σου

ευχαριστώ και παλι


litsa andreou είπε... Best Blogger Tips

poly kaly doulia mprabo egv eimai teleios asxeth
einai wraia pou enimerwnetai olous!!!!!!!!!!!!!
synxaritiria!!!!!!!!!!!!!!


Foyntas Spiros ( F.S.78) είπε... Best Blogger Tips

ΤΟ ΔΟΚΙΜΑΣΑ ΚΑΙ ΜΟΥ ΒΓΑΖΕΙ ΤΟ ΙΔΙΟ ΠΡΟΒΛΗΜΑ ΜΕ ΤΟΝ/ΤΗΝ
ypoga (βλ. σχόλιο 9)


AATON είπε... Best Blogger Tips

Σπύρο, εάν σου βγάζει πως "υπάρχουν περισσότερα απο ένα γραφικά στοιχεία με αναγνωριστικό: LinkList1"
τότε άλλαξε το δεύτερο LinkList1, και κάντο LinkList2, η LinkList3 ανάλογα με τα πόσα θα βρεί. Τότε θα λυθεί και το πρόβλημα. Συγνώμη που άργησα να απαντήσω.


SPIROS FOYNTAS είπε... Best Blogger Tips

ΟΚ, Νίκο σε ευχαριστώ και καλή εβδομάδα να έχεις !!!
;-)


Apokalipsis999 είπε... Best Blogger Tips

Νικόλα καλημέρα,
Ξεκινάω από το τέλος της ανάρτησής σου:
Μου βγάζει το linkbar, πατώ το edit, και βλέπω το εξής παράθυρο (δες εδώ) Αφού έβαλα 2 link με όνομα, στην προεπισκόπηση μου τα έδειξε κάθετα και όχι οριζόντια (δες εδώ)!
Πως μπορώ να τα βάλω σε οριζόντια γραμμή, και πως μπορώ να τους βάλω ένχρωμο buckround για να εμφανίζονται δηλ. μέσα σε μπάρα, ή έστω αλλάξω χρώμα στη γραμματοσειρά;

Ελπίζω να μη σε κούρασα.


AATON είπε... Best Blogger Tips

Αγαπητέ φίλε Apokalipsis999, προσπάθησες να φτιάξεις οριζόντια μπάρα με μενού-λίνκς, αλά με λάθος τρόπο. Άλλο η μπάρα της blogger, και που βγαίνει κάθετα πάντοτε, κι άλλο η μπάρα που εγώ σας δείχνω στην συγκεκριμένη ανάρτηση. Θα σου προτείνω να διαβάσεις καλά την ανάρτηση απο την αρχή, και να προσπαθήσεις να φτιάξεις οριζόντιο μενού. Είμαι σίγουρος πως θα τα καταφέρεις και πως θα λειτουργήσει όπως και στους υπόλοιπους φίλους μας που έγραψαν στα σχόλια πως τα κατάφεραν.
Μην ξεχάσεις μόνο πρίν κάνεις οτι δήποτε να κάνεις αποθήκευση του προτύπου σου.


Apokalipsis999 είπε... Best Blogger Tips

Μετά κόπων και βασάνων τα κατάφερα!


AATON είπε... Best Blogger Tips

Χαίρομαι πραγματικά, ήμουν σίγουρος πως θα τα κατάφερνες :))


2009volley είπε... Best Blogger Tips

Πολύ καλό - χρήσιμο και εύκολο στην προσαρμογή του
Ευχαριστούμε και για το χρόνο σου και μπράβο για το μεράκι σου


Thodoras13 είπε... Best Blogger Tips

Με έσωσες!! Το έψαχνα μέρες...να είσαι πάντα καλά!!


AATON είπε... Best Blogger Tips

Να στε καλά βρε παιδιά :)


Dimitra είπε... Best Blogger Tips

πως να κανω back up? :/


AATON είπε... Best Blogger Tips

Δήμητρα, διάβασε ααυτήν εδώ την ανάρτηση και θα δείς πως: Blog Back Up


Βασίλης είπε... Best Blogger Tips

Ευχαριστώ πάρα πολύ για τη βοήθεια σας ..!!!
Παρόλο που δε ρώτησα κάτι , απαντήσατε στην ερώτησή μου μέσω ενός άλλου blogger .. Είχα απελπιστεί και δώσατε λύση .. Νόμιζα ότι θα χανόταν το ιστολογιο μου..Ευχαριστώ για όλα!

Βασίλης
Ygeia-online.blogspot.com


Dimitra είπε... Best Blogger Tips

νά'μαι πάλι... :P εμένα μου βγάζει πάνω από την μπάρα-μενού άσπρες διακεκομμένες γραμμές..πώς μπορώ να τις αφαιρέσω?? :/


AATON είπε... Best Blogger Tips

*** Βασίλη χαίρομαι :)

*** Δήμητρα, δώσε μου λίγο το λινκ σου να το δω


cummulus είπε... Best Blogger Tips

Καλημέρα.
Στό ΠΙΝΑΚΑΣ ΕΛΕΓΧΟΥ>ΕΠΕΞΕΡΓΑΣΙΑ ΗΤΜL, του μπλογκ μου, δέν υπάρχει πεδίο αναζήτησης, για να ζητήσω νά βρω τό

"Βρείτε το "

Κάποτε αύτό τό πεδίο τό έβλεπα. Τώρα όχι, καί δέν ξέρω γιατί. Καμμιά βοήθεια;


cummulus είπε... Best Blogger Tips

Νά βρώ το: δηλαδή


cummulus είπε... Best Blogger Tips

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


cummulus είπε... Best Blogger Tips

ok,ok! ξέχασα νά πατήσω τό ctrl+F !!!


Dimitra είπε... Best Blogger Tips

Το λινκ απ'το μπλογκ μου? http://pcommand.blogspot.com/


AATON είπε... Best Blogger Tips

Οι διακεκομμένες που βλέπεις, δεν είναι κανένα σφάλμα, μα η δομή του CSS του προτύπου σου.
Αν προσέξεις, οι διακεκομμένες γραμμές (dotted) βρίσκονται και σε άλλα σημεία στο ιστολόγιό σου.

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

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

1. < Variable name="post.border.style" description="Post Border Style" type="string" default="dotted"/ >

και

2. _background-image: none;
border: dotted 1px #000000;

Μπορείς να πειραματιστείς, αλλάζοντας τις μεταβλητές απο dotted σε μια άλλη, και οι οποίες είναι τρείς συνολικά: dotted, dashed, Solid


Dimitra είπε... Best Blogger Tips

να'σαι καλα AATON!ευχαριστω για τις χρησιμες συμβουλες σου :)


Sheena Dimitriou είπε... Best Blogger Tips

Δούλεψε! Σε ευχαριστώ πολύ


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

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next