Google+ Προσθέστε κουμπί "Επιστροφή στην κορυφή" στο Blogger - Alternative

Προσθέστε κουμπί "Επιστροφή στην κορυφή" στο Blogger


Αυτό είναι ένα φοβερό τρικ για να προσθέσετε επιλογή back to top στο ιστολόγιο σας και μάλιστα με ομαλή κύλιση(smooth scrolling). Αν έχετε πολύ περιεχόμενο στις σελίδες του blog σας και αν θέλετε να κάνετε το blog σας να είναι πιο εύκολο στην πλοήγηση για τους αναγνώστες σας αυτή η λειτουργία είναι αναγκαία. Χρησιμοποιώ ήδη αυτό το κουμπί και αν θέλετε να ελέγξετε πώς λειτουργεί, πηγαίνετε στο κάτω μέρος του ιστολογίου και κάντε κλικ στο βέλος που βρίσκεται στη δεξιά γωνία.


Βήματα:

1. login στον λογαριασμό σας στον blogger και επιλέγετε Πρότυπο >> Επεξεργασία HTML.

2. 
Πληκτρολογείστε "Ctrl + F" για να βγει το παράθυρο αναζήτησης και βρείτε το ]]></b:skin>.

3. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ακριβώς πριν από το ]]></b:skin>.

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


4. Τώρα βρείτε την ετικέτα </body> χρησιμοποιώντας το "Ctrl + F".

5. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ακριβώς πριν από το</body>.

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

Λίστα με μερικα δωρεάν κουμπιά για να διαλέξετε
(πατήστε skip ad πάνω δεξιά για να εμφανιστεί η εικόνα)


http://adf.ly/HKCKJ
http://adf.ly/HKCKK
http://adf.ly/HKCKL
http://adf.ly/HKCKM
http://adf.ly/HKCKN
http://adf.ly/HKCKO
http://adf.ly/HKCKP
http://adf.ly/HKCKQ



6. Αντικαταστήστε το Image Url με το url της εικόνας που θέλετε να εμφανίζεται και ο κώδικας θα μοιάζει κάπως έτσι

<a href="#" id="backtotop"><img src=" http://1.bp.blogspot.com/--DwxMNp5ts0/UA4lxxLt9FI/AAAAAAAAA-I/FVx5qcl5sos/s1600/back+to+top.png " alt="back to top" /></a>

7. Βρείτε την ετικέτα <head> χρησιμοποιώντας το "Ctrl + F".

8. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ακριβώς κάτω από το <head>.

<!-- start back to top -->
&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;
<!-- end back to top -->

9. Πατήστε "Αποθήκευση Προτύπου" (save template).

Next Post Previous Post Home
Related Posts Plugin for WordPress, Blogger...
back to top