Τρίτη, 23 Μαρτίου 2010

ΠΡΟΣΘΗΚΗ ΚΟΥΜΠΙΟΥ BACK TO TOP

Πολλές φορές τυχαίνει να επισκεπτόμαστε ένα blog ή ένα website και για να το εξερευνήσουμε κατεβαίνουμε και κατεβαίνουμε πολύ κάτω. Για να ανεβούμε στην κορυφή της σελίδας πρέπει να χρησιμοποιήσουμε το ποντίκι και αυτό ίσως να μας πάρει μερικά δευτερόλεπτα. Η αλήθεια είναι ότι στο διαδύκτιο όλοι βιαζόμαστε και θέλουμε να εξοικονομούμε όσο περισσότερο χρόνο γίνεται γιατί το να κάθεσε σε μια οθόνη περιμένοντας να περάσει κάποιο χρονικό διάστημα έτσι ώστε να διεκπεραιωθεί κάποια εργασία είναι εκνευριστικό. Ευτυχώς μπορούμε να αποφύγουμε τον εκνευρισμό των αναγνωστών μας με ένα κουμπί. Με ένα κλικ σε αυτό το κουμπί μεταφερόμαστε αυτομάτως στην κορυφή της σελίδας μας. Κακά τα ψέμματα αλλά το τελευταίο που θέλουμε είναι να εκνευρίζουμε τους αναγνώστες μας. Πάμε να δούμε πως θα κάνουμε την προσθήκη αυτού του button.
Για αρχή μπάινουμε στο λογαριασμό που έχουμε στο blogspot και από τον πανόπτη πηγαίνουμε στη διάταξη και από εκεί στην επεξεργασία HTML. Πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template. Μετά πατάμε το Control και το F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος του browser. Πληκτρολογούμε:

]]></b:skin>

Θα το δούμε τονισμένο με χρώμα στον κώδικα. Αμέσως πριν από αυτό κάνουμε αντιγραφή - επικόλληση τον πατακάτω κώδικα:

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Μετά πάμε και πάλι στο χαστήρι στο κάτω μέρος του browser και βάζουμε το:

</body>

Θα το δούμε τονισμένο με χρώμα στον κώδικα. Αμέσως πριν από αυτό κάνουμε αντιγραφή - επικόλληση τον πατακάτω κώδικα:

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

Στο Image-Url μπορείται να βάλετε διάφορες διευθύνσεις εικονιδίων. Μπορείτε να δημιουργήσετε δικά σας ή να βρείτε έτοιμα στο internet. Αν κάνετε δικάσας σηκώστε τα στο Photo Bucket ή στο Image Shack .
Μερικές διευθύνσεις για εικονίδια είναι οι παρακάτω:

http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI
/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I
/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI
/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI
/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II
/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI
/AAAAAAAAAQo/lzY3WpZpwPA/s40
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI
/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI
/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI
/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI
/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI
/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I
/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

Πειραματιστείτε για να βρείτε το εικονίδιο της αρεσκείας
σας. Για τις ανάγκες της ανάρτησης επιλέξαμε μια 
διεύθυνση εικονιδίο και ο κώδικας έγινε ως εξής:
 
<a href="#" id="backtotop"><img src=
"http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA
/oEpqkKnL0Jw/s400/bttp-10.png" alt="back to top" /></a>
Τέλος πάμε ξανά στο ψαχτήρι μας και πληκτρολογούμε το:

<head>

Θα το δούμε τονισμένο με χρώμα στον κώδικα. Αμέσως μετά από αυτό κάνουμε αντιγραφή - επικόλληση τον πατακάτω κώδικα:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;



Στη συνέχεια πατάμε αποθήκευση (save) και είμαστε έτοιμοι. Για να δείτε πως θα φαίνεται
μπορείτε να δείτε εδώ . Ελπίζω να το βρείτε χρήσιμο. Καλή επιτυχία.
back to top