Blog με 3 στήλες - 3 column blog

Θέλετε να έχει το blog σας τρεις στήλες ,όπως το δικό μου?Δηλαδή να μπορείτε να βάζετε gadgets και δεξιά και αριστερά ,και στη μέση να είναι οι αναρτήσεις σας.Αυτό μπορείτε να το κάνετε μόνο αν το blog σας είναι στην πλατφόρμα του blogspot.com και όχι σε άλλες πλατφόρμες ,π.χ. σε wordpress.Αν λοιπόν, θέλετε να το κάνετε αυτό το hack ,δείτε παρακάτω!

Σε άλλες αναρτήσεις μου δεν σας λέω πάντα να κάνετε ένα back up(λήψη πλήρους προτύπου) το πρότυπό σας ,είτε επειδή το ξεχνάω είτε επειδή δεν το θεωρώ αναγκαίο.
Αλλά τώρα το να κάνετε ένα back up (λήψη πλήρους προτύπου) είναι το λιγότερο που πρέπει να κάνετε.
Εγώ σας προτείνω να φτιάξετε και ένα άλλο πειραματικό blog (test blog) στο οποίο θα δοκιμάστε τους παρακάτω κώδικες και αν σας πετύχει μετά δοκιμάστε το στο <<καλό>> σας blog.
Επίσης σας λέω ότι δεν εγγυώμαι την επιτυχία σε όλα τα πρότυπα.Στο minima template πάντως είναι σίγουρο ότι θα σας βγει.Καλό είναι πάντως να δοκιμάσετε ,όποιο πρότυπο κι αν έχετε, και αφήστε μου ένα σχόλιο μετά και πείτε μου πιο πρότυπο έχετε και αν το πετύχατε.Για αυτούς που έχουν άλλο πρότυπο από το minima και δεν τους βγαίνει πρέπει να πειραματιστούν με τις τιμές των Outer-Wrapper,
Header-Wrapper,width,padding και margin.
Λοιπόν αφού σας είπα τα παραπάνω πάμε τώρα να σας δείξω πως γίνεται.

Ακολουθήστε τα παρακάτω βήματα:



1)Σύνδεση στον λογαριασμό σας από τον blogger.com

2)Διάταξη

3)Επεξεργασία html
(ΕΔΩ ΚΑΝΕΤΕ ΚΑΙ ΤΟ BACK UP ΤΟΥ ΠΡΟΤΥΠΟΥ ΣΑΣ)

4)Πατήστε ταυτόχρονα ctrl + F στο πληκτρολόγιό σας για να ανοίξει κάτω χαμηλά το παραθυράκι όπου αναζητούμε τους κώδικές μας

5)Μέσα στο παραθυράκι γράψτε το sidebar-wrapper

Λογικά θα σας βρει πάνω από ένα αποτέλεσμα για αυτό κοιτάξτε να μοιάζει έτσι(νομίζω ότι είναι το πρώτο αποτέλεσμα αυτό που θέλουμε):

#sidebar-wrapper { width: 220px; 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 */ }

Διαγράφετε το παραπάνω κομμάτι κώδικα και στη θέση του βάζετε το παρακάτω κομμάτι κώδικα.

#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 */
}
#left-sidebar-wrapper {
width: 220px;
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 */
}

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

6)Τώρα βρείτε το <div id='main-wrapper'>

Μόλις το βρείτε βάλτε τον παρακάτω κώδικα πριν από αυτό

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

7)Ψάξε τώρα να βρεις τον παρακάτω κώδικα

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

Εκεί που λέει 660px ,το σβήνουμε και γράφουμε 880px

8)Βρες τώρα τον παρακάτω κώδικα και κάνε το ίδιο ,δηλαδή γράψε 880px αντί για 660 px

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

9)Πάτα αποθήκευση και πήγαινε τώρα στα "Στοιχεία σελίδας".Θα δεις την παρακάτω εικόνα(αν δεν έχεις κάνει λάθος μέχρι τώρα):



Αν είναι λοιπόν όλα σωστά πάμε παρακάτω.

10)Τώρα υπάρχει η τρίτη στήλη αλλά δεν θα μπορείτε να τη δείτε στο blog σας αν δεν βάλετε κάποιο gadget.
Αλλά ακόμα δεν έχουμε τελείωσει.

Αν βάλετε κάποιο gadget τώρα στην νέα σας στήλη θα εμφανιστεί στο blog σας κάπως έτσι:



Κανονικά θα έπρεπε να εμφανίζεται κάπως έτσι:





Για να μην εμφανίζονται τα gadgets σας όπως στην πρώτη φώτο πρέπει να ρυθμίσουμε το πρότυπό μας ώστε τα στοιχεία θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στις αναρτήσεις μας.
Για να το κάνουμε αυτό πάμε ξανά στην Διάταξη>Επεξεργασία 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 */ }

11)Αποθηκευση του προτύπου σας τώρα κι απολάυστε την νέα σας στήλη!



Όπως σας είπα στην αρχή μπορεί να μην σας βγει το επιθυμητό αποτέλεσμα αν δεν έχετε το πρότυπο Minima.Η παραπάνω μέθοδος είναι η ίδια και ισχύει για όλα τα templates.Αλλά επειδή το minima template είναι το πιο απλό είναι και το πιο εύκολο.Τα άλλα πρότυπα είναι πιο σύνθετα για αυτό για να τα κάνετε τρίστηλα θα πρέπει να πειραματιστείτε με τις τιμές των Outer-Wrapper,
Header-Wrapper,width,padding και margin.


Επίσης μπορείς να βάλεις την νέα σου στήλη στα δεξιά του blog σου.Δηλαδή να έχεις τις αναρτήσεις σου στα αριστερά και 2 στήλες στα δεξιά.Για να το κάνεις αυτό απλά πρέπει σε όλα τα βήματα παραπάνω όπου λέει float: left; να βάζεις float: right;

Άφησε μου ένα σχόλιο και πες μου τι έγινε.