Jak wstawić loader w bloggerze

sobota, 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;
}

Jeśli spodobał Ci się wpis, przekaż go dalej :)