Πώς να δημιουργήσετε μια Σταθερή Πλευρική Γραμμή στο Tumblr

Αν έχετε μετακινηθεί προς τα κάτω μια ιστοσελίδα και ένα στοιχείο σε αυτό δεν έχει μετακινηθεί, έχετε παρακολουθήσει την ετικέτα θέσης CSS σε δράση. Οι bloggers Tumblr που προσθέτουν αυτήν την ετικέτα στα πρότυπα τους μπορούν να δημιουργήσουν το ίδιο αποτέλεσμα στα blogs τους. Ένα καλό μέρος για να το δοκιμάσετε είναι στην πλαϊνή σας μπάρα. Αφού προσθέσετε μια ετικέτα θέσης στον κώδικα HTML του blog σας, η πλαϊνή σας μπάρα παραμένει σταθερή όταν οι άνθρωποι μετακινηθούν προς τα επάνω και προς τα κάτω στις σελίδες του ιστολογίου σας.

Επισκεφθείτε τον πίνακα ελέγχου Tumblr και κάντε κλικ στο εικονίδιο ρυθμίσεων και στο όνομα του ιστολογίου Θα ήθελα να ενημερώσω. Εάν διαθέτετε μόνο ένα ιστολόγιο, κάντε κλικ στο όνομά του.

Κάντε κλικ στην επιλογή "Προσαρμογή" ακολουθούμενο από "Προστέθηκε HTML". Το Tumblr ανοίγει το θέμα σας και εμφανίζει τον κώδικα HTML.

Κάντε κλικ οπουδήποτε μέσα στον κώδικα και πατήστε "Ctrl-A" ακολουθούμενο από το "Ctrl-C" για να αντιγράψετε τον κώδικα στο πρόχειρο των Windows. Ανοίξτε ένα νέο έγγραφο του Notepad και επικολλήστε τον κώδικα στο έγγραφο. Αυτά τα βήματα διασφαλίζουν ότι έχετε ένα αντίγραφο ασφαλείας του αρχικού σας προτύπου.

Επιστρέψτε στον κώδικα HTML του Tumblr και πατήστε "Ctrl-F" για να ανοίξετε ένα πλαίσιο αναζήτησης. Πληκτρολογήστε "sidebar" σε αυτό το πλαίσιο αναζήτησης και, στη συνέχεια, πιέστε "Enter". Το Tumblr βρίσκει την πρώτη εμφάνιση του "sidebar" και εμφανίζει την ενότητα του κώδικα που περιέχει αυτή τη λέξη. Ο κωδικός που βρίσκει πρέπει να μοιάζει με τον ακόλουθο:

wrapper #sidebar {χρώμα: {χρώμα: φόντο}; }

Η πρώτη γραμμή κώδικα περιέχει τις λέξεις #wrapper #sidebar. Ένας αριστερός βραχίονας ακολουθεί αυτές τις λέξεις.

Επικολλήστε τον ακόλουθο κώδικα αμέσως κάτω από την πρώτη γραμμή του κώδικα:

position: fixed; δεξιά: 100px,

Το χαρακτηριστικό θέσης καθοδηγεί τους browsers να καθορίζουν την πλευρική γραμμή ώστε να μην μετακινούνται όταν μετακινηθείτε. Το χαρακτηριστικό δικαίωμα λέει στους browsers πόσα εικονοστοιχεία θα θέλατε να βρίσκεται η δεξιά άκρη της πλαϊνής γραμμής από το δεξί περιθώριο της ιστοσελίδας. Σε αυτό το παράδειγμα, το χαρακτηριστικό δικαίωμα έχει τιμή 100px.

Κάντε κλικ στην επιλογή "Ενημέρωση προεπισκόπησης" για να δείτε μια προεπισκόπηση των αλλαγών σας. Σύρετε τη γραμμή κύλισης του παραθύρου πάνω και κάτω και θα δείτε ότι η πλαϊνή σας μπάρα δεν κινείται. Κάντε κλικ στο κουμπί "Αποθήκευση" για να αποθηκεύσετε τις αλλαγές σας.

Συμβουλές

Μπορεί να θέλετε να δοκιμάσετε διαφορετικές τιμές για το σωστό χαρακτηριστικό, εάν θέλετε να προσαρμόσετε την οριζόντια θέση της πλαγίας γραμμής. Για παράδειγμα, αν αλλάξετε την τιμή από 100px σε 50px, η πλαϊνή μπάρα μετακινείται προς τα δεξιά στα 50 pixels.

Προειδοποιήσεις

Προσέξτε όταν εργάζεστε στον επεξεργαστή HTML, όπως η τυχαία αλλαγή του υπάρχοντος κώδικα μπορεί να έχει δραματικές επιπτώσεις στη διάταξη της σελίδας σας. Εάν αλλάξετε τον κώδικα και δεν μπορείτε να καταλάβετε πώς να αναιρέσετε τις αλλαγές σας, μπορείτε πάντα να διαγράψετε τα πάντα στον επεξεργαστή HTML και να επικολλήσετε τον αντιγράφων κώδικα που αντιγράψατε στον επεξεργαστή για να τον αποκαταστήσετε στην αρχική του κατάσταση.