RSS

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

23 Μαρ.

Πολλές φορές τυχαίνει να επισκεπτόμαστε ένα 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&#8217;
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) και είμαστε έτοιμοι. Για να δείτε πως θα φαίνεται
μπορείτε να δείτε εδώ . Ελπίζω να το βρείτε χρήσιμο. Καλή επιτυχία.

Advertisements
 
18 Σχόλια

Posted by στο Μαρτίου 23, 2010 in BLOG, BLOGSPOT, BUTTONS, GADGET, TOP, WIDGET

 

18 responses to “ΠΡΟΣΘΗΚΗ ΚΟΥΜΠΙΟΥ BACK TO TOP

  1. Johnpatra

    Μαρτίου 25, 2010 at 5:12 μμ

    οπς αυτο ειναι ξεχωριστο απο αυτο που χρησιμοποιουν οι πιο πολλοι γιατι δεν παει κατευθειαν πανω αλλα ειναι σαν να κυλαει..ενδιαφερον..

     
  2. hackaday

    Μαρτίου 25, 2010 at 5:52 μμ

    @Johnpatra Ναι, αυτό είναι κουμπί κύλισης. Τα άλλα είναι ένα είδος ανακατεύθυνσης της home page.

     
  3. Super Betades

    Μαρτίου 26, 2010 at 11:43 μμ

    παρα πολυ χρησιμο, το προσθεσαμε! καλη συνεχεια!ευχαριστουμε…

     
  4. hackaday

    Μαρτίου 27, 2010 at 12:19 πμ

    @Super Betades Χαίρομαι που σας άρεσε.

     
  5. manoula

    Μαρτίου 29, 2010 at 9:47 μμ

    Ευχαριστώ! πολύ χρήσιμο!μόλις το πρόσθεσα!

     
  6. hackaday

    Μαρτίου 29, 2010 at 9:50 μμ

    @manoula Να 'σαι καλά. Χαίρομαι που σου άρεσε. Καλές γιορτές να έχεις.

     
  7. andreas

    Απρίλιος 15, 2010 at 6:51 μμ

    καλά ολα Αυτά που γράφεις αλλα εμένα οτι εχει να κάνει με επεξεργασία HTML ΜΟΥ βγάζει πάντα αυτο το μύνημα Δεν ήταν δυνατή η ανάλυση του προτύπου σας, επειδή δεν είναι σωστά μορφοποιημένο. Βεβαιωθείτε ότι όλα τα στοιχεία XML είναι σωστά κλεισμένα. Αγνωστο γιατι; ευχαρηστώ ανδρέας

     
  8. hackaday

    Απρίλιος 15, 2010 at 7:05 μμ

    @andreas Πρότυπο είναι το template που χρησιμοποιείς. Μήπως πήγες παλιότερα να το πειράξεις και κατά λάθος αφαίρεσες κάποιο στοιχείο ή σύμβολο; Ένας κώδικας HTML κλείνει συνήθως με /> Μήπως από κάποια γραμμή κώδικα λείπει το κλείσιμο;

     
  9. yiafar

    Απρίλιος 17, 2010 at 3:40 μμ

    Μπράβο, σε ευχαριστώ που μοιράζεσαι τις γνώσεις σου. Μήπως θα μπορούσες να μας πεις αν υπάρχει τρόπος να βάλουμε ένα κουμπί στη θέση ενός συνδέσμου; για π.χ. στις αναρτήσεις μου κάποιες φορές επικολλώ έναν σύνδεσμο (αρκετές γραμμές και κακόγουστος) για να διευκολύνω τους αναγνώστες μου. Αυτόν ακριβώς τον σύνδεσμο μπορώ να του δώσω τη μορφή εικονιδίου που να λέει για παράδειγμα "κάνε κλικ εδώ" ή "download" κλπ.;Thanks anyway!!!!

     
  10. hackaday

    Απρίλιος 17, 2010 at 4:31 μμ

    @yiafar Εννοείς μέσα στην ανάρτηση – άρθρο; ΑΝ ναι μπορείς να βρεις εικονίδια που θέλεις στις εικόνες του google ως εικονίδια ή clip art και να τα βάλεις μέσα στην ανάρτηση σου. Μετά μπορείς να τα μετατρέψεις σε links από το control panel της συγγραφής ανάρτησης. Να ξέρεις όμως ότι με την προσθήκη εικονιδίου μέσα σε ανάρτηση μπορεί οι γραμμές της ανάρτησης σου να είναι λίγο πιο αραιές.

     
  11. yiafar

    Απρίλιος 17, 2010 at 8:38 μμ

    Σε ευχαριστώ για την άμεση απάντησή σου. Παίρνω το θάρρος να σε ξαναενοχλήσω αν δεν τα καταφέρω.Πες μου πως μπορώ να προσθέσω το blog σου σε αυτά που παρακολουθώ με τον blogger? (σε κάποια μπορώ να γίνω αναγνώστης με κάποιο gadget) Ή αν προσθέσω τον κώδικα για τον Banner πρέπει να τον αντιγράψω κάπου συγκεκριμένα ή όπου θέλω;Συγνώμη αλλά δεν είμαι και πολύ σχετικός.

     
  12. yiafar

    Απρίλιος 17, 2010 at 9:18 μμ

    Ξέχνα τις 2 τελευταίες ερωτήσεις σε παρακαλώ, βρήκα τη λύση για να παρακολουθώ το blog και για να προσθέσω τον κώδικα.Όσον αφορά τη μετατροπή εικόνας σε link το ψάχνω ακόμη. Αυτό με το control panel πως γίνεται;…και καλό Σαββατοκύριακο!

     
  13. yiafar

    Απρίλιος 17, 2010 at 9:42 μμ

    Τελικά βρήκα τη λύση σε όλα.Ψάχνοντας …πας και στην πόλη! (έτσι λένε).Σε ευχαριστώ και τα λέμε.

     
  14. hackaday

    Απρίλιος 17, 2010 at 10:43 μμ

    @yiafar Αν ψάξεις στο blog Μου θα βρεις πολλές απαντήσεις. Μέχρι στιγμής έχει 92 αναρτήσεις. Αν αφιερώσεις λίγη ώρα για να το εξερευνήσεις θα βρεις πολλά που θα σ' ενδιαφέρουν. Για ότι απορία έχεις άφησε σχόλιο ή στείλε μου email.

     
  15. andreas

    Απρίλιος 18, 2010 at 7:23 μμ

    ΓΙΑ ΤΟΝ ΦΙΛΟ ΠΑΡΑΠΑΝΩ ΓΙΑ ΚΟΙΤΑΞΕ ΚΑΙ ΑΥΤΟ ΤΟ SOFTWARE http://www.kristanixsoftware.com/ ΝΑ ΔΕΙΣ ΑΝ ΣΟΥ ΚΑΝΕΙ!

     
  16. hackaday

    Απρίλιος 18, 2010 at 8:31 μμ

    @andreas Ευχαριστώ Ανδρέα για τη συμβολή σου.

     
  17. SpIrToKoYto

    Μαΐου 16, 2010 at 6:35 μμ

    hackaday,πολύ σ'ευχαριστώ..μόλις σε ανακάλυψα και περάσαμε μια ολόκληρη Κυριακή μαζί ψάχνοντας στις αναρτήσεις σου..-:))μόλις ευκαιρίσεις,κερνάω καφέ και γλυκάκι στο βλογ μου…

     
  18. hackaday

    Μαΐου 16, 2010 at 6:43 μμ

    @SpIrToKoYto Καλωσήρθες στο ιστολόγιο μου. Αν φάνηκα χρήσιμος χαίρομαι. Ποτέ δε λέω όχι σε καφεδάκι και γλυκάκι. Αν θέλεις μπες και εδώ:http://hackaday-thema.blogspot.com (και αυτό δικό μου είναι).

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: