Cum adaugam un buton "Back to top" in blog

Daca ai un blog sau un site cu postari multe si lungi, atunci cand vizitatorul ajunge in partea de jos a paginii, pentru a ajunge in meniul principal trebuie sa roteasca butonul de scroll al mouse-ului la nesfarsit, ceea ce il poate incomoda. Pentru a usura navigarea este bine sa avem un buton Back to Top in footer-ul paginii, situat in partea stanga sau dreapta, dupa dorinta fiecaruia.

In fapt ce este butonul Back to Top? Reprezinta un simplu link, care in timp ce este accesat, va trimite instant utilizatorul la inceputul paginii. Sunt sigur ca ati vazut pe multe site-uri aceste butoane, care stau fixe oricat ai derula pagina. Aceasta functie poate fi realizata prin apasarea imaginii unui buton, sau prin simplu text care in timp ce este accesat va trimite cititorul in partea din fata a blogului.

Iti voi prezenta mai jos un scurt tutorial care te va ajuta sa adaugi un buton Back to Top in blogul tau gazduit de platforma Blogger. Pozitia butonului va fi fixa, chiar daca vei derula pagina si  poti personaliza atat imaginea butonului, pozitia stanga - dreapta, cat si distanta lui fata de partea de jos a paginii. 

La inceput e bine sa cauti imaginea unui buton pe Google si sa o urci pe un site de genul: Picassa,Tinypic, My.imageshack.us, Box.net, etc. Dupa ce uploadam imaginea butonului pe unul din site-urile mentionate, dam copy pe Direct Link si il vom copia pentru a-l introduce ulterior in cod asa cum va voi explica mai jos.

Pasii de urmat:

1. Te loghezi in contul tau Blogger;
2. Navighezi in Sablon apoi in Editati HTML, Cautati tagul </body>   asa cum am invatat aici si chiar deasupra lui adaugam urmatorul cod:

<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="URL butonul tau"/></a>

Inlocuieste URL butonul tau cu URL-ul imaginii uploadate (Direct Linkul ei).

Daca preferi ca in locul imaginii unui buton sa apara un mesaj text de genul Back to Top si odata apasat sa te trimita in partea din fata a paginii, atunci procedati la fel ca mai sus numai ca deasupra tagului </body>  veti adauga codul:
<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">Back to Top</a>
 
Inlocuiti daca doriti textul Back to Top cu orice text doriti.

Personalizare:
Butonul sau mesajul va apare in partea de jos a paginii, in stanga. daca doriti sa apara in dreapta, pur si simplu inlocuiti left cu right. In acest cod, butonul este amplasat la 5px fata de partea din stanga a paginii (left:5px) si tot la 5px fata de marginea de jos a acesteia (bottom:5px). Daca doriti modificarea distantelor pur si simplu inlocuiti 5px in codurile de mai sus cu distanta dorita de voi.

Salvati sablonul si asta e tot. Ati adaugat astfel un buton Back to Top in partea de jos a blogului, care va trimite rapid utilizatorul la inceputul paginii. Daca v-a fost util articolul nu uitati sa dati un like blogului. 

Cele bune! Daca ti-a placut, nu uita sa distribui articolul!

Tweet