Τετάρτη, 14 Ιανουαρίου 2009

Print this post

ΤΡΙΣΤΗΛΑ TEMPLATES... ΑΒΑΔΙΣΤΑ ΚΑΙ ΑΒΑΣΑΝΙΣΤΑ

Σήμερα θα σας δείξω πως μπορείτε να μετατρέψετε το template του blog σας σε τρίστηλο (αρκεί να ανήκετε στην πλατφόρμα του blogspot). Καλό είναι να κάνεται ένα back up τον κώδικα σας για λόγους ασφαλείας πριν ξεκινήσετε οτιδήποτε.
Πάμε στον πανόπτη, από εκεί διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι που λέει επέκταση γραφικών στοιχείων το αφήνουμε έτσι όπως είναι και δεν το πειράζουμε (ατσεκάριστο).
Βρίσκουμε το κομμάτι του κώδικα που λέει:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Το αντιγράφουμε έτσι όπως είναι (copy - paste) ακριβώς από κάτω και έτσι το έχουμε δυο φορές. Στο πρώτο εκεί που λέει float βάζουμε right και σβήνουμε αυτό που έχει, συνήθως λέει $startSide (φαίνεται πάνω η αλλαγή). Τώρα αλλάζουμε σ' αυτό που μόλις αντιγράψαμε (στο δεύτερο) αυτά που φαίνονται παρακάτω με κόκκινο χρώμα:

#left-sidebar-wrapper (αυτό δημιουργεί τη νέα στήλη) float: left; (αυτό θα κάνει την καινούρια στήλη να εμφανίζεται στα αριστερά της κεντρικής όπου εμφανίζονται τα post).

Με τις παραπάνω κινήσεις μόλις προσθέσαμε άλλη μια sidebar.
Στη συνέχεια κοιτάζουμε να βρούμε το μέρος του κώδικα που λέει:

<div id='main-wrapper'>

Ακριβώς πριν από αυτόν αντιγράφουμε και κάνουμε επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Αυτό γίνεται (<div id='main-wrapper'>) για να μπορέσει ο browser να καταλάβει ότι υπάρχει και άλλη μπάρα. Το άλλο κομμάτι του κώδικα (<b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>) είναι για να καταλάβει ο browser τι είδους στοιχεία (widgets) υπάρχουν στην καινούρια μας στήλη. Το ID πρέπει να είναι left-sidebar για να μην έχουμε διενέξεις και προβλήματα και για να καθορίσουμε ότι η καινούρια μας στήλη θα βρίσκεται στην αριστερή πλευρά τoυ template μας. Τα παραπάνω, όμως είναι για εγκυκλοπαιδικούς λόγους. Ας συνεχίσουμε με πράξη.
Λογικά θα πρέπει να μεγαλώσουμε το template μας για να χωρέσουν όλα. Βρίσκουμε το κομμάτι του κώδικα που λέει:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Και αντικαθιστούμε την τιμή 660 με 880. Για να είναι όμως πιο καλαίσθητο πρέπει να μεγαλώσουμε και και το μέρος που φιλοξενεί το logo μας. Πάμε και βρίσκουμε το κομμάτι του κώδικα που λέει:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Και εδώ την τιμή την αλλάζουμε από 660 σε 880 (στο ακριβώς παραπάνω παράδειγμα η τιμή έχει ήδη αλλαχτεί).
Πατάμε αποθήκευση αν και δεν τελειώσαμε για να ελέγξουμε ότι όλα πάνε καλά. Εφόσον κάνουμε αποθήκευση (save) πάμε πανόπης, διάταξη και στοιχεία σελίδας και η εικόνα που πρέπει να αντικρίσετε είναι όπως η παρακάτω:


Όπως προανέφερα δεν τελειώσαμε. Η στήλη υπάρχει αλλά θα είναι ορατή στο blog μόνο όταν βάλετε κάποιο widget. Πρέπει να κάνουμε τα στοιχεία που θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στα post μας (κάτι το οποίο είναι ενοχλητικό). Πάμε πάλι στη διάταξη, από εκεί επεξεργασία HTML και ψάχνουμε να βρούμε το κομμάτι του κώδικα:

#main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Και προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Πατήστε αποθήκευση (save) και τελειώσατε. Για να βάλετε στήλη στα δεξιά ακολουθήστε την ίδια διαδικασία μόνο εκεί που λέει left; βάλτε right;

UPDATE:
Η παραπάνω διαδικασία αφορά τo Minima template (σαν το δικό μου δηλαδή) και τις παραλαγές του. Για άλλα templates πρέπει να διαθέσετε λίγο χρόνο για να πειραματιστείτε με τις τιμές των: Outer-Wrapper, Header-Wrapper και margin. Αυτό γιατί άλλα templates είναι πιο σ;yνθετα (περιέχουν σχέδια, footers, χρώματα κλπ.)

buzz it!

26 σχόλια:

  1. ψαχνω τόσο καιρό.. Υπάρχει και μία αλλη λύση. Βρήκα αυτό http://www.blogcrowds.com/resources/blogger_template.php/red. Αν μπείς σε αυτό το σύνδεσμο είναι ένα site που έχει έτοιμα δίστηλα ή τρίστυλα σαν του blogspot. Αλλά φοβάμαι ρε ΗACK και δεν κάνω τίποτα απο αυτά. Δεν είμαι και πολύ exper.. Και αυτά που έγραψες εύκολα φαίνονται αλλά φοβάμαι μην τα μπερδέψω και.......... Καταλαβαίνεις..

    ΑπάντησηΔιαγραφή
  2. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή
  3. Kαι να σε ρωτήσω πρίν κάνουμε όλα αυτά κάνουμε λήψη πλήρους προτύπου και το αποθυκεύουμε όπου να'ναι στον υπολογιστή;;Περιμένω απάντηση σου

    ΑπάντησηΔιαγραφή
  4. @χαρουλίτα Το πρότυπο αποθήκευσε το όπου θέλεις. Αν θέλεις κάνε ένα άλλο blog και πειραματίσου όσο θες. Μπορείς να έχεις όσα blogs θέλεις σε ένα λογαριασμό.

    ΑπάντησηΔιαγραφή
  5. Σε ευχαριστώ Hack. Θα το δοκιμάσω. Καλό βράδυ..

    ΑπάντησηΔιαγραφή
  6. ΚΑΛΗΣΠΕΡΑ.ΩΡΑΙΑ ΟΛΑ ΑΥΤΑ ΑΛΛΑ ΓΙΑ ΜΕΝΑ ΤΟΝ ΑΣΧΕΤΟ ΕΙΝΑΙ ΒΟΥΝΟ.ΑΛΗΘΕΙΑ ΠΩΣ ΘΑ ΒΑΛΩ ΤΟ ΒΡΑΒΕΙΟ ΝΑ ΦΑΙΝΕΤΑΙ ΣΤΟ ΠΛΑΙ;

    ΑπάντησηΔιαγραφή
  7. Πολύ καλή και χρήσιμη η ανάρτηση σου. Προσπαθώ και γω να μάθω κάποια πράγματα και κάνω παρόμοιες αναρτήσεις. Εμένα πάλι μου ¨κολλάει¨ άλλα υποψιάζομαι ότι φταίει ο Η/Υ.

    ΑπάντησηΔιαγραφή
  8. δεν μου φάνηκε δύσκολο και θα το είχα κάνει αν εμένα δεν ήταν ήδη πειραγμένα κάποια νούμερα. αντε να βάζετε και άλλα κολπάκια για μας τους άσχετους!

    ΑπάντησηΔιαγραφή
  9. @JK O SΚΡΟΥΤΖΑΚΟS Κάνεις δεξί κλικ στην εικόνα - αποθήκευση ως... - πας στον πανόπτη,διάταξη, προσθήκη gadget, ενοίγει ένα παράθυρο, πας εικόνα, φορτώνεις την εικόνα από 'κει που την έχεις αποθηκεύσει, αποθήκευση και τέλος. Να ξέρεις ότι όλοι γεννηθήκαμε άσχετοι και πίστεψε με αν ασχοληθείς λίγο θα σου φανούνε ευκολότερα. Για το άλλο θέμα δεν σε ξέχασα. Απλά περιμένω και εγώ τηλέφωνο.
    @Theogr ο κηπουρός Όταν λες σου κολλάει τι εννοείς ακριβώς? Το internet ή το pc?

    ΑπάντησηΔιαγραφή
  10. @Το χρυσό ΠιΠι Μη νομίζεις ότι είμαι ιδιαίτερα σχετικός. Όταν λες πειραγμένα κάποια νούμερα τι εννοείς;

    ΑπάντησηΔιαγραφή
  11. @xaroulita Και κάτι ακόμα. Αν βάλεις tamplatew από αλλού να ξέρεις ότι ότι έβαλες στο blog σoυ (widgets) θα χαθούνε. Η διαδικασία που παραθέτω προσθέτει μια στήλη στο ήδη υπάρχον template.

    ΑπάντησηΔιαγραφή
  12. Καλημέραααα. Λοιπόν.. Το δικό μου temlate παρόλο που είναι από το blogspot δεν έχει τον ίδιο κώδικα με σένα γιατί είναι διαφορετικό.. Βρήκα όλα αυτά που εγραψες στην ανάρτηση σου αλλά στο πρώτο κομμάτι είναι τελείως διαφορετικά. Πολύ στεναχωρήθηκα.. Τα νούμερα είναι διαφορετικά κλπ κλπ. Αν μπορείς να βοηθήσεις θα το εκτιμούσα ιδιαίτερα.

    ΑπάντησηΔιαγραφή
  13. Έχω χρησιμοποιήσει και το blogspot και θα έλεγα ότι είναι μια χαρά απλούστατος στο να τον δουλέψεις και βρίσκεις κι έτοιμα templates σε ότι σχέδιο και χρώμα θες και φυσικά και σε 4στηλο μέγεθος.
    Η μαλακία είναι ότι από κει που δεν το περιμένεις, κι ας είναι ένα blog σημειώσεων, πάει ο άλλος και το αναφέρει και ξαφνικά δεν βρίσκεις το blog.
    Μ'αρέσει το wordpress και το δουλεύω άψογα. Έχει δυνατότητες που με τον Blogger πρέπει να τις προσθέσεις σαν ξεχωριστούς κώδικες html. Μάλιστα τελευταία έχει ανανεωθεί το wordpress έχει μεταφραστεί και στα ελληνικά και οι επιλογές του καλύπτουν άριστα τις επιθυμίες σου!

    Πάντως hack μπράβο για την δουλειά και την ιδέα που δίνεις ώστε κάποιοι να αναπτύξουν τον blogger τους χωρίς αναζήτηση άλλου template!

    ΑπάντησηΔιαγραφή
  14. xaroylita
    στην περίπτωση που θες να αλλάξεις template είναι πανέυκολο και δεν χάνεις τίποτε απ'ότι έχεις σημειώσει. Η μαλακία είναι ότι θα πρέπει φτου κι απ'την αρχή να φτιάξεις τις κατηγορίες και τις ετικέτες ώστε να δείχνει σωστά κατανεμημένο το blog όπως το είχες και προηγούμενα. Πάντως αν κάτι σου αρέσει δεν υπάρχει λόγος να σκεφτείς αυτόν τον κόπο γιατί το αποτέλεσμα θα σε αποζημειώσει!

    Φιλιά!

    ΑπάντησηΔιαγραφή
  15. @xaroulita Που ακριβώς κόλλησες; Για ποια νούμερα μιλάς; Πες μου λιγάκι αναλυτικότερα για να σε βοηθήσω.
    @sadrina Με την αλλαγή template χάνεις όλα τα widgets. Σίγουρα το wordpress διαθέτει άλλη φολοσοφία αλλά από την πλευρά της google υπάρχει μια διάθεση για ανανέωση του blogspot. Είδωμεν! Φιλιά.

    ΑπάντησηΔιαγραφή
  16. Κάνεις δεξί κλικ στην εικόνα - αποθήκευση ως... - πας στον πανόπτη,διάταξη, προσθήκη gadget, ενοίγει ένα παράθυρο, πας εικόνα,POIA EIKONA THA TRELATO ME TO KOLIMA POU EXO FAEI ME TO BLOG

    ΑπάντησηΔιαγραφή
  17. @molemou Για τα βραβεία του ΑΑΤΟΝ λέμε.

    ΑπάντησηΔιαγραφή
  18. ΝΑ ΣΑΙ ΚΑΛΑ ΓΙΑ ΤΙΣ ΠΛΗΡΟΦΟΡΙΕΣ...ΚΑΙ ΕΓΩ ΔΕΝ ΕΙΜΑΙ ΚΑΝΕΝΑΣ ΕΞΠΕΡ ΑΛΛΑ ΘΑ ΤΟ ΔΟΚΙΜΑΣΩ, ΤΟ ΠΟΛΥ ΠΟΛΥ ΝΑ ΤΑ ΒΑΛΩ ΟΛΑ "ΦΩΤΙΑ"....

    ΑπάντησηΔιαγραφή
  19. @παλαλός Χαχαχαχαχα... Φωτιά και μπούρμπερη ε; Την καλημέρα μου.

    ΑπάντησηΔιαγραφή
  20. @molemou Κάτι λάθος κάνεις. Εκτός και αν προσπαθείς να βάλεις κατεστραμμένο αρχείο. Για τσεκάρισε το αρχείο σου αν είναι ok.

    ΑπάντησηΔιαγραφή
  21. αδερφέ έχω ένα πρόβλημα...
    στο τελευταίο στάδιο που πρέπει να μπει το
    #main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

    στο δικο μου έχει

    main-wrapper {
    width: 410px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    οποτε την επιλογη αυτη που πρεπει να βαλω δεν ξερω που πρεπει....εχεις καμια ιδεα?

    ευχαριστω ρε συ.

    ΑπάντησηΔιαγραφή
  22. @παλαλός Εκεί που λέει στον κώδικα σου $startSide; βάλε left; και μετά προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

    #main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

    ΑπάντησηΔιαγραφή
  23. ΜΟΥ ΧΑΛΑΕΙ ΤΗΝ ΔΕΞΙΑ ΜΠΑΡΑ ΕΤΣΙ......ΓΡΡΡΡΡΡ

    ΤΕΣ ΠΑΝΤΩΝ ΔΕΝ Γ@ΜΙΕΤΑΙ ΤΟ ΑΦΗΝΩ ΕΤΣΙ......

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

ΕΣΥ ΤΙ ΛΕΣ;