Анимационное украшение для сайта - блога при загрузке страницы.

Blogger - blogspot и другие платформы - устанавливаем на сайт - блог анимацию всплывающую при загрузке страниц.

Доброго времени суток дорогие посетители нашего сайта. Одни из самых важных разделов для работы с blogger мы с вами проштудировали. Теперь можно перейти и к полезному и в тоже время красивому. Наверняка вы порой замечали, что при заходе на некоторые сайты - блоги перед их загрузкой на вашем мониторе появлялась небольшая анимация и длилась она ровно столько, сколько нужно сайту - блогу, чтобы полностью загрузить открываемую страницу. То есть пока все его компоненты не подгрузятся перед вами будет извиваться определенный анимационный объект. Понятно, что сделано это не только для красоты, но и для того, чтобы посетитель видел перед собой сразу все компоненты сайты, а не по отдельности каждый из них. К тому же подобный виджет показывает, что сайт - блог у вас более чем профессиональный. Чем лучше дизайн, тем больше доверия.

Пример анимации можно увидеть на нашем тестовом блоге. Анимация в виде вращающегося кубика-рубика. 

Для установки виджета preloader вам нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:

.loader {
background-color: #fff;
background-image: url(http://2.bp.blogspot.com/-oPGZaNs5sVA/VjMsQ7sIZQI/AAAAAAAAA9w/q9k-wOikJQI/s1600/preloader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}

Выделенный участок кода это ссылка на анимационное изображение. Вы можете изменить его на следующие варианты:

 http://1.bp.blogspot.com/-2IKobKg7qTg/VjtC2zU7aQI/AAAAAAAAiBU/BTWeYS66OLk/s1600/preloader%2B%25285%2529.gif

 
http://2.bp.blogspot.com/-u2ibzymo5Jo/VjtDPbaP07I/AAAAAAAAiDI/DD0ROOQIqgY/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif

http://2.bp.blogspot.com/-7SUv4u8eRPY/VjtDPeS47-I/AAAAAAAAiCM/QwTzMPfPwaM/s1600/042413_square_loader%2B%2%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://2.bp.blogspot.com/-sMcOp-KyYUI/VjtDPR6f1VI/AAAAAAAAiBs/AUGeDnAbWmI/s1600/1338614bf6bda949333801c917d9e988.gif

http://4.bp.blogspot.com/-FxdtsBfSXx4/VjtDP23S_fI/AAAAAAAAiC0/AuebzQdPd3Y/s1600/9080607321ab98fa3e70dd24b2513a20%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://2.bp.blogspot.com/-P5otrHI1RXA/VjtDQyzPqII/AAAAAAAAiCs/HcVcf4H6k34/s1600/animation3%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://1.bp.blogspot.com/-hOKwIARc0og/VjtDRH4QLmI/AAAAAAAAiCw/Ys1vMVHy5F0/s1600/e95a921638100a6e21b3143002d05a0f%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg

http://2.bp.blogspot.com/-byt7TPCRU0g/VjtDR9PKTpI/AAAAAAAAiD4/iuznV3qDmNM/s1600/free-preloaders1.gif

http://2.bp.blogspot.com/-j4pZvsYffXg/VjtDSWqy-6I/AAAAAAAAiEY/vVa-t8Qbdkk/s1600/gear.gif

http://1.bp.blogspot.com/-1IaURx_Pr9o/VjtDSdPGI-I/AAAAAAAAiD0/43DI6vgPb08/s1600/loading%2B%25281%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://1.bp.blogspot.com/-K_flPsge4v4/VjtDTW8glKI/AAAAAAAAiEs/Ws13-xYpgd4/s1600/loading%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://4.bp.blogspot.com/-3-2lmFUorVA/VjtDTap1tpI/AAAAAAAAiEc/yebArfNyXVc/s1600/loading%2B%25283%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://4.bp.blogspot.com/-TVcBl1kUwZU/VjtDTpJcYPI/AAAAAAAAiEk/xUdtLa22MT0/s1600/logo_dark_nobg%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://2.bp.blogspot.com/-mi47tJm0jZ8/VjtDUEcPRxI/AAAAAAAAiEA/lbnR-JT87GQ/s1600/preloader%2B%25281%2529.gif

http://3.bp.blogspot.com/-6zmnUH8VwGA/VjtDUDJURVI/AAAAAAAAiEU/QSt4tzWhBlM/s1600/preloader%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://1.bp.blogspot.com/-00HPLuClFMs/VjtDUru56wI/AAAAAAAAiEQ/A3Qta1QFFw4/s1600/preloader%2B%25284%2529.gif

http://1.bp.blogspot.com/-1DAaJ_s8oxs/VjtDQahIrEI/AAAAAAAAiEw/sofg8c4DlJA/s1600/Preloader_8%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://2.bp.blogspot.com/-2-xhiuaRtmA/VjtDQKYc1ZI/AAAAAAAAiCc/Tum9Q_9JG08/s1600/Preloader_10%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif




Дальше находим код <body> и после него вставляем следующий код:

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='loader'/>
  </b:if>

Если хотите, чтобы виджет работал на всех страницах, а не только на главной, в таком случае не копируйте код выделенный оранжевым цветом.

И завершающий этап, ищем код </body> перед которым пристраиваем следующий код:

<script type='text/javascript'>//<![CDATA[

$(window).load(function() {

    fixSizes();
    $(".loader").delay(1000).fadeOut('slow');

});


$(window).resize(function() {

    fixSizes();

});

function fixSizes() {

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    $(".fullscreen").css('height', windowHeight);
    var c = $(".demo .variation").length;

    if (windowWidth > 768) {

        $(".demo .variation").css('width', 100/c + '%');
        $(".demo .variation").css('height', windowHeight);

    } else {

        $(".demo .variation").css('height', windowHeight/c + 'px');
        $(".demo .variation").css('width', windowWidth);

    }

    $(".demo .variation .inner").each(function() {
        $(this).css('margin-top', ($(".demo .variation").height() - $(this).height()) / 2);
    });
}
 
//]]>
</script>

Сохраняем шаблон и проверяем, как работает ваш новый виджет.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Анимационное украшение для сайта - блога при загрузке страницы.
4/ 5
Oleh