Jak wstawić loader w bloggerze

15 sierpnia 2015


Szykowałam dla Was całkiem inną instrukcje, ale mam tak dużo maili i wiadomości na facebooku w sprawie tego serduszka, które pokazuje się przy ładowaniu strony, że postanowiłam zrobić instrukcje dotyczącą tej animacji. Nie jest to nic trudnego, ale będziemy pracować w HTMLu. Wiem, że dużo osób nie lubi grzebania w kodzie, ale postaram się to wszystko tak wytłumaczyć, aby nie stanowiło problemów.

ZRÓB KOPIĘ ZAPASOWĄ SZABLONU! 

1. Przechodzimy szablon - edytuj kod HTML


2. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl + f (Mac - cmd + f)


3. W okienku wyszukiwania wpisujemy </body> i klikamy enter.


4. Tuż NAD </body> wklejamy kod:


<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

5. Tuż POD </body> wklej kod: 


<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>

6. Wyszukujemy teraz </head>  i POD nim wklejamy kod: 


<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>

7. Teraz wyszukujemy ]]></b:skin> i NAD wklej jeden z loaderów podanych poniżej: 



LOADER 1


/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/481_zpsqlciwygn.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 2



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/30_zpsroojtwzl.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 3



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/133_zpsvhrtutyx.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 4



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/134_zpseesb4zcf.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 5



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/143_zpssgto7uft.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 6



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/369_zps6u1ufg54.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 7



/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/477_zpsqsh9ukjn.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 8


/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/728_zpswnuib1wg.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

63 komentarze:

  1. Super to jest! Mi nie wychodzi i nie wiem co zrobić ;/ Wyskakuje mi : Nie udało się wczytać podglądu szablonu: Błąd podczas analizowania pliku XML, wiersz 3261, kolumna 14: XML document structures must start and end within the same entity .

    OdpowiedzUsuń
    Odpowiedzi
    1. Sprawdź czy dobrze skopiowałaś kod - czasem może być tak, że umknęło nam coś. Jeśli błąd będzie dalej, to będę musiała zajrzeć w szablon.

      Usuń
  2. Świetna instrukcja i od razu mówię, że z niej skorzystałam :)
    Pozdrawiam,Madds
    blog ->klik

    OdpowiedzUsuń
  3. A wiesz, że wiele razy się zastanawiałyśmy jak ustawiłaś takie śliczne serduszko :D
    Trafiłaś z wpisem, wiele osób skorzysta :)

    OdpowiedzUsuń
    Odpowiedzi
    1. A tu proszę - zagadka rozwiązana :)

      Usuń
  4. Jesteś niesamowita! Bardzo dziękuję za kody, zastosowałam je na blogu i wszystko pięknie działa :)
    Dzięki tobie się rozwijam :D

    INNA MYŚL [blog] | KANAŁ NA YT

    OdpowiedzUsuń
    Odpowiedzi
    1. Nawet nie wiesz jak mnie to cieszy! :)

      Usuń
  5. Bardzo świetny ten post. Osobiscie nie zastosuje tego lecz najbardziej spodobał mi sie drugi loader :)

    OdpowiedzUsuń
  6. Bardzo przydatna rada i wbrew pozorom nawet łatwa do wykorzystania :)
    Pozdrawiam.

    Nitka Blog

    OdpowiedzUsuń
    Odpowiedzi
    1. Trzeba się przełamać, a potem wszystko może stać się łatwe :)

      Usuń
  7. Taka animacja dodaje "ruchu" na blogu, jednak ja wolę standard :-)
    xoxo,
    http://xiyavalentina.blogspot.com/2015/04/yellow-sunny-mind.html

    OdpowiedzUsuń
  8. Na pewno skorzystam z tego i oczywiście wtedy napiszę o twoim blogu w poście :)
    Napisałam do Ciebie na e-maila w pewnej sprawie i jak będziesz miała chwilę, to prosiłabym o odpowiedź :)

    OdpowiedzUsuń
  9. Super ten loader wygląda ale.. jak chciałam go do siebie dodać to lipa :/ nie wiem czy za szybkie mam ładowanie czy co ale nie pokazuje mi go :( nie wiesz co może być tego przyczyną? (testowałam go na blogu testowym dla bezpieczeństwa)

    OdpowiedzUsuń
  10. Podaj link do bloga. Inaczej nie pomogę

    OdpowiedzUsuń
  11. Wybacz że wcześniej nie odpisałam ale nie miałam kiedy. Z godzinkę przed twoim wpisem rozwiązałam problem. Przez to że ostatnio kody CSS często się gryzą nauczyłam się sztuczki. Mianowicie, jeśli kod nie reaguje a nie powoduje błędów, wystarczy go przenieść na samą górę okna CSS. Tak też zrobiłam w tym przypadku bo podany przez ciebie skrypt sam tworzy css w naszym oknie.

    Pozdrawiam i serdecznie dziękuję za zainteresowanie!

    Dla chętnych jak mi to wyszło :)

    http://okowoku.blogspot.com

    OdpowiedzUsuń
  12. Pandy pewnie nie ma :P A chociaż koniczynka się znajdzie? :)

    OdpowiedzUsuń
  13. Poszukam i pandy, koniczynki i dam znać :)

    OdpowiedzUsuń
  14. Nie mam w kodzie, a nigdy nic nie usuwałam :P
    I to nie pierwsza rzecz której nie mam...

    OdpowiedzUsuń
  15. Aż niemożliwe, żeby w kodzie nie było :O
    Szablon jest pobrany czy Bloggerowy?

    OdpowiedzUsuń
  16. Misia Polaris2 marca 2016 21:17

    Bloggerowy :/

    OdpowiedzUsuń
  17. Misia Polaris3 marca 2016 19:39

    http://llltesthyhyhyhy.blogspot.com/

    OdpowiedzUsuń
  18. Sprawdziłam - znacznik istnieje w szablonie. Jeśli chcesz możesz mi przesłać szablon na maila, abym dokładnie sprawdziła.

    OdpowiedzUsuń
  19. Misia Polaris5 marca 2016 18:35

    Dzięki :)

    OdpowiedzUsuń
  20. Magdatworzy.pl6 marca 2016 15:25

    Witaj. Czy możesz mi podpowiedzieć jak w poście udostępnić dany kod w formie, której widać u Ciebie w poście? Taki właśnie możliwy do skopiowania przez innych czytelników? Robię małe, proste dodatki do blogów, uczę się na własnych błędach, ale jeszcze nie potrafię, nie wiem jak właśnie udostępniać te kody na blogu. Mogę liczyć na podpowiedz z Twojej strony? Bardzo proszę :)

    OdpowiedzUsuń
  21. To nic innego jak utworzony cytat i dopisany do niego styl CSS na wygląd cytatów we wpisie :) Opcja cytatu znajduje się w edytorze tekstu wystarczy zaznaczyć tekst, który ma być cytatem i wybrać opcje cytatu (na dołączonym zdjęciu zaznaczyłam gdzie dana opcja się znajduje) ;)

    OdpowiedzUsuń
  22. Magdatworzy.pl6 marca 2016 17:12

    Dziękuję za podpowiedz :)

    OdpowiedzUsuń
  23. Magdatworzy.pl6 marca 2016 17:24

    Coś mi nie wychodzi. W css wstawiłam to:

    .post blockquote {
    border-left:10px solid #fd707a;padding-left:20px;background:#9cdcfc;}


    następnie zrobiłam jak pisałaś, zaznaczyłam tekst i przycisnęłam to na górze, ale po opublikowaniu postu nie pokazuje się zmieniony, ozdobny cytat. :(

    OdpowiedzUsuń
  24. Zmień selektor z .post blockquote na blockquote

    OdpowiedzUsuń
  25. Magdatworzy.pl7 marca 2016 17:31

    Witaj :) Teraz działa. Dziękuje pięknie za pomoc :)

    OdpowiedzUsuń
  26. Kochana ja mam podobny problem :( Zrobiłam według instrukcji i niestety nie działa. Nic nie widać. Na innych moich blogach działa świetnie. Możesz i na mój blog luknąć. To próbny blog, na nim uczę się robić szablony. No i loader nie działa :( Plissss pomóż :) :* http://goutte-de-rosee.blogspot.com/

    OdpowiedzUsuń
  27. Z tego co widzę to jest to szablon od Blokotka, więc to z autorem szablonu trzeba się kontaktować

    OdpowiedzUsuń
  28. O jakim komentarzu mowa? Bo ja żadnego nie usuwałam i wszystkie widzę ;)

    OdpowiedzUsuń
  29. Przez moment był napis usunięty komentarz, ale znikł ;)

    OdpowiedzUsuń
  30. Kocham twojego bloga! Bardzo mi pomagają instrukcje, a wiesz może jak edytować wygląd komentarzy? Byłabym wdzięczna gdybyś pomogła.
    Mój blog ---> KLIK

    OdpowiedzUsuń
  31. Tutaj jest wpis dotyczący komentarzy ;) http://blonparia.blogspot.com/2016/02/jak-edytowac-wyglad-komentarzy-blogger.html

    OdpowiedzUsuń
  32. kosmetyczna niewolnica6 lutego 2017 23:08

    Skorzystałam z Twoich rad, zrobiłam krok po kroku i wszystko elegancko działało. Po pewnym czasie przestało, a ja nic nie kombinowałam z kodem. Jak to naprawić?

    OdpowiedzUsuń
  33. Poproszę o link do bloga, bez linku do bloga nie pomogę :)

    OdpowiedzUsuń
  34. Bardzo przydatny wpis :) Poszedł sub ;) NIestety z nowszymi sablonami bloggera to już nie działa niestety.

    OdpowiedzUsuń
  35. Jak widać u mnie na blogu działa, wczoraj również instalowałam ten gadżet na innym blogu i było ok ;)

    OdpowiedzUsuń
  36. Tylko, że dzisiaj dopiero pojawiły się nowe szablony od google'a :) O te mi chodzi :)

    OdpowiedzUsuń
  37. To mnie zaskoczyłeś :) Jeszcze nie widziałam, bo dopiero za jakąś godzinę będę mieć dostęp do komputera. Jednak mimo wszystko i tak to za wiele nie zmienia, bo modyfikację na Bloggerze powinno się robić na prostym (simple) białym :)
    Z ciekawości w weekend zagłębie się w nowe szablony, zobaczę czy da się ten gadżet jakoś podpiąć :)

    OdpowiedzUsuń
  38. Mi się nie udało, ale może tobie się uda :)

    OdpowiedzUsuń
  39. Ja wybrałem Contempo i tak to u mnie wygląda :) Widzę, że szybciej się strona ładuje niż przy wcześniejszym przy tej samej ilości modyfikacji (przed dodaniem loadera) :) Wcześniej wybrałem Rewelację.

    OdpowiedzUsuń
  40. Z ciekawości na drugim blogu zainstalowałam nowy szablon Contempo - działa ten gadżet bez zarzutów, nic nie zmieniałam ;)
    Możesz zobaczyć:
    http://ujetewslowach.blogspot.com/

    OdpowiedzUsuń
  41. Dziwne. U mnie nie działa, a robiłem w/g wskazówek.

    OdpowiedzUsuń
  42. Może masz jakiś inny skrypt wgrany, który się gryzie lub gdzieś przez przypadek uciąłeś kod lub znaczniki zostały niedomknięte :)

    OdpowiedzUsuń
  43. Niestety nie nam nic co się gryzie ani nic nie uciąłem. Może strona się u mnie za szybko ładuje, ale wątpię bo dodałem dzisiaj kod, aby pokazywało strzałkę na dole to też nie działa mimo, że kod jest kompletny.

    OdpowiedzUsuń
  44. Hej, super wpis;)
    zrobiłam loader u siebie jednak nie do końca zadziałał- górne menu pojawia się razem z loaderem, co jest trochę frustrujące- czy mogłabyś zerknąć w kod co jest nie tak? Będę wdzięczna;)
    https://ewa-waw.blogspot.com/

    OdpowiedzUsuń
  45. Menu jest ze strony profilki.pl? Czy z jakiejś innej?

    OdpowiedzUsuń
  46. Z innej. Nie pamiętam już gdzie ale znalazłam polecenia, jakie należy wstawić w szablon bloggera

    OdpowiedzUsuń
  47. Wygenerowane menu mają to do siebie, że przy takich "gadżetach" jak loader, będą nad loaderem a nie pod.

    OdpowiedzUsuń
  48. Hej, działają Wam jeszcze loadery? Bo mi się jakaś reklama wyświetla;/

    OdpowiedzUsuń
  49. Sprawdziłam, działają bez problemu, nie wiem skąd te reklamy mogły się wziąć. Jeśli szablon jest posrany z zagranicznej strony i jest to wersja darmowa to takie sytuacje mogą być.

    OdpowiedzUsuń
  50. www.kwietniowaaa.blogspot.com10 lipca 2017 03:03

    Właśnie mi też się coś zepsuło i musiałam usunąć loader:C

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona