Keresés a blogban

2010. június 12.

Back to top widget - Vissza a tetejére widget

Ez a widget elhelyez egy kis nyilat (vagy amilyen képet akarsz) a monitor jobb alsó sarkában. Rákattintva visszaugrik a blog elejére, a fejléchez. Nem kell görgetnük tehát, hogy visszajussunk. Ez különösen hosszú, törés nélküli cikkeket tartalmazó oldalaknál előnyös.
DEMO itt.


  1. Az egyik lehetőség, hogy elhelyezd:

    Irányítópult -> Tervezés -> Oldalelemek -> Modul hozzáadása az oldalsávhoz -> HTML/Javascript modul
    Címet ne adj, a tartalom részébe pedig másold be ezt a kódot:
    <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnZv3n1bWl8dIjUU0HGL8FmleTl6Ri1SK2iK1VrFB5A-30D3prXeljEdXO4_k0XfblBR6jnwuGLaS0hAbRYs7HFhmfG0lXdMidkiyZ1qeYC7PxETkdJV4u77N0pVks8A-Pyvps-Vf4Q/s400/back-to-top.gif" /></a></div>
    Mentés
    Ezután húzd a modult legalulra, hisz üresnek fog látszani, de mégis látszik az oldalsávban, majd Mentsd el a változtatást. A piros rész a képecske URL címe. Ehelyett bármilyen más képet is betehetsz, pl. a Picasába feltöltve.

  2. Elegánsabb módszer, ha egyenesen beleteszed a kódba. Ezt így csináld:

    Irányítópult -> Tervezés -> HTML-kód szerkesztése -> Vezérlősablonok kibontása
    Ctrl+f

    A keresőbe írd be: ]]></b:skin>
    Ez ELÉ szúrd be
    .backtotop a:hover {background:none;}
    

    Ezután két sorral lejjebb a <body> mögött találsz ilyet:
    <div id='outer-wrapper'>
    
    vagy
    
    <div id='wrap'>
    
    stb.
    
    Attól függ, hogy milyen sablonod van.
    Közvetlenül UTÁNA szúrd be ezt a kódot:
    <div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnZv3n1bWl8dIjUU0HGL8FmleTl6Ri1SK2iK1VrFB5A-30D3prXeljEdXO4_k0XfblBR6jnwuGLaS0hAbRYs7HFhmfG0lXdMidkiyZ1qeYC7PxETkdJV4u77N0pVks8A-Pyvps-Vf4Q/s400/back-to-top.gif" /></a></div>
    

    Mentés

Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

4 megjegyzés:

yoen írta... [Válasz erre...]

Kedves WL!
A tanácsaidat követve a legutóbbi akcióm is sikeresen zárult, egy cuki kis back top-ot tettem fel!
Az oldalamat egész jól felhoztam, meg vagyok vele elégedve, most azt tervezem, hogy a blogjelleget megtartom, és a céges funkciót átviszem egy "hivatalos", domaines helyre.
Itt szeretném még egyszer megköszönni eddigi minden segítségedet!
Üdv, Admin/Yoen

- monika mesterhazy - írta... [Válasz erre...]

Köszi a tippeket!:)

Noé írta... [Válasz erre...]

Szeretném kérdezni, hogy honnan tölthetnék le ehhez a widgethez használható ikont? Végigcsináltam az útmutatásod alapján, működik is, de olyan kis semmike ikont szúrt be a lap jobb alsó sarkába.

Egy másik kérdés, ami nem konkrétan ide tartozik, de megkérdezném: smileyt honnan tölthetek le a bloghoz? Egy helyet ismertem: cool-smileys.com, de amit beszúrtam a blogba html-t az olyan nagy lett - nem tudtam kisebbre venni, hogy illeszkedjen a szöveg méretéhez. A legkisebb méret is vagy 4x volt a betűméretnek.

Köszönöm előre a segítségedet!

Wise Lady írta... [Válasz erre...]

@Noé
Konkrétan nem tudok, iconset-ek tartalmaznak ilyet. De ha a Google-t Képekre váltod, és beírod "backtotop button" vagy "back to top icon" vagy go to top stb., akkor előbb-utóbb találsz megfelelőt. Smiley hasonló.

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-