Εάν έχετε μετακινηθεί ποτέ σε μια ιστοσελίδα και ένα στοιχείο σε αυτήν δεν μετακινήθηκε, έχετε δει την ετικέτα θέσης CSS σε δράση. Tumblr bloggers που προσθέτουν αυτήν την ετικέτα στα πρότυπά τους μπορούν να δημιουργήσουν το ίδιο αποτέλεσμα στα ιστολόγιά τους. Ένα καλό μέρος για να το δοκιμάσετε βρίσκεται στην πλευρική γραμμή σας. Αφού προσθέσετε μια ετικέτα θέσης στον κώδικα HTML του ιστολογίου σας, η πλευρική γραμμή σας παραμένει σταθερή όταν οι χρήστες μετακινηθούν προς τα πάνω και προς τα κάτω στις σελίδες του ιστολογίου σας.
Επισκεφτείτε τον πίνακα ελέγχου Tumblr και, στη συνέχεια, κάντε κλικ στο εικονίδιο ρυθμίσεων και στο όνομα του ιστολογίου που θέλετε να ενημερώσετε. Εάν έχετε μόνο ένα ιστολόγιο, κάντε κλικ στο όνομά του.
Κάντε κλικ στην επιλογή "Προσαρμογή" και στη συνέχεια "Προσθήκη HTML". Το Tumblr ανοίγει το θέμα σας και εμφανίζει τον κώδικα HTML.
Κάντε κλικ οπουδήποτε μέσα στον κώδικα και πατήστε "Ctrl-A" ακολουθούμενο από το "Ctrl-C" για να αντιγράψετε τον κώδικα στο πρόχειρο των Windows. Ανοίξτε ένα νέο έγγραφο σημειωματάριου και επικολλήστε τον κώδικα στο έγγραφο. Αυτά τα βήματα διασφαλίζουν ότι έχετε ένα αντίγραφο ασφαλείας του αρχικού σας προτύπου.
Επιστρέψτε στον κώδικα HTML Tumblr και πατήστε "Ctrl-F" για να ανοίξετε ένα πλαίσιο αναζήτησης. Πληκτρολογήστε "sidebar" σε αυτό το πλαίσιο αναζήτησης και, στη συνέχεια, πατήστε "Enter". Ο Tumblr βρίσκει την πρώτη εμφάνιση του "sidebar" και εμφανίζει το τμήμα του κώδικα που περιέχει αυτήν τη λέξη. Ο κωδικός που βρίσκει πρέπει να μοιάζει με τον ακόλουθο:
wrapper #sidebar {color: {color: Background}; }
Η πρώτη γραμμή κώδικα περιέχει τις λέξεις #wrapper #sidebar. Ένα αριστερό βραχίονα ακολουθεί αυτές τις λέξεις.
Επικολλήστε τον ακόλουθο κώδικα ακριβώς κάτω από την πρώτη γραμμή κώδικα:
θέση: σταθερή δεξιά: 100 εικονοστοιχεία;
Το χαρακτηριστικό θέσης δίνει εντολή στα προγράμματα περιήγησης να διορθώσουν την πλευρική γραμμή έτσι ώστε να μην κινείται κατά την κύλιση. Το σωστό χαρακτηριστικό ενημερώνει τα προγράμματα περιήγησης πόσα εικονοστοιχεία θέλετε να τοποθετήσετε το δεξί άκρο της πλευρικής γραμμής από το δεξί περιθώριο της ιστοσελίδας. Σε αυτό το παράδειγμα, το σωστό χαρακτηριστικό έχει τιμή 100px.
Κάντε κλικ στην επιλογή "Ενημέρωση προεπισκόπησης" για να δείτε μια προεπισκόπηση των αλλαγών σας. Σύρετε τη γραμμή κύλισης του παραθύρου προς τα πάνω και προς τα κάτω και θα δείτε ότι η πλευρική γραμμή σας δεν κινείται. Κάντε κλικ στο "Αποθήκευση" για να αποθηκεύσετε τις αλλαγές σας.
Συμβουλές
Μπορεί να θέλετε να πειραματιστείτε με διαφορετικές τιμές για το σωστό χαρακτηριστικό, εάν θέλετε να προσαρμόσετε την οριζόντια θέση της πλευρικής γραμμής. Για παράδειγμα, εάν αλλάξετε την τιμή από 100 εικονοστοιχεία σε 50 εικονοστοιχεία, η πλευρική γραμμή κινείται πιο μακριά προς τα δεξιά κατά 50 εικονοστοιχεία.
Προειδοποιήσεις
Να είστε προσεκτικοί όταν εργάζεστε στον επεξεργαστή HTML, καθώς η τυχαία αλλαγή του υπάρχοντος κώδικα μπορεί να έχει δραματικά αποτελέσματα στη διάταξη της σελίδας σας. Εάν αλλάξετε τον κώδικα και δεν μπορείτε να καταλάβετε πώς να αναιρέσετε τις αλλαγές σας, μπορείτε πάντα να διαγράψετε τα πάντα στον επεξεργαστή HTML και να επικολλήσετε τον εφεδρικό κώδικα που αντιγράψατε στον επεξεργαστή για να τον επαναφέρετε στην αρχική του κατάσταση.
