War Thunder

Προσθέστε back to top και home button στο blog σας!

Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε στο blogger μπλογκ μας δυο πολύ χρήσιμα buttons. Τα δυο buttons που θα προσθέσουμε είναι το back to top (πίσω στη κορυφή), όπου αν ο αναγνώστης πατήσει σε αυτό, ενώ έχει φτάσει στο τέλος του άρθρου που διαβάζει, τότε τον επαναφέρει στη αρχή του και το άλλο button παίρνει τον αναγνώστη στη αρχική σελίδα.

Τα κουμπάκια αυτά, θα “συνοδεύουν” τον χρήστη κατά τη ανάγνωση του, δεξιά ή αριστερά, έτσι ώστε να είναι πάντα ορατά σε αυτόν. Κάτι αντίστοιχο με το facebook floating like box.

Τα εργαλεία αυτά είναι πολύ χρήσιμα σε ένα μπλογκ γιατί βοηθούν στο να είναι πιο φιλική η ιστοσελίδα σας στο χρήστη και βοηθούν στη αύξηση των σελίδων (page views) που θα δει ο χρήστης. Χαρακτηριστικό παράδειγμα αποτελεί ένα άρθρο που έχει γίνει shared στο facebook. Ο χρήστης διαβάζει το άρθρο και βλέπει δεξιά (ή αριστερά)  τα εργαλεία αυτά. Με ένα πάτημα θα βρεθεί στη αρχική σελίδα όπου υπάρχουν όλες οι πρόσφατες ειδήσεις σας ή στη αρχή του άρθρου όπου βρίσκεται το μενού σας, με τις κατηγορίες των θεμάτων σας.

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

Βήμα 1:  Συνδεθείτε στο λογαριασμό σας στο blogger:

Βήμα 2:  Επιλέξτε από το μενού δεξιά Πρότυπο και διαλέξτε μετά Επεξεργασία HTML. Στο παράθυρο που θα εμφανιστεί πατήστε Συνέχεια.

Προσοχή: Πάντα να αποθηκεύετε το πρότυπο σας πριν κάνετε αλλαγές σε αυτό. Συμβαίνει και στους καλύτερους. Μπορεί να κάνετε μια αλλαγή από βιασύνη και μετά να μην εμφανίζετε η σελίδα σας. 

Βήμα 3:   Πατήστε ctrl+F και αναζητήστε τη παρακάτω παρακάτω γραμμή:

</body>

Βήμα 4:   Αντιγράψτε τον παρακάτω κώδικα ακριβώς από πάνω από τη προηγούμενη γραμμή:

<a href='#' style='position: fixed;
bottom:70px;right:17px;'
title='Back to top'>
<img src='http://1.bp.blogspot.com/-uZXdnsKldDA/T559m_SJElI/AAAAAAAAFsU/4OJELKBj7sA/s200/backtotop_blue.gif' style='border: none;'/>
</a>

<a href='http://greekpcblog-test.blogspot.com' style='position: fixed;
bottom:10px;right:50px;'
title='Αρχική Σελίδα'>
<img height='50' src='http://2.bp.blogspot.com/-pRSW6cOhJxU/T55-EUHgmZI/AAAAAAAAFto/L8UVq6oskhw/s200/Home-icon.png' style='border: none;' width='50'/>
</a>

Παρατηρήσεις

  • Στη γραμμή 7 αντικαταστήστε το http://greekpcblog-test.blogspot.com με τη διεύθυνση της ιστοσελίδας σας
  • Μπορείτε να χρησιμοποιήστε δικές σας εικόνες. Απλά βάλτε τα URL προς τις εικόνες σας στις γραμμές 4 και 10 αντίστοιχα. Έχουμε ετοιμάσει για σας στη διεύθυνση αυτή κάποιες πολύ καλές εικόνες με διάφορα χρώματα.
  • Μπορείτε να αλλάξετε τις θέσεις των εικόνων παίζοντας με τις τιμές στις γραμμές 2 και 8 αντίστοιχα. Αν θέλετε να εμφανίζονται αριστερά, αλλάξτε το right με left

Αυτό ήταν! Με λίγες γραμμές κώδικα προσθέσαμε δυο κυλιόμενα κουμπάκια, πολύ χρήσιμα στο μπλογκ μας!

loading...

Share This Post

Related Articles

Leave a Reply

Άδεια Creative Commons
Χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Παρόμοια Διανομή 4.0 Διεθνές .
© 2017 Greek PC Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS