09 Μαρτίου 2009



13 Αλλαγή σε νέο Template δίχως να χαθούν τα widgets (Updated)

Πολλοί διαβάζοντας την 1η ανάρτηση για το θέμα αυτό, δεν κατάλαβαν παρ' όλα αυτά πώς ακριβώς γίνεται, με συνέπεια να μην τολμάνε να αλλάξουν Template, απο φόβο μην χάσουν τα Widget που ήδη έχουν, μένοντας έτσι κολλημένοι και φυλακισμένοι σε Standard πρότυπα που προσφέρει η Blogger. Είναι ένα πρόβλημα που, άλλους τους κάνει να διστάζουν να κάνουν κάποια αλλαγή στο Template τους, και άλλους τους παίρνει ώρες μέχρι να ξαναστήσουν στο Blog τους απο την αρχή τα Widgets, όπως ήταν και πρίν. Για τον λόγο αυτό, αποφάσισα να ξανακάνω νέα ανάρτηση, με βήματα πολύ πιο απλά αυτή τη φορά, πιο κατανοητά, "απο το χεράκι" που λέμε και στην Ελλάδα, με σκοπό να βοηθηθεί ο καθένας σας, εάν κάποια στιγμή επιλέξει να αλάξει Template(πρότυπο). Υπάρχει τρόπος να αλάξουμε Template δίχως να χάσουμε τα παλιά μας Widgets ? Ναί! και είναι επαναλαμβάνω εύκολο. Πώς θα το κάνουμε λοιπόν; Ελάτε να σας δείξω. 1. Κάντε Save το παλιό σας template πρώτα Είναι "πολύ σημαντικό". Κάντε Save πρώτα το παλιό Template (Πανόπτης->Διάταξη->ΕπεξεργασίαHTML->Λήψη πλήρους προτύπου) για την περίπτωση που κάτι κάνατε λάθος (και θα είστε όντως για πνίξιμο :p) ώστε να ξαναγυρίσετε και πάλι στο παλιό σας δίχως πρόβλημα. 2. Κάντε χρήση ενός "text editor" Μην αντιγράψετε κανέναν κώδικα στου Blogger τον Editor, γιατί είναι πολύ εύκολο να κάνετε κάτι λάθος. Ανοίξτε ένα text editor για να αντιγράψετε οποιονδήποτε κώδικα και που έχετε όλοι στο computer σας. Εάν δεν έχετε ιδέα ποιό να χρησιμοποιήσετε, διαλέξτε απλά το Notepad++. Κάντε (αν δεν το έχετε παρ' όλα αυτά) Download το τελευταίο Notepad++ Installer.exe file. Είναι δωρεάν (free) και θα σας διευκολύνει πολύ στο παραπέρα coding σας. 3. Ανοίξτε το παλιό και το νέο (που βρήκατε) template XML files στον text editor Ανοίξτε τα σε δύο ξεχωριστά παράθυρα στον editor, γιατί θα χρειαστείτε να αντιγράψετε κάποιους κώδικες απο το παλιό σας, και να τους επικολλήσετε στο νέο σας Template. Αυτά τα codes που θα κάνετε copy απο το παλιό και paste στο νέο, είναι βασικά τα codes των widgets. Δεν χρειάζετε να καταλαβαίνετε τι συμβαίνει μέσα στα codes. Το μόνο που χρειάζεται να ξέρετε είναι το, πού βρίσκεται, και για ποιό πράγμα είναι το κάθε widget. 4. Βρειτε πού είναι κρυμένα τα widget codes Κοιτάξτε στην παρακάτω εικόνα. Βλέπετε τα <body> tag? Πατήστε στην εικόνα να την δείτε μεγαλύτερη. Όλοι οι Κώδικες επάνω απο αυτό το tag είναι οι περισσότεροι CSS, δηλαδή, το είδος του κώδικα που κοντρολάρει την εμφάνιση (colors, fonts) ενός Blog. δεν χρειάζεται να κάνετε copy/paste απολύτως τίποτε σε αυτόν τον τομέα. Σας τα δείχνω απλά να μαθαίνετε κάτι περισσότερο, απο όσα ήδη γνωρίζετε. Τα codes (κώδικες) κάτω απο το <body> tag είναι τα κύρια XML codes του blog σας. Βασικά, είναι το κομάτι κώδικα, που κοντρολάρει το layout (το που είναι τα sidebars, τα widgets, και τα headers) κοντρολάροντας επίσης την ροή δεδομένων απο την Blogger στο δικό σας blog. Εδώ είναι λοιπόν το μέρος που πάντα αποθηκεύονται (save) όλα τα codes για όλα σας τα widgets. Όλα σας λοιπόν τα widgets είναι coded ανάμεσα στα δύο αυτά tag, το <b:widget> και το </b:widget>. Όλα τα <b:widget> tags λοιπόν, πρέπει να είναι πάντοτε, ανάμεσα στο <b:section> και το </b:section> tag. Η δομή τους (structure) μοιάζει κάπως έτσι, όπως στο παρακάτω παράδειγμα, δείτε: Το παραπάνω είναι απλά και μόνο, ένα δείγμα, για το πώς μοιάζει ένας κώδικας ενός widget σε ένα template XML file. Το κεντρικό σημείο των widget είναι αναγνωρίσιμο απο τα div id label. Στην περίπτωση αυτή, div id=sidebar-wrapper. Κάτω απο το div id βρίσκεται το b:section tag. Δώστε το σημασία. Όλα τα widgets πρέπει να είναι τοποθετημένα, ανάμεσα σε αυτό το b:section tag. Δεν χρειάζεται να ανησυχείτε, εάν δεν καταλαβαίνετε πολλά απο div ή b:section και σας φαίνονται Κινέζικα. Το σπουδαιότερο tag που χρειάζεται να γνωρίζετε απλά, είναι το b:widget tag. Σημειώστε πως, μπορείτε να βάλετε όσα widgets θέλετε ανάμεσα στα b:section tags. Σας παραθέτω ένα παράδειγμα ενός widget tag, που είναι ενσωματωμένο (embedded) μέσα στο b:section tag. Το εν λόγω σημείο είναι ένα sidebar-wrapper, που σημαίνει πως το widget είναι τοποθετημένο μέσα σε ένα απο τα sidebars του blog. Το widget είναι ένα image widget, όπως μπορείτε και σείς να δείτε απο την ταμπέλα του που γράφει id='Image1'. Το σπουδαιότερο απ' όλα, είναι να θυμάστε πάντοτε πως το widget code ξεκινάει πάντοτε με το >b:widget> tag, και το ότι πάντα κλείνει με το >/b:widget> tag. Αυτό είναι το σημαντικότερο πράγμα που πρέπει να γνωρίζετε για αργότερα που θα κάνετε copy/paste. Να θυμάστε επίσης, πως το widget είναι τοποθετημένο μετά το >b:section> tag και ότι κλείνει με το >/b:section> tag. Εδώ είναι ακόμη ένα παράδειγμα. Το widget αυτό τώρα είναι ένα Linklist widget. Δεν χρειάζεται να ξέρετε τον κώδικα μέσα στο widget tag γιατί εκεί δεν πρόκειται να κάνετε καμία απολύτως αλλαγή: 5. Ήρθε η ώρα να κάνουμε copy/paste τα widgets στο νέο template file Βρείτε όλα τα widgets που θέλετε να κρατήσετε στο blog σας μετά την εγκατάσταση του νέου σας template. Βρείτε τους κώδικές τους, κάτι που μετά απο όσα σας έδειξα, ελπίζω να κατανοήσατε και να σας είναι πια πανεύκολο να βρείτε, απο το παλιό σας template file. Θυμηθείτε, είναι τα codes ανάμεσα στα tags και πρέπει να είναι σωστά κλεισμένα. Κάντε Copy τα codes για ένα widget που θέλετε λοιπόν να κρατήσετε, και κάντε τα επικόλληση (paste) στο νέο template file, ανάμεσα πάλι στα tags και στο σημείο που εσείς επιλλέξατε. Σιγουρευτείτε ξανά πως το b:widget και το b:section tags είναι κλειστά σωστά. Εάν δεν ξέρετε την div id τοποθεσία (location) που να τα κάνετε paste, επικολλήστε τα απλά σε ένα οποιοδήποτε div id, απλά να είναι μέσα σε ένα b:section tag. Κατόπιν θα εμφανιστεί σαν widget στο Layout > Page Elements page (όπως στην παρακάτω εικόνα) όπου κατόπιν με drag and drop μπορείτε να μετακινήσετε τα widgets σε όποιο σημείο εσείς θέλετε. 6. Κάντε Upload το νέο template σαν το νέο σας blog layout Όταν τελειώσετε με την επικόλληση των παλιών widgets σας στο νέο σας template, κάντε upload το νέο template στο blog σας χρησιμοποιώντας το upload button όπως φαίνεται κάτω. 7. Εάν διστάζετε, δοκιμάστε αυτήν την τεχνική σε ένα test blog πρώτα Εάν δεν είστε σίγουροι και φοβάστε, δοκιμάστε πρώτα τα παραπάνω σε ένα test blog. Δημιουργήστε ένα test blog με κάνα δυό χαζο- posts μέσα (π.χ. lorem ipsum), φτιάξτε μερικά widgets, και μετά δοκιμάστε να αλλάξετε template χρησιμοποιώντας τα παραπάνω βήματα. Δείτε έτσι αν καταφέρετε να το κάνετε να δουλέψει η πάλι κολλάτε. ------------------------------------ Εύκολο ε; Στοιχηματίζω πως, όλοι αυτοί οι συνάδελφοιbloggers που συνεχίζουν να χρησιμοποιούν τα βασικά πρότυπα (basic Blogger templates) το κάνουν γιατί έχουν συγχιστεί αφάνταστα με το να χάνουν κάθε φορά όλα τους τα widgets μόλις εγκαταστήσουν νέα templates. Τώρα πια, δεν έχετε την ανάγκη να κολήσετε στα basic, γνωρίζοντας αυτό το Τρύκ που σας έδειξα, σύν το ότι επιτέλους κάποιοι, μπορείτε να αποκτήσετε το template που πάντοτε θέλατε. Ελπίζω αυτό το "hack" να σας φανεί αρκετά χρήσιμο, σε όλους εσάς που σκέφτεστε να κάνετε κάποιες αλλαγές στο Blog σας μελλοντικά. Πείτε μου τις εντυπώσεις σας, σχολιάζοντας αυτή την ανάρτηση. Εάν κάποιος παρ' όλα αυτά συναντήσει δυσκολίες, παρακαλώ, να το αναφέρει. Νίκος (ΑΑΤΟΝ)




