Back To Top Button | Code Your Blog

nedeľa 28. februára 2016


Krásne nedeľné popoludnie, my friends 
Nestíham - odkedy som sa dnes ráno zobudila, odvtedy sedím za notebookom. Až do tretej poobede som robila prácu na dejepis, tak prehľad, veci na semináre, teraz sa pôjdem učiť prvú svetovú vojnu a novovekú filozofiu. Preto to dnes bude znova článok do tejto rubriky, lebo - úprimne - nič iné nemám pripravené.
Keďže si dobre pamätám na svoje kódovacie začiatky a chvíle, kedy som si trieskala hlavu o stôl, keď mi niečo nefungovalo, dnes vám ukážem ďalší krátky a rýchly postup či trik - ako pridať tlačidlo, ktoré vás dostane na úvod stránky. Ja sama som tento návod pár rokov dozadu dlho hľadala, tak verím, že vám pomôže.


01. Prihláste sa na svoj blog, v ľavom menu nájdite Rozloženie a do menu pridajte modul gadget HTML/Javascript.
02. Do obsahu okna, ktoré sa vám otvorí, vložte:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href="#" class="backtotop">^</a>

Poznámka: Namiesto Názvu modulu gadget vložte <!>

03. Vpravo hore kliknite na Uložiť usporiadanie.
04. V ľavom menu teraz zvoľte Šablóna a Upraviť kód HTML.
05. Kliknite dovnútra veľkého okna s kódmi, stlačte CTRL + F a do vyhľadávača zadajte:

]]> </b:skin>

06. Pred tento kód vložte:

.backtotop {
font-family: 'Courier New';
font-size: 50px;
color: #ffffff;
position: fixed;
bottom: 20px; /*vzdialenosť od spodného okraja stránky */
right: 10px; /* vzdialenosť od pravého okraja stránky */
z-index: 99999;
background-color: #333333; /* pozadie tlačidla */
width: 50px; /* šírka tlačidla */
height: 50px; /*výška tlačidla */
text-align: center;
}

.backtotop:hover {
background-color: #999999; /* zmena farby pozadia za šípkou po ukázaní myšou */
color: #ffffff; /* zmena farby šípky po ukázaní myšou */
text-decoration: none;
}

Pozor: čo je červenou môžete meniť, modrou sú moje poznámky.

07. Uložte šablónu a hotovo!

Ak vám niečo nebude fungovať, napíšte mi.
Kontakt nájdete v hornom i bočnom menu.

A budem veľmi rada, ak mi do komentárov napíšete, aké návody by ste uvítali ♡.

with all love,

12 komentárov

  1. Juu, to se mi hodí! Až budu mít špetku času, vyzkouším. Děkuju. ❤

    OdpovedaťOdstrániť
  2. Určite vyskúšam, ďakujem za tip:)
    Pozývam ťa na moju giveaway:
    http://vsetko-co-mam-rada-by-vaja.blogspot.sk/2016/02/velkonocna-giveaway.html?m=1

    OdpovedaťOdstrániť
  3. Mně by zajímalo, jak si na blog přidat část, která je u tebe nazvaná "Posts you might also like" a je hned nad komentáři. díky

    Jsi krasna

    OdpovedaťOdstrániť
  4. Super návod pre všetky blogerky. Ja ho tam už mám, zrejme automaticky bol nastavený v šablone. Inak krásne design a fotky. :))

    Škoda, že som tvoj blog neobjavila skôr. :)

    OdpovedaťOdstrániť
  5. Tohle je velmi užitečný návod. Až budu mít více času, tak si s tím zkusím pohrát. :-)
    welcometomyworld

    OdpovedaťOdstrániť
  6. Návody na vylepšovaní blogu naprosto miluju. Nejhorší je, že mi většinou nic nevyjde tak, jak by mělo :D
    Michelle B

    OdpovedaťOdstrániť
  7. Popravde mne sa hodí každý možný návod, v ktorom je to napísané prehľadne, ako tu. Vo veciach s počítačmi som dosť nešikovná. Ako viem si niečo vyznačiť, spraviť tabuľku, graf, nastaviť základné veci, ale na zázraky stvorená nie som. Okolo blogu mi treba porobiť ešte veľa vecí, no stále to zanedbávam, odkedy mám túto šablónu - čo už bude onedlho aj rok možno.
    DominicaLand

    OdpovedaťOdstrániť
  8. Opäť skvelý návod! Tiež som to nedávno celkom dlho hľadala a piplala sa s tým, pretože na mnohých blogoch som sa v tom nevyznala. Teraz, ak by som si niečo takéto robila opäť, viem, kde mám hľadať ♥
    31shadesofaubergine

    OdpovedaťOdstrániť

Latest Instagrams

© A STYLISH BEE. Design by FCD.