12. 12. 2014

Blogger Tips | Back to top button


Ahojte!


Dnes vám prinášam článok z rady "Blogger Tips" a konkrétne tlačítko Back to top, ktoré vás vráti na začiatok vášho blogu. Určite ste to videli napríklad aj na mojom blogu! (Alebo tí čo majú tumblr, vedia o čom hovorím) Ale ak ešte stále neviete o čo ide, tak ide o tlačítko, ktoré sa nachádza v pravom dolnom rohu blogu a keď na neho kliknete, vráti vás to na začiatok blogu. Zaujímavé však? (I know)
Myslím si, že je to celkom dobrý tip pre tých, ktorý majú blog a hlavne pre tých ktorí majú veľmi dlllllhý obsah blogu. Čiže keď budete na konci, nemusíte sa trápiť s myšou ale kliknete na toto tlačítko a budete naspäť hore.

Takže poďme na to!

1.) Ako prvé by bolo potrebné, keby ste si vytvorili v skicári/photoshope/Photoscape/inom-photo-editore obrázok, ktorý sa vám bude zobrazovať ako váš "Back to top button" a následne ho hodili na nejakú stránku (ja používam tinypic.com), kde využijete webovú adresu obrázku. 
Ak však nie si zručný v takýchto úpravách ani neviete čo vlastne od vás chcem, môžete využiť niektorý z nižšie uvedených, ktoré som pre vás pohľadala :)  (klik pravým tlačidlom myši a dajte kopírovať webovú adresu obrázka)





Samozrejme môžete vybrať aj úplne iný obrázok z internetu a len skopírovať pravým tlačidlom myši jeho webovú adresu :)  

2.) Prejdite v bloggeri na Šablóna > Upraviť kód HTML. Po kliknutí na niektorí z riadkov vo vašom kóde stlačte CTRL F, je to pole pre vyhľadávanie.Následne v ňom vyhľadajte <head>  
Hneď pod <head> zadajte tento kód:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

(*Edit: pokiaľ už máte na tomto mieste rovnaký kód, netreba ho zadávať znova!)

3.) Uložiť šablónu.

4.) Teraz choďte na Rozloženie > kliknite na pridať HTML/Javascript > skopírujte a vložte tam tento kód:

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://i59.tinypic.com/n4gjg8.jpg" alt="Back to Top" / ></a>

<!--Smooth Back to Top Button End-->  

Na vyznačené miesto vložte URL adresu vášho obrázku, ktorý chcete mať ako "Back to top button".

5.) Uložiť!

Dúfam, že sa vám tento návod páči a využijete ho. :) 
Pokiaľ chcete aby sa v tejto sekcii objavil nejaký Blogger Tip, napíšte si oň do komentára, rovnako tak píšte aj ak máte akékoľvek otázky.  :) 

Pekný deň prajem :))

7 komentárov:

  1. Já jsem na blog.cz, tak tohle asi nevyužiju, ale líbí se mi to! :) :D
    Věřím, že to někomu pomůže. Ani jsem nevěděla, že tohle na tumblr jde.
    Marky > little-me.blog.cz

    OdpovedaťOdstrániť
    Odpovede
    1. Ono na tumblr som to myslela tak, že tam sa nachádza tiež tento button :D nie, že tento kód funguje aj na tumblr. :D

      Odstrániť
  2. Super tutoriál ^^ veľmi mi pomohol :)

    OdpovedaťOdstrániť
  3. to je geniáálne! úžas dakujem a sledujem ;)
    www.gummybaum.blogspot.sk

    OdpovedaťOdstrániť
  4. PARÁDA !!!! Konečne som to našla :)

    OdpovedaťOdstrániť

Ďakujem za komentár a prajem krásny deň! :)