14 Ιουνίου 2010



5 Στατικές σελίδες, κρύψιμο της μπάρας

Έχω έναν φίλο, που είναι ζιζάνιο μεγάλο. Ο Γαυράκος.
Πρίν λίγες ημέρες, με ρωτούσε πώς γίνεται κάτι που είδε σε ένα blog. Στο τέλος, έψαξε και βρήκε ο ίδιος μια σχετική ανάρτηση, μα τα Αγγλικά του δεν τον βοηθούσαν τόσο.
Παρ' όλλα αυτά, τα κατάφερε περίφημα μόνος του.
Αυτό όμως που μου άρεσε πολύ και μου έκανε εντύπωση, είναι το ότι δεν κράτησε την επιτυχία του αυτή για τον εαυτό του, μα μου έστειλε απανωτά γράμματα, να το κάνω ανάρτηση.
Μου ζητούσε λοιπόν να την μεταφράσω σε απλά Ελληνικά μόλις βρώ χρόνο, και να κάνω μια ανάρτηση επ' αυτού, ώστε να μπορεί να βοηθηθεί και όποιος άλλος ενδιαφέρεται.
Άντε μετά να πείς όχι σε έναν τέτοιο άνθρωπο και φίλο.
Πήγα στην σελίδα που μου έστειλε, και μετάφρασα το σχετικό κείμενο, αλλά....
Θα σας παρακαλέσω πολύ,
ΠΑΡΑ ΠΟΛΥ!!
ΟΠΟΙΟΣ ΔΕΝ ΚΑΤΑΛΑΒΕΙ 150% ΤΗΝ ΑΝΑΡΤΗΣΗ
ΝΑ ΜΗΝ ΕΠΙΧΕΙΡΗΣΕΙ ΚΑΜΙΑ ΕΠΕΜΒΑΣΗ ΣΤΟ BLOG ΤΟΥ

Πάμε λοιπόν στο μεταφρασμένο κείμενο:

Τώρα πλέον, έχουμε την δυνατότητα οι Bloggers να φτιάχνουμε στατικές σελίδες και στα Blogger- blog μας, κάτι που γινόταν ως τώρα μόνο σε στατικές ιστοσελίδες, η σε άλλες πλατφόρμες, όπως του WordPress.
Μπορούμε μάλλιστα να τις κάνουμε να δείχνουν εντελώς ξεχωριστά απο τις υπόλοιπες σελίδες του Blog μας, αυτές δηλαδή με τις αναρτήσεις μας, έχοντας δική τους εντελώς όψη.

Βασικά, μπορούμε να επεξεργαστούμε και κάθε σελίδα κάποιας ανάρτησης επίσης. Το μόνο θετικό στην όλη υπόθεση με τις στατικές σελίδες είναι ότι, δεν αρχειοποιούνται, όπως οι αναρτήσεις, και δεν έχουν post footer, άρα δεν είναι ορατές απο τους επισκέπτες, μέχρι να τις εμφανίσουμε εμείς μέσω ενός Link, που θα οδηγεί σε αυτές.

Αλάζοντας το layout σε μια στατική σελίδα.

Κάποιες φορές θα θέλαμε ίσως να αποκρύψουμε κάποια στοιχεία απο το layout (όπως παράδειγμα την sidebar, ή το footer) μιας στατικής σελίδας.
Πιθανόν να υπάρχουν αρκετές μέθοδοι να το κάνει κάποιος, αλλά σε κάθε περίπτωση, θα πρέπει να το κάνει επεμβαίνοντας με κάποιο κώδικα μέσα απο το template HTML.
Ορίστε μερικοί τρόποι:

1. Επεξεργασία στατικών σελίδων αναλόγως τύπου.

