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

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>

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


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Анимационное украшение для сайта - блога при загрузке страницы.
Анимационное украшение для сайта - блога при загрузке страницы.
Добавляем на сайт-блог анимации для украшения. Анимация при загрузке страниц сайта - блога.
http://2.bp.blogspot.com/-iXyaIm2Ta6k/VjtJY0uW8yI/AAAAAAAAiE8/VyHSD4IWH3o/s640/%25D0%2590%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25B0%25D1%2586%25D0%25B8%25D0%25BE%25D0%25BD%25D0%25BD%25D0%25BE%25D0%25B5%2B%25D1%2583%25D0%25BA%25D1%2580%25D0%25B0%25D1%2588%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0%2B%25D0%25B2%25D0%25BE%2B%25D0%25B2%25D1%2580%25D0%25B5%25D0%25BC%25D1%258F%2B%25D0%25B7%25D0%25B0%25D0%25B3%25D1%2580%25D1%2583%25D0%25B7%25D0%25BA%25D0%25B8%2B%25D1%2581%25D1%2582%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B8%25D1%2586%25D1%258B..png
http://2.bp.blogspot.com/-iXyaIm2Ta6k/VjtJY0uW8yI/AAAAAAAAiE8/VyHSD4IWH3o/s72-c/%25D0%2590%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25B0%25D1%2586%25D0%25B8%25D0%25BE%25D0%25BD%25D0%25BD%25D0%25BE%25D0%25B5%2B%25D1%2583%25D0%25BA%25D1%2580%25D0%25B0%25D1%2588%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0%2B%25D0%25B2%25D0%25BE%2B%25D0%25B2%25D1%2580%25D0%25B5%25D0%25BC%25D1%258F%2B%25D0%25B7%25D0%25B0%25D0%25B3%25D1%2580%25D1%2583%25D0%25B7%25D0%25BA%25D0%25B8%2B%25D1%2581%25D1%2582%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B8%25D1%2586%25D1%258B..png
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/11/animacionnoe-ukrashenie-dlja-sajta-bloga.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/11/animacionnoe-ukrashenie-dlja-sajta-bloga.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy