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

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


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Θέλετε να έχει το 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)Πάτα αποθήκευση και πήγαινε τώρα στα "Στοιχεία σελίδας".Θα δεις την παρακάτω εικόνα(αν δεν έχεις κάνει λάθος μέχρι τώρα):

Photobucket

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

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

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

Photobucket

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

Photobucket



Για να μην εμφανίζονται τα 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;

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

Stumble
Delicious
Technorati
Twitter
Facebook

38 comments:

SKANDALOS είπε...

Δυστυχώς δεν με βγήκε.

bloggertips.gr είπε...

ποιο προτυπο χρησιμοποιεις makedon?

SKANDALOS είπε...

έφτιαξα ένα νέο στο πρότυπο που γράφεις.
Δεν ξέρω σε τι πρότυπο είναι το
http://gataros.blogspot.com/

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

bloggertips.gr είπε...

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

Πειρατικό Press είπε...

Παιδια ειστε φοβεροι πραγματικα! Η δουλεια που κανετε ειναι ιδαιτερα χρησιμη για ολους μας.
Πραγματικα συγχαρητηρια!

Ανώνυμος είπε...

χαχα!
Δεν τα ξέρεις καλά.
Η wordpress έχει 8 διαφορετικά, έτοιμα θέματα με τρεις μπάρες κι άλλα 2 με τέσσερις.

Ανώνυμος είπε...

δυσκολα τα πραγματα...

bloggertips.gr είπε...

Πειρατικό Press σε ευχαριστουμε!


2mnka εχεις δικιο.πρεπει και ο blogger να το κανει αυτο για να μην παιδευοσαστε με μενα!

chris αν δεν εχεις και το minima template ειναι αρκετα δυσκολο.


επειδη βλεπω οτι δυσκολευοσαστε αρκετα θα κανω ενα update (οταν γυρισω απο τις διακοπες) και θα σας τα πω με εναν αλλον δευτερο τροπο μηπως το πετυχετε.αλλα για αυτους που δεν εχουν το minima template ειναι δυκολα...

stratos o ψήστης είπε...

Καλησπέρα Johnpotra. Εμένα μου βγήκε. Ευχαριστώ πολύ.

dimitris k είπε...

doulepse kanonikotata.
katatopistikotatos filtate!
euxaristw!

Jparalias ή απλά...Γιάννης είπε...

Καλησπέρα από Θεσσαλονίκη και συγχαρητήρια για το μπλογκ σου! Το τρίστηλο ήταν ανέκαθεν η επιθυμία μου, αλλά οι γνώσεις και ο δισταγμός μλου δεν με αφήνουν να το αποφασίσω εύκολα!! Ωστόσο, ίσως το δοκιμάσω σύντομα σε δεύτερο - δοκιμαστικό μπλογκ μου, γιατί φοβάμαι τις εκάστοτε αλλαγές και δεν ξέρω τι θα συμβεί και με τα widgets! Αλήθεια, όταν παίρνουμε backup, αφορά κι αυτά ή μόνο το κύριο κομμάτι του μπλογκ (αναρτήσεις+σχόλια); Μια μικρή παρατήρηση: οι φωτογραφίες σου στην ανάρτηση αυτή δεν εμφανίζονται (βγαίνει μήνυμα του photobucket) και θα ήταν πολύ χρήσιμες για να ελέγχουμε, αν κάνουμε σωστά τα βήματα. Να περνάς καλά και θα σε "ενοχλούμε" συχνά-πυκνά!! :)

bloggertips.gr είπε...

@Γιαννη,

τις φωτο τις τακτοποιησα.

για το back up ειναι νομιζω για τις αναρτησεις και τα σχολια.

υπαρχει αλλος τροπος για τα gadgets που θα σας στο πω συντομα.

τα λεμε

ΝΟΜΙΚΟΣ-LAWYER είπε...

Καλημέρα Johnpotra.Συγχαρητήρια για την εξαιρετική δουλειά σου.Πάντα ήθελα τρίστηλο στο Blog μου.Το υλοποίησα με την πολύτιμη βοήθεια σου.Ολα δούλεψαν τέλεια.Ευχαριστώ και σε άλλα τέτοια με υγεία.

ekabitis είπε...

Τελικά φίλε τα κατάφερα. Ήταν πιο εύκολο απ΄ ότι πίστευα. Νά ΄σαι καλά.

bloggertips.gr είπε...

να σαι καλα φιλε

DAKIS είπε...

Προσπάθησα να το κάνω στην tic tac blue αλλα το βήμα 5 (sidebar) δεν γίνεται. Βγάζει αλλανταλων μετά! Ευτυχώς το προσπάθησα σε test blog!
Μάλλον θα αλλάξω σε minima template γιατι με ενδιαφέρει η 3η στήλη λόγω bet διαφημίσεων.
ευχαριστώ
http://hellas-bet.blogspot.com/

bloggertips.gr είπε...

καλησπερα,

ειναι πολυ δυσκολο να βαλεις 3 στηλες με τις παραπανω οδηγιες ,αν δεν εχεις το minima template.
παντως μπραβο σου που το δοκιμασες πρωτα σε τεστ blog.εγω παντα ετσι κανω.βαλε στο τεστ blog σου το minima template και δοκιμασε το να δουμε αν θα σου πετυχει.

Coffeemug είπε...

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

Coffeemug είπε...

και ξέχασα να συμπληρώσω ότι δεν χρειάστηκε να ξαναβάλω τα widgets. δεν χάθηκαν

bloggertips.gr είπε...

καλημερα coffeemug

χαιρομαι που σου βγηκε.
οντως με αυτον τον τροπο δεν χανεις και τα gadgets παντως υπαρχει τροπος να αλλαξεις και template χωρις να χασεις τα gadgets σου (βλ. στο http://johnpatrablog.blogspot.com/2009/10/gadgets.html )

καλη συνεχεια

George είπε...

Το δοκίμασα στο minima και φυσικά βγήκε.Το πρόβλημα με το minima,είναι ότι μερικές εικόνες φαίνονται μισές γιατί δεν χωράνε,αλλά και ένας μετρητής που έχω βάλει για να δω τους επισκέπτες μου,φαίνεται επίσης μισός.Ίσως το δοκιμάσω σε άλλο template που οι εικόνες και ο μετρητής,φαίνονται κανονικά.Αλλά πάντως,μπορώ να πω,ότι δούλεψε κανονικά.Φυσικά,το πρόβλημα με τις εικόνες κλπ,δεν είναι δικό σας φταίξιμο,αλλά του προτύπου που δίνει το blogger.Και η παρουσίαση των tricks,hacks κλπ που κάνετε,είναι πολύ καλή και με βοηθάει.Πολύ καλή δουλειά!

bloggertips.gr είπε...

Καλημέρα George,

Σε αλλο template (εκτός από το minima και τις παραλλαγες του) δεν νομίζω να σου βγει.

τις εικονες μπορεις να τις μικρυνεις
(αν δεν ξερεις πως κοιτα στο http://johnpatrablog.blogspot.com/2009/09/picture-html-code.html )
και τον μετρητη μπορεις να τον μετακινησεις απο την αριστερη στην δεξια στηλη.
θελω να σου πω δεν ειναι μεγαλα προβληματα αυτα.

σας ευχαριστουμε για τα καλα σας λογια.
καλη σου μερα

niklakis είπε...

μπραβο πολυ καλες πληροφοριες το εκανα σωστα και μου βγηκε αν θες να το δεις μπες στο paokchampion.blogspot.com

Δρομολόγια Θάσου είπε...

Μπράβο φίλε !!! πολύ καλό. το δοκίμασα και είναι τέλειο. ρίξε μια ματιά αν θέλεις .. http://diktiakovima.blogspot.com/

bloggertips.gr είπε...

niklaki και diktiake ειδα και των δυων σας τα blogs και χαρηκα που βοηθησα να τα φτιαξετε οπως τα θελετε

Evelyn είπε...

τέλειο! ευχαριστώ

skeptomenos είπε...

Είσαι Θεός.Μόλις το έκανα και πέτυχε.Σε όποιον δε βγαίνει να επικοινωνήσει μαζί μου.Απλά εκεί που γράφεις να αλλάξουμε τον αριθμό 660 με 880, δεν είναι απαραίτητο να υπάρχει αυτός ο αριθμός (660) στον κωδικό μας.Οπότε δεν το πειράζουμε.Φίλε έχεις γίνει ο καλλήτερος μου φίλος.Θα πηδηχτώ απ το παράθυρο απ τη χαρά μου.!!!!

skeptomenos είπε...

Είσαι Θεός.Μόλις το έκανα και πέτυχε.Σε όποιον δε βγαίνει να επικοινωνήσει μαζί μου.Απλά εκεί που γράφεις να αλλάξουμε τον αριθμό 660 με 880, δεν είναι απαραίτητο να υπάρχει αυτός ο αριθμός (660) στον κωδικό μας.Οπότε δεν το πειράζουμε.Φίλε έχεις γίνει ο καλλήτερος μου φίλος.Θα πηδηχτώ απ το παράθυρο απ τη χαρά μου.!!!!

bloggertips.gr είπε...

χαχα και εγώ χαίρομαι που το έφτιαξες.

να σαι καλά

bloggertips.gr είπε...

ναι αυτο ειναι οντως ενα προβλημα.κατι γραφω στην αναρτηση αλλα απο οτι βλεπω δεν το πετυχαινει κανενας.αγαπητη Ανθούλα καλύτερα αστο οπως το εχεις τωρα και να μην το χαλασεις

Euzonas είπε...

Done gia alli mia fora.... Theos eipame min ta 3analeme...!
skai se minima dark... :)!

fygasg1 είπε...

distixos den mu vgike to 8elo poli..ego exo to Rounder 3

Mporume na kanume kati file?;/

OUPS είπε...

Απλά σε ευχαριστώ

fani είπε...

Έκανα κατά γράμμα ότι έδειξες αλλά τζίφος....παρ ότι χρησιμοποιώ minima template.Προφανώς κάτι πήγε στραβά ή δεν το σηκώνει ο "οργανισμός" του.

bloggertips.gr είπε...

αφού έχεις minima template κάτι έκανες λάθος, αλλά μη σκας.υπάρχει το http://johnpatrablog.blogspot.com/2010/03/logger-in-draft.html

Ανώνυμος είπε...

ΣΕ ΕΥΧΑΡΙΣΤΩ παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά παρά ΠΟΛΥ!

Ανώνυμος είπε...

kalispera 8elw na valw 3 stiles se auto to blog http://www.radioboogie.net/ borw?

Stavros D. Zannikos είπε...

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

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

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

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