Add "Back To Top" And "Go Down" Links To Blogger Blog

Εάν ελέγξετε το blog μου, στη δεξιά πλευρά θα δείτε δύο "υπέροχα χεράκια" που σχεδίασα, που δείχνουν σε αντίθετη κατεύθυνση.
Το Ένα δείχνει επάνω & θα σας πάει στην κορυφή της σελίδας, ενώ το άλλο που δείχνει προς τα κάτω, θα σας πάει στο κατώτατο σημείο της σελίδας μας.

Είναι αρκετά βολίκό widget ειδικά για όσους έχουν μακροσκελή κείμενα στη σελίδα τους & δεν χρησιμοποιούν το Διαβάστε περισσότερα είτε του blogger είτε από κάποιο hack, με αποτέλεσμα να κουράζουν τους επισκέπτες τους.

Εδώ θα σας δείξουμε τους 2 τρόπους που υπάρχουν.
Εσείς δείτε τους & όποιος σας αρέσει χρησιμοποιήστε τον.



Η διαδικασία τοποθέτησης είναι...

1ος Τρόπος

Επισκεφτείτε την σελίδα εδώ για να βρείτε μόνοι σας τά "βελάκια" της αρεσκείας σας.
Προτιμήστε σε διάσταση την 32x32 px
Ανεβάστε τις σε κάποιον image hosting π.χ. tinypic και κρατήστε τα direct links σε κάποιο txt ή έγγραφο κειμένου.

BHMA 1o:

Θα μπείτε στον Πανόπτη σας ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.

<a style="display:scroll;position:fixed;bottom:260px;right:5px;" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src=".....your image arrow UP...."/></a>

<br/>

<a style="display:scroll;position:fixed;bottom:225px;right:5px;" href="#GoDown"><img style="border:0;" src="......your image arrow DOWN......"/></a>

πάμε στο επόμενο βήμα.....

ΒΗΜΑ 2o:

θα κάνετε αναζήτηση με το Ctrl + F για το.....

</body>

Μόλις το βρείτε & πριν από το κλείσιμο του </body>
Προσθέστε την παρακάτω γραμμή κώδικα.

<a name='GoDown'/>

Αυτό ήταν....

Πατήστε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ!!!!

Κάποιες διευκρυνήσεις....

Στη γραμμή του κώδικα που βάλατε στο gadget έχει το σημείο....

bottom:225px;right:5px;" Σ'αυτό το σημείο ορίζεται τις μεταβλητές ύψους από το κάτω μέρος της σελίδας σας ( bottom:225px; ) & σε ποια πλευρά θα εμφανίζεται & με ποιά απόσταση ( right:5px; ) ( δεξιά ή αριστερή ) το οπόιο μπορεί να αλλαχτεί από right σε left αρκει να το αλλάξετε & στις δύο γραμμές.

Εκει μπορείτε να παίξεται άφοβα με τα νούμερα μέχρι να πετύχετε το επιθυμητό αποτέλεσμα.

2ος Τρόπος

Θα συνδεθείτε στο Blogger

Πηγαίνετε στο Πανόπτη σας --> Διάταξη --> Επεξεργασία HTML

Αφού κρατήσετε backup το template σας καλού-κακού....

BHMA 1o:

Θα κάνετε αναζήτηση με το Ctrl + F για το.....

]]></b:skin>

Μόλις το βρείτε & πριν από το κλείσιμο του ]]></b:skin>
Προσθέστε τον παρακάτω κώδικα.

.gototop{
background:url(.....your image arrow UP....)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:5px; bottom:50px;}

.gotobottom {
background:url(......your image arrow DOWN......)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:5px; bottom:10px;
}

ΒΗΜΑ 2o:

θα κάνετε αναζήτηση με το Ctrl + F για το.....

</body>

Μόλις το βρείτε & πριν από το κλείσιμο του </body>
Προσθέστε τoν παρακάτω κώδικα.

<a href='#' style='display:scroll;position:fixed;bottom:115px;right:5px;' title='Back to Top'><img src='.....your image arrow UP....' style='border:0;'/></a>
<br/>
<a href='#GoDown' style='display:scroll;position:fixed;bottom:80px;right:5px;'><img src='......your image arrow DOWN......' style='border:0;' title='Go Down'/></a>
<a name='GoDown'/>

Αυτό ήταν....

Πατήστε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ!!

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!