Στην περίπτωση αυτή, όλες οι στατικές σελίδες θα έχουν το ίδιο layout αλλά που θα είναι διαφορετικό απο το layout των σελίδων που έχουν αναρτήσεις.
Στον παρακάτω κώδικα, η sidebar και το footer είναι κρυμένα. Εφ όσον λοιπόν δεν υπάρχει πλέον sidebar, πρέπει εμείς να πλατύνουμε κι άλλο το "main-wrapper", προσθέτοντάς του το κυρίως πλάτος (width) της sidebar, που πλέον δεν φαίνεται.
Το αποτέλεσμα του πειράματος, πιθανόν να λειτουργεί στον καθ' ένα σας κάπως διαφορετικά, ανάλογα πάντοτε με το ποιό template χρησιμοποιεί ο καθ' ένας, αλλά εδώ σας δίνω έναν κώδικα, με την πιο εύκολη μέθοδο που υπάρχει, ώστε να δουλέψει σε όλους σωστά:
- Πηγαίνετε στον "Πανόπτη" σας, κατόπιν "Διάταξη" (σε μερικά πλέον λέγεται 'Σχεδίαση') και κατόπιν "Επεξεργασία (Edit) HTML".
- Κάντε στο σημείο αυτό Back up το template σας, ΑΠΑΡΑΙΤΗΤΑ!!
- Βρείτε το κλειστό </head> tag στο template σας.
- Αμέσως πρίν απ' αυτό (πάνω) το tag επικολήστε τον κώδικα που ακολουθεί:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.sidebar,.footer {display:none;}
#main-wrapper{width: 95%; float: none; margin: 0 auto;}
</style>
</b:if>

Για να βεβαιωθείτε πως δεν δεν έχετε κάποιο σφάλμα στον κώδικά σας, είναι καλή ιδέα να πατήσετε πρώτα "Προεπισκόπηση", και εάν ανοίγει κανονικά δίχως "παρενέργειες" τότε να πατήσετε Αποθήκευση προτύπου. Στην προεπισκόπηση, δεν θα δείτε όμως την στατική σελίδα, μα την αρχική. Μόλις λοιπόν ανοίξει η προεπισκόπηση, πατήστε να ανοίξει η στατική σελίδα, και εκεί θα δείτε τις αλαγές, αν όντως λειτουργούν όπως θέλατε, πρίν πατήσετε "Αποθήκευση προτύπου".

2. Πώς αλάζουμε το layout για κάθε στατική σελίδα ξεχωριστά.

Στην περίπτωση αυτή, κάνουμε χρήση του "conditional tag" εντελώς ξεχωριστά για το url κάθε στατικής σελίδας, έτσι ώστε να είναι η κάθε μία ξεχωριστή οπτικά απο την άλλη.

Συμβουλές για αλλαγή του layout σε στατικές σελίδες.
1. Χρησιμοποιήστε κάθε φορά σε κάθε σελίδα ξεχωριστά, και ένα διαφορετικό background image ή χρώμα.
Στην περίπτωση αυτή, πρέπει να υπολογίσετε ακριβώς το πλάτος (width) του main-wrapper, αλλιώς θα έχετε κενά στις πλευρές, στα πλάγια της σελίδας.
Ο παρακάτω κώδικας είναι για το Minima template, με πλάτος: width=660px:


<b:if cond='data:blog.url == &quot;your static page url&quot;'>
<style>
.header,.sidebar,.footer {display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
</style>
</b:if>


- Αντικαταστήστε τον κώδικα με τα κόκκινα γράμματα (your static page url) με το url της σελίδας που θέλετε να αλάξετε την όψη του layout.
- Θα πρότεινα στο σημείο αυτό να χρησιμοποιήσετε "tileable background image" δηλαδή επαναλαμβανόμενο (στρώσεις), γιατί φορτώνει γρηγορώτερα και είναι πολύ πιο εύκολο να το τοποθετήσετε.
Μπορείτε να διαλέξετε απο την σελίδα αυτή όποιο background σας αρέσει, αλλά θα πρέπει να κάνετε upload το background image σε δικό σας image host.
Το Picasa είναι ένα image host που χρησιμοποιούν πολλοί, δοκιμάστε το. Μπορείτε φυσικά να χρησιμοποιήσετε ένα άλλο, οποιοδήποτε image host, αποθηκεύστε το url της εικόνας και αντικαταστήστε τον κώδικα με τα πράσινα γράμματα με το URL αυτό.
2. Αλάξτε στον τίτλο, το font size: Αντικαταστήστε τον αριθμό (μπλέ γράμματα) στον επόμενο κώδικα που ακολουθεί
3. Αλάξτε την σειρά εμφάνισης του νέου περιεχομένου, δίνοντας λίγη 'γέμιση' (padding).
Ορίστε ο έτοιμος κώδικας και με όλλες τις αλλαγές:


<b:if cond='data:blog.url == &quot;your static page url&quot;'>
<style>
.header,.sidebar,.footer {display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
.post {padding: 20px; }
.post h3 {font-size:160%;}
</style>
</b:if>


Να ξέρετε πως αυτός ο κώδικας, θα αλάξει το page layout μόνο. Κάθε άλλο περιεχόμενο που υπάρχει στις συνηθισμένες σελίδες αναρτήσεών σας, όπως, διαφημίσεις μέσα στην ανάρτηση, η το Linkwithin widget κ.λ.π. θα φαίνονται κανονικά!
Μπορείτε φυσικά με περισσότερη 'δουλειά' να κρύψετε και αυτά τα στοιχεία, μα που δεν θα ασχοληθούμε σήμερα με δαύτα.

Μπορείτε επίσης να αλάξετε το layout απο κάθε άλλη σελίδα ανάρτησης, χρησιμοποιώντας το: <b:if>, και όχι μόνο στατικές σελίδες.
Αντικαταστήστε για τον σκοπό αυτό τον κώδικα με τα κόκκινα γράμματα (your static page url) με το url της σελίδας που θέλετε να της αλάξετε το layout.
Μπορείτε δηλαδή να αλάξετε το Layout σε κάθε στατική σελίδα, ώστε να διαφέρει απο τις υπόλοιπες σελίδες με τις αναρτήσεις του Blog σας.
Γίνετε πιο δημιουργικοί, σπάστε την μονοτονία απο το blog σας, προσαρμόζοντας ανάλογα με την φαντασία σας τις σελίδες του.

"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"



Οι Σπόνσορες του Blog




Print this post



Related Posts :



5 σχόλια:

Gaurakos είπε... Best Blogger Tips

Τέλοιο!
Είναι εξευτελήστικά πανεύκολο. Χρειάστηκα ένα λεπτό για να το κάνω με μετάφραση απο το google (όσοι το χρησιμοποιείτε για μετάφραση ξέρετε)...Αλλά ήθελα τον Νίκο που μπορεί να κάνει μετάφραση ακριβείας και που είναι η αρμοδιότητα τους σε tips & trics Και φυσικά να το ελένξει αν όλα έχουν καλώς.
Συμβουλή δικιά μου. Κάντε το πρώτα στο δοκιμαστικό σας και δείτε αν πέτυχε.

Τα πλεονεκτήματα αυτού είναι τα εξής:
Μεγαλύτερο χώρο χωρίς να σας τρώει χώρο οι sidebars να ποστάρετε για την about me σελίδα σας.Για μία ενσωματωμένη φόρμα e-mail, για την δελίδα All my posts. H ότι άλλο σας κατέβει.

Νίκο ευχαριστώ! Ήθελα να δοκιμάσω και την αλλαγή background στις σελίδες αλλά δεν ήταν αρκετό να με βοηθήσει απο εκεί.


AATON είπε... Best Blogger Tips

Να σαι καλά Γαυράκο, σε ευχαριστώ που ήσουν ο "πρωτεργάτης" αυτής της ανάρτησης :)


maiaT είπε... Best Blogger Tips

You are right, it is not nice to steal other people's copyrighted work but you gave me a link to a translation page.
I'm glad that you've translated my tutorial so other people can use it too.
I just wanted to let you know that we don't use capital letters in codes, so this probably will not work.
Have a nice day!

-The autor of the original


AATON είπε... Best Blogger Tips

Dear MaiaT, I'm glad that you agree with the Credits to you as author of the original Post.
I gave the codes as I found them on your tutorial.
Thank you again, and greetings from Toronto to Rumania :)


maiaT είπε... Best Blogger Tips

Now the code is OK and the link too.
Greetings back from Romania.


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

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

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

Next Next Next