Print this post



Related Posts :



13 σχόλια:

117 είπε... Best Blogger Tips

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


Frikolakas είπε... Best Blogger Tips

Αυτός είσαι! Τώρα που το βρήκα το blog δε το αφήνω.

Είχε τύχει δύο φορές με το παλιό μου blog να τα χάσω όλα λόγο αλλαγής template. Δε θα ξαναγίνει :D


Γιάννης Παππάς είπε... Best Blogger Tips

πολύ χρήσιμο Νίκο
την έχω πατήσει μια φορά
μην τη ξαναπατήσω
σιγά σιγά μαθαίνω..


Μιχάλης είπε... Best Blogger Tips

Δεν μου δουλεύει τίποτε. Ήδη από την πρώτη αποθήκευση του κώδικα HTML, το "έγγραφο" που αποθηκεύεται στην επιφάνεια εργασίας δεν ανοίγει και η μηχανή λέει ότι υπάρχει λάθος. Έτσι δεν γίνεται να το αντιγράψω στο Word pad.
ΑΜ ΚΑΛΑ ΕΚΑΝΑ εγώ και σου ευχήθηκα Πάσχα με λιακάδα...


ΚΩΔΩΝΑΚΗΣ Γ. είπε... Best Blogger Tips

Μου φάνηκε καλό. Θα το δοκιμάσω και θα σου πω. Ταλαιπωρούμαι εδώ και καιρό. Ιδωμεν...


scarface είπε... Best Blogger Tips

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


AATON είπε... Best Blogger Tips

*** ΚΩΔΩΝΑΚΗΣ Γ., ότι χρειαστείς, εδώ θα 'μαι, μην διστάσεις να μου γράψεις. Θα χαρώ αν βοηθήσω σε οτιδήποτε.

*** scarface, εγώ ευχαριστώ


technandnews4all είπε... Best Blogger Tips

χίλια ευχαριστώ για την προηγούμενη συμβουλή και θα ήθελα να ζητήσω ακόμα 1 χάρη.πως θα αλλάξω το backround του blog μου και πως θα μεγαλώσω τον χώρο των αναρτήσεων έτσι ώστε να χςράνε όλα και να μην κόβονται??σε ευχαριστώ εκ των προτέρων...


technandnews4all είπε... Best Blogger Tips

telika katafera kai brika auto me to backround den mporo na bro omos auto pou megalonei tn xoro tou blog...please boitheia!!an den ipirxan ta tips p dineis tha imoun se poli diskoli thesi...akoma 1 fora thanks!!!


AATON είπε... Best Blogger Tips

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


technandnews4all είπε... Best Blogger Tips

http://techandnews4all.blogspot.com/
des se parakalo to site m kai paratirise oti einai polli strimogmenes oi dimosieuseis..an ginetai pes m kapoio kolpo etsi wste na mporo na megaloso olo to ipsos kai platos tis selidas etsi oste na xorane ola aneta!!!


AATON είπε... Best Blogger Tips

Δεν είναι θέμα κόλπου φίλε μου αλά ρυθμίσεων.

1. Το Πρότυπό σου (Layout) έχει πλάτος (αυτού που κάνεις χρήση) συνολικά 700px
2. Η μικρή μπάρα στα δεξιά, έχει πλάτος 264px
3. Η μεγάλη μπάρα με τα κείμενα (αναρτήσεις) έχει πλάτος 404px

Το όλο πλάτος είναι 1052px (δλδ το 100%)

Αυτό που εσύ μπορείς να προσπαθίσεις, είναι να μεγαλώσεις το πλάτος της αριστερής μπάρας παράδειγμα κάνοντάς το 504px, και να αφαιρέσεις το ίδιο αριθμό (-100px) απο την δεξιά που θα γίνει πιο στενή, δηλαδή θα την κάνεις 164px.

Πρίν κάνεις όλα αυτά όμως, θα σε παρακαλέσω πολύ, ΚΑΝΕ BACKUP ΤΟ ΤΩΡΙΝΟ ΣΟΥ ΠΡΟΤΥΠΟ, ή αν δεν βασίζεσαι, κάνε με διαχειριστή. Αν δεν ξέρεις πώς να με κάνεις, πάτα στην οριζόντια μπάρα επάνω ψηλά με τα Link μου, και πήγαινε στην σελίδα F.A.Q. και δες πώς μπορείς να κάνεις κάποιον διαχειριστή στο blog σου.


technandnews4all είπε... Best Blogger Tips

ΤΟ ΕΦΤΙΑΞΑ BRAVO ΔΟΥΛΕΥΕΙ ΤΕΛΕΙΑ.. !!!!!! ΤΗΑΝΚΣ!!!!!


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

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

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

Next Next Next