Θέλετε να έχει το 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;
Άφησε μου ένα σχόλιο και πες μου τι έγινε.
You are Here: Home > Blog με 3 στήλες - 3 column blog
Blog με 3 στήλες - 3 column blog
PrintPDF
Labels: blogger tips, templates
38 comments:
Δυστυχώς δεν με βγήκε.
ποιο προτυπο χρησιμοποιεις makedon?
έφτιαξα ένα νέο στο πρότυπο που γράφεις.
Δεν ξέρω σε τι πρότυπο είναι το
http://gataros.blogspot.com/
Πρέπει να σε ευχαριστήσω και πάλι για τα κόλπα που γράφεις, κάποια από αυτά τα έχω ήδη βάλει.
α αυτο το blog που μου γραφεις εχει αλλο προτυπο και για να το κανεις τριστηλο ειναι πολυ πιο δυσκολο
Παιδια ειστε φοβεροι πραγματικα! Η δουλεια που κανετε ειναι ιδαιτερα χρησιμη για ολους μας.
Πραγματικα συγχαρητηρια!
χαχα!
Δεν τα ξέρεις καλά.
Η wordpress έχει 8 διαφορετικά, έτοιμα θέματα με τρεις μπάρες κι άλλα 2 με τέσσερις.
δυσκολα τα πραγματα...
Πειρατικό Press σε ευχαριστουμε!
2mnka εχεις δικιο.πρεπει και ο blogger να το κανει αυτο για να μην παιδευοσαστε με μενα!
chris αν δεν εχεις και το minima template ειναι αρκετα δυσκολο.
επειδη βλεπω οτι δυσκολευοσαστε αρκετα θα κανω ενα update (οταν γυρισω απο τις διακοπες) και θα σας τα πω με εναν αλλον δευτερο τροπο μηπως το πετυχετε.αλλα για αυτους που δεν εχουν το minima template ειναι δυκολα...
Καλησπέρα Johnpotra. Εμένα μου βγήκε. Ευχαριστώ πολύ.
doulepse kanonikotata.
katatopistikotatos filtate!
euxaristw!
Καλησπέρα από Θεσσαλονίκη και συγχαρητήρια για το μπλογκ σου! Το τρίστηλο ήταν ανέκαθεν η επιθυμία μου, αλλά οι γνώσεις και ο δισταγμός μλου δεν με αφήνουν να το αποφασίσω εύκολα!! Ωστόσο, ίσως το δοκιμάσω σύντομα σε δεύτερο - δοκιμαστικό μπλογκ μου, γιατί φοβάμαι τις εκάστοτε αλλαγές και δεν ξέρω τι θα συμβεί και με τα widgets! Αλήθεια, όταν παίρνουμε backup, αφορά κι αυτά ή μόνο το κύριο κομμάτι του μπλογκ (αναρτήσεις+σχόλια); Μια μικρή παρατήρηση: οι φωτογραφίες σου στην ανάρτηση αυτή δεν εμφανίζονται (βγαίνει μήνυμα του photobucket) και θα ήταν πολύ χρήσιμες για να ελέγχουμε, αν κάνουμε σωστά τα βήματα. Να περνάς καλά και θα σε "ενοχλούμε" συχνά-πυκνά!! :)
@Γιαννη,
τις φωτο τις τακτοποιησα.
για το back up ειναι νομιζω για τις αναρτησεις και τα σχολια.
υπαρχει αλλος τροπος για τα gadgets που θα σας στο πω συντομα.
τα λεμε
Καλημέρα Johnpotra.Συγχαρητήρια για την εξαιρετική δουλειά σου.Πάντα ήθελα τρίστηλο στο Blog μου.Το υλοποίησα με την πολύτιμη βοήθεια σου.Ολα δούλεψαν τέλεια.Ευχαριστώ και σε άλλα τέτοια με υγεία.
Τελικά φίλε τα κατάφερα. Ήταν πιο εύκολο απ΄ ότι πίστευα. Νά ΄σαι καλά.
να σαι καλα φιλε
Προσπάθησα να το κάνω στην tic tac blue αλλα το βήμα 5 (sidebar) δεν γίνεται. Βγάζει αλλανταλων μετά! Ευτυχώς το προσπάθησα σε test blog!
Μάλλον θα αλλάξω σε minima template γιατι με ενδιαφέρει η 3η στήλη λόγω bet διαφημίσεων.
ευχαριστώ
http://hellas-bet.blogspot.com/
καλησπερα,
ειναι πολυ δυσκολο να βαλεις 3 στηλες με τις παραπανω οδηγιες ,αν δεν εχεις το minima template.
παντως μπραβο σου που το δοκιμασες πρωτα σε τεστ blog.εγω παντα ετσι κανω.βαλε στο τεστ blog σου το minima template και δοκιμασε το να δουμε αν θα σου πετυχει.
καλημέρα! χίλια ευχαριστώ! το έκανα ακριβώς όπως λες και έγινε όπως το ήθελα. Εχω δοκιμάσει πολλά έτοιμα templates που βρήκα σε διάφορα sites, όμως όλο και κάποιο πρόβλημα είχαν. Ολο και κάτι δεν δούλευε.
Είμαι ακόμα στην αρχή αλλά με βοήθησες πάρα πολύ!
και ξέχασα να συμπληρώσω ότι δεν χρειάστηκε να ξαναβάλω τα widgets. δεν χάθηκαν
καλημερα coffeemug
χαιρομαι που σου βγηκε.
οντως με αυτον τον τροπο δεν χανεις και τα gadgets παντως υπαρχει τροπος να αλλαξεις και template χωρις να χασεις τα gadgets σου (βλ. στο http://johnpatrablog.blogspot.com/2009/10/gadgets.html )
καλη συνεχεια
Το δοκίμασα στο minima και φυσικά βγήκε.Το πρόβλημα με το minima,είναι ότι μερικές εικόνες φαίνονται μισές γιατί δεν χωράνε,αλλά και ένας μετρητής που έχω βάλει για να δω τους επισκέπτες μου,φαίνεται επίσης μισός.Ίσως το δοκιμάσω σε άλλο template που οι εικόνες και ο μετρητής,φαίνονται κανονικά.Αλλά πάντως,μπορώ να πω,ότι δούλεψε κανονικά.Φυσικά,το πρόβλημα με τις εικόνες κλπ,δεν είναι δικό σας φταίξιμο,αλλά του προτύπου που δίνει το blogger.Και η παρουσίαση των tricks,hacks κλπ που κάνετε,είναι πολύ καλή και με βοηθάει.Πολύ καλή δουλειά!
Καλημέρα George,
Σε αλλο template (εκτός από το minima και τις παραλλαγες του) δεν νομίζω να σου βγει.
τις εικονες μπορεις να τις μικρυνεις
(αν δεν ξερεις πως κοιτα στο http://johnpatrablog.blogspot.com/2009/09/picture-html-code.html )
και τον μετρητη μπορεις να τον μετακινησεις απο την αριστερη στην δεξια στηλη.
θελω να σου πω δεν ειναι μεγαλα προβληματα αυτα.
σας ευχαριστουμε για τα καλα σας λογια.
καλη σου μερα
μπραβο πολυ καλες πληροφοριες το εκανα σωστα και μου βγηκε αν θες να το δεις μπες στο paokchampion.blogspot.com
Μπράβο φίλε !!! πολύ καλό. το δοκίμασα και είναι τέλειο. ρίξε μια ματιά αν θέλεις .. http://diktiakovima.blogspot.com/
niklaki και diktiake ειδα και των δυων σας τα blogs και χαρηκα που βοηθησα να τα φτιαξετε οπως τα θελετε
τέλειο! ευχαριστώ
Είσαι Θεός.Μόλις το έκανα και πέτυχε.Σε όποιον δε βγαίνει να επικοινωνήσει μαζί μου.Απλά εκεί που γράφεις να αλλάξουμε τον αριθμό 660 με 880, δεν είναι απαραίτητο να υπάρχει αυτός ο αριθμός (660) στον κωδικό μας.Οπότε δεν το πειράζουμε.Φίλε έχεις γίνει ο καλλήτερος μου φίλος.Θα πηδηχτώ απ το παράθυρο απ τη χαρά μου.!!!!
Είσαι Θεός.Μόλις το έκανα και πέτυχε.Σε όποιον δε βγαίνει να επικοινωνήσει μαζί μου.Απλά εκεί που γράφεις να αλλάξουμε τον αριθμό 660 με 880, δεν είναι απαραίτητο να υπάρχει αυτός ο αριθμός (660) στον κωδικό μας.Οπότε δεν το πειράζουμε.Φίλε έχεις γίνει ο καλλήτερος μου φίλος.Θα πηδηχτώ απ το παράθυρο απ τη χαρά μου.!!!!
χαχα και εγώ χαίρομαι που το έφτιαξες.
να σαι καλά
ναι αυτο ειναι οντως ενα προβλημα.κατι γραφω στην αναρτηση αλλα απο οτι βλεπω δεν το πετυχαινει κανενας.αγαπητη Ανθούλα καλύτερα αστο οπως το εχεις τωρα και να μην το χαλασεις
Done gia alli mia fora.... Theos eipame min ta 3analeme...!
skai se minima dark... :)!
distixos den mu vgike to 8elo poli..ego exo to Rounder 3
Mporume na kanume kati file?;/
Απλά σε ευχαριστώ
Έκανα κατά γράμμα ότι έδειξες αλλά τζίφος....παρ ότι χρησιμοποιώ minima template.Προφανώς κάτι πήγε στραβά ή δεν το σηκώνει ο "οργανισμός" του.
αφού έχεις 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?
εγω εχω το musicplus και δυστηχως δεν μου επιασε ειναι το ενα πανω στο αλλο....αλλα δεν εβρισκα και οτι ακριβως ελεγες...αλλα διαφορετικους κωδικες....
Δημοσίευση σχολίου
Παρακαλούμε τους φίλους αναγνώστες:
ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ
Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.