Новогодняя гирлянда с качающимися шариками в шапку Blogger, Блогспот


Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)

Я почти был уверен, что опубликовал лучшие украшения Рунета к Новому году, на Блогспот, Блоггер:


  • Виджет информер времени "До Нового года осталось" 
  • Снежинки и снежную пыль для блога
  • Новогодняя шапка блога Блогспот, Blogger.
  • Новогоднее поздравление  анимированного Деда Мороза
  • Праздничный салют, фейерверк на Блогспот, Blogger

  • Но заглянув на блог:
    http://delitant.ru/wordpress/kak-ukrasit-sajt-k-novomu-godu-2-krasivaya-girlyanda.html
    мне захотелось, установить такую же гирлянду у себя.
    Беда заключалась в том, что мануал автора очень сложный и мне пришлось, все переделывать на свой лад! От начального варианта остались только картинки.


    Добавил колокольчики по бокам, а вот шариков стало меньше. Из за них, слишком большой код получается.

    Устанавливается гирлянда очень просто.
    Дизайн - Добавить гаджет - HTML/JavaScript вставляется следующее:


    <style type="text/css">
     .st2 {

     border:3px solid #BBBBBB;opacity: 2.1;
     -webkit-animation: ring 18s 19s ease-in-out infinite;
     -webkit-transform-origin: 50% 14px;
     -moz-animation: ring 18s 19s ease-in-out infinite;
     -moz-transform-origin: 50% 14px;
     animation: ring 18s 19s ease-in-out infinite;
     transform-origin: 50% 14px;
    }

     @-webkit-keyframes ring {
     0% { -webkit-transform: rotateZ(0); }
     1%, 9% { -webkit-transform: rotateZ(30deg); }
     3% { -webkit-transform: rotateZ(-28deg); }
     5% { -webkit-transform: rotateZ(34deg); }
     7% { -webkit-transform: rotateZ(-32deg); }
     11% { -webkit-transform: rotateZ(-28deg); }
     13% { -webkit-transform: rotateZ(26deg); }
     15% { -webkit-transform: rotateZ(-24deg); }
     17% { -webkit-transform: rotateZ(22deg); }
     19% { -webkit-transform: rotateZ(-20deg); }
     21% { -webkit-transform: rotateZ(18deg); }
     23% { -webkit-transform: rotateZ(-16deg); }
     25% { -webkit-transform: rotateZ(14deg); }
     27% { -webkit-transform: rotateZ(-12deg); }
     29% { -webkit-transform: rotateZ(10deg); }
     31% { -webkit-transform: rotateZ(-8deg); }
     33% { -webkit-transform: rotateZ(6deg); }
     35% { -webkit-transform: rotateZ(-4deg); }
     37% { -webkit-transform: rotateZ(2deg); }
     39% { -webkit-transform: rotateZ(-1deg); }
     41% { -webkit-transform: rotateZ(1deg); }
     43% { -webkit-transform: rotateZ(0); }
     100% { -webkit-transform: rotateZ(0); }
    }

     @-moz-keyframes ring {
     0% { -moz-transform: rotate(0); }
     1%, 9% { -moz-transform: rotate(30deg); }
     3% { -moz-transform: rotate(-28deg); }
     5% { -moz-transform: rotate(34deg); }
     7% { -moz-transform: rotate(-32deg); }
     11% { -moz-transform: rotate(-28deg); }
     13% { -moz-transform: rotate(26deg); }
     15% { -moz-transform: rotate(-24deg); }
     17% { -moz-transform: rotate(22deg); }
     19% { -moz-transform: rotate(-20deg); }
     21% { -moz-transform: rotate(18deg); }
     23% { -moz-transform: rotate(-16deg); }
     25% { -moz-transform: rotate(14deg); }
     27% { -moz-transform: rotate(-12deg); }
     29% { -moz-transform: rotate(10deg); }
     31% { -moz-transform: rotate(-8deg); }
     33% { -moz-transform: rotate(6deg); }
     35% { -moz-transform: rotate(-4deg); }
     37% { -moz-transform: rotate(2deg); }
     39% { -moz-transform: rotate(-1deg); }
     41% { -moz-transform: rotate(1deg); }
     43% { -moz-transform: rotate(0); }
     100% { -moz-transform: rotate(0); }
    }

     @keyframes ring {
     0% { transform: rotate(0); }
     1%, 9% { transform: rotate(30deg); }
     3% { transform: rotate(-28deg); }
     5% { transform: rotate(34deg); }
     7% { transform: rotate(-32deg); }
     9% { transform: rotate(30deg); }
     11% { transform: rotate(-28deg); }
     13% { transform: rotate(26deg); }
     15% { transform: rotate(-24deg); }
     17% { transform: rotate(22deg); }
     19% { transform: rotate(-20deg); }
     21% { transform: rotate(18deg); }
     23% { transform: rotate(-16deg); }
     25% { transform: rotate(14deg); }
     27% { transform: rotate(-12deg); }
     29% { transform: rotate(10deg); }
     31% { transform: rotate(-8deg); }
     33% { transform: rotate(6deg); }
     35% { transform: rotate(-4deg); }
     37% { transform: rotate(2deg); }
     39% { transform: rotate(-1deg); }
     41% { transform: rotate(1deg); }
     43% { transform: rotate(0); }
     100% { transform: rotate(0); }



     </style>

     <div style="padding: 0px;">
    <img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;left:130px;border:none;z-index:9;"/></div><style type="text/css">
     .st1 {

     border:3px solid #BBBBBB;opacity: 2.1;
     -webkit-animation: ring 20s 19s ease-in-out infinite;
     -webkit-transform-origin: 50% 14px;
     -moz-animation: ring 20s 19s ease-in-out infinite;
     -moz-transform-origin: 50% 14px;
     animation: ring 20s 19s ease-in-out infinite;
     transform-origin: 50% 14px;
    }

     @-webkit-keyframes ring {
     0% { -webkit-transform: rotateZ(0); }
     1%, 9% { -webkit-transform: rotateZ(30deg); }
     3% { -webkit-transform: rotateZ(-28deg); }
     5% { -webkit-transform: rotateZ(34deg); }
     7% { -webkit-transform: rotateZ(-32deg); }
     11% { -webkit-transform: rotateZ(-28deg); }
     13% { -webkit-transform: rotateZ(26deg); }
     15% { -webkit-transform: rotateZ(-24deg); }
     17% { -webkit-transform: rotateZ(22deg); }
     19% { -webkit-transform: rotateZ(-20deg); }
     21% { -webkit-transform: rotateZ(18deg); }
     23% { -webkit-transform: rotateZ(-16deg); }
     25% { -webkit-transform: rotateZ(14deg); }
     27% { -webkit-transform: rotateZ(-12deg); }
     29% { -webkit-transform: rotateZ(10deg); }
     31% { -webkit-transform: rotateZ(-8deg); }
     33% { -webkit-transform: rotateZ(6deg); }
     35% { -webkit-transform: rotateZ(-4deg); }
     37% { -webkit-transform: rotateZ(2deg); }
     39% { -webkit-transform: rotateZ(-1deg); }
     41% { -webkit-transform: rotateZ(1deg); }
     43% { -webkit-transform: rotateZ(0); }
     100% { -webkit-transform: rotateZ(0); }
    }

     @-moz-keyframes ring {
     0% { -moz-transform: rotate(0); }
     1%, 9% { -moz-transform: rotate(30deg); }
     3% { -moz-transform: rotate(-28deg); }
     5% { -moz-transform: rotate(34deg); }
     7% { -moz-transform: rotate(-32deg); }
     11% { -moz-transform: rotate(-28deg); }
     13% { -moz-transform: rotate(26deg); }
     15% { -moz-transform: rotate(-24deg); }
     17% { -moz-transform: rotate(22deg); }
     19% { -moz-transform: rotate(-20deg); }
     21% { -moz-transform: rotate(18deg); }
     23% { -moz-transform: rotate(-16deg); }
     25% { -moz-transform: rotate(14deg); }
     27% { -moz-transform: rotate(-12deg); }
     29% { -moz-transform: rotate(10deg); }
     31% { -moz-transform: rotate(-8deg); }
     33% { -moz-transform: rotate(6deg); }
     35% { -moz-transform: rotate(-4deg); }
     37% { -moz-transform: rotate(2deg); }
     39% { -moz-transform: rotate(-1deg); }
     41% { -moz-transform: rotate(1deg); }
     43% { -moz-transform: rotate(0); }
     100% { -moz-transform: rotate(0); }
    }

     @keyframes ring {
     0% { transform: rotate(0); }
     1%, 9% { transform: rotate(30deg); }
     3% { transform: rotate(-28deg); }
     5% { transform: rotate(34deg); }
     7% { transform: rotate(-32deg); }
     9% { transform: rotate(30deg); }
     11% { transform: rotate(-28deg); }
     13% { transform: rotate(26deg); }
     15% { transform: rotate(-24deg); }
     17% { transform: rotate(22deg); }
     19% { transform: rotate(-20deg); }
     21% { transform: rotate(18deg); }
     23% { transform: rotate(-16deg); }
     25% { transform: rotate(14deg); }
     27% { transform: rotate(-12deg); }
     29% { transform: rotate(10deg); }
     31% { transform: rotate(-8deg); }
     33% { transform: rotate(6deg); }
     35% { transform: rotate(-4deg); }
     37% { transform: rotate(2deg); }
     39% { transform: rotate(-1deg); }
     41% { transform: rotate(1deg); }
     43% { transform: rotate(0); }
     100% { transform: rotate(0); }

     </style>

     <div style="padding: 0px;">
    <img class="st1" src="http://lovitour.com.ua/img/newyear/b-ball_n4.png" style="position:fixed; top: 0px;left:250px;border:none;z-index:6;"/></div><style type="text/css">
     .st {

     border:3px solid #BBBBBB;opacity: 2.1;
     -webkit-animation: ring 19s 19s ease-in-out infinite;
     -webkit-transform-origin: 50% 14px;
     -moz-animation: ring 19s 19s ease-in-out infinite;
     -moz-transform-origin: 50% 14px;
     animation: ring 19s 19s ease-in-out infinite;
     transform-origin: 50% 14px;
    }


     @-webkit-keyframes ring {
     0% { -webkit-transform: rotateZ(0); }
     1%, 9% { -webkit-transform: rotateZ(30deg); }
     3% { -webkit-transform: rotateZ(-28deg); }
     5% { -webkit-transform: rotateZ(34deg); }
     7% { -webkit-transform: rotateZ(-32deg); }
     11% { -webkit-transform: rotateZ(-28deg); }
     13% { -webkit-transform: rotateZ(26deg); }
     15% { -webkit-transform: rotateZ(-24deg); }
     17% { -webkit-transform: rotateZ(22deg); }
     19% { -webkit-transform: rotateZ(-20deg); }
     21% { -webkit-transform: rotateZ(18deg); }
     23% { -webkit-transform: rotateZ(-16deg); }
     25% { -webkit-transform: rotateZ(14deg); }
     27% { -webkit-transform: rotateZ(-12deg); }
     29% { -webkit-transform: rotateZ(10deg); }
     31% { -webkit-transform: rotateZ(-8deg); }
     33% { -webkit-transform: rotateZ(6deg); }
     35% { -webkit-transform: rotateZ(-4deg); }
     37% { -webkit-transform: rotateZ(2deg); }
     39% { -webkit-transform: rotateZ(-1deg); }
     41% { -webkit-transform: rotateZ(1deg); }
     43% { -webkit-transform: rotateZ(0); }
     100% { -webkit-transform: rotateZ(0); }
    }

     @-moz-keyframes ring {
     0% { -moz-transform: rotate(0); }
     1%, 9% { -moz-transform: rotate(30deg); }
     3% { -moz-transform: rotate(-28deg); }
     5% { -moz-transform: rotate(34deg); }
     7% { -moz-transform: rotate(-32deg); }
     11% { -moz-transform: rotate(-28deg); }
     13% { -moz-transform: rotate(26deg); }
     15% { -moz-transform: rotate(-24deg); }
     17% { -moz-transform: rotate(22deg); }
     19% { -moz-transform: rotate(-20deg); }
     21% { -moz-transform: rotate(18deg); }
     23% { -moz-transform: rotate(-16deg); }
     25% { -moz-transform: rotate(14deg); }
     27% { -moz-transform: rotate(-12deg); }
     29% { -moz-transform: rotate(10deg); }
     31% { -moz-transform: rotate(-8deg); }
     33% { -moz-transform: rotate(6deg); }
     35% { -moz-transform: rotate(-4deg); }
     37% { -moz-transform: rotate(2deg); }
     39% { -moz-transform: rotate(-1deg); }
     41% { -moz-transform: rotate(1deg); }
     43% { -moz-transform: rotate(0); }
     100% { -moz-transform: rotate(0); }
    }

     @keyframes ring {
     0% { transform: rotate(0); }
     1%, 9% { transform: rotate(30deg); }
     3% { transform: rotate(-28deg); }
     5% { transform: rotate(34deg); }
     7% { transform: rotate(-32deg); }
     9% { transform: rotate(30deg); }
     11% { transform: rotate(-28deg); }
     13% { transform: rotate(26deg); }
     15% { transform: rotate(-24deg); }
     17% { transform: rotate(22deg); }
     19% { transform: rotate(-20deg); }
     21% { transform: rotate(18deg); }
     23% { transform: rotate(-16deg); }
     25% { transform: rotate(14deg); }
     27% { transform: rotate(-12deg); }
     29% { transform: rotate(10deg); }
     31% { transform: rotate(-8deg); }
     33% { transform: rotate(6deg); }
     35% { transform: rotate(-4deg); }
     37% { transform: rotate(2deg); }
     39% { transform: rotate(-1deg); }
     41% { transform: rotate(1deg); }
     43% { transform: rotate(0); }
     100% { transform: rotate(0); }


     </style>

     <div style="padding: 0px;">
    <img class="st1" src="http://lovitour.com.ua/img/newyear/b-ball_n4.png" style="position:fixed; top: 0px;right:310px;border:none;z-index:5;"/></div>
    <img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:920px;border:none;z-index:5;"/>
    <img class="st1"  src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;right:770px;border:none;z-index:7;"/>
    <img class="st"  src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:620px;border:none;z-index:9;"/>
    <img class="st"  src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;right:470px;border:none;z-index:9;"/>
    <img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:170px;border:none;z-index:9;"/>
    <img src="http://lovitour.com.ua/img/newyear/christmas-icon.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:9;"width="140"/>
    <img src="http://lovitour.com.ua/img/newyear/212012.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
    <img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:1;"/>
    <img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:210px;border:none;z-index:5;"/>
    <img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:510px;border:none;z-index:5;"/>
    <img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:810px;border:none;z-index:5;"/>
    <img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:1110px;border:none;z-index:5;"/>

    © blogodel.com

    Не надо боятся, что код очень  большой. Как видите, у меня все работает!

    95 коммент.:

    Анютка
    Анна Анатольевна Гончарова
    Катерина
    Ольга Ватутина
    Софья Данилова
    Оксана
    A_lena
    Renate
    Ирина
    Вера Любимова
    Любовь
    Justus
    Sapnis
    Анонимный
    Любовь
    Justus
    Евгений Паваротти-Павлов
    Евгений Паваротти-Павлов
    Lanvin
    Максим Волченко
    Nataly
    Мария Алексеевна
    Justus
    Кулешова Татьяна Алексеевна
    Анонимный
    Olga Suerte
    Olga Suerte
    Ерин Вениамин
    Vera M
    ОЛЕНА САВИЦКАЯ
    Алина Солнечная
    Rina (butterfly)
    Николай Калашников
    Паша
    Ламаш Наталія
    Татьяна Субботина
    Justus
    Татьяна Субботина
    Justus
    Татьяна Субботина
    Оксана Александровна
    Олеся Николаевна Яремчук
    Олеся Николаевна Яремчук
    Justus
    Юлия Челнакова
    voron7477
    Justus
    voron7477
    Ольга Панина
    Александр
    Татьяна Терентьева
    Елена Сморжевская
    Жаркова Людмила Владимировна
    Ефимия Бабурина
    vera
    Ольга Ананьева
    Hash Coins
    Александра Ерофеева
    Наталья Орлова
    блог Татьяны Коноваловой
    BVB-Russe
    Justus
    BVB-Russe
    BVB-Russe
    блог Татьяны Коноваловой
    Tanya
    Оксана Емельянова
    Оксана Емельянова
    Oxa
    Бібліобджілка Житомир
    Ljudmila Romanova
    Justus
    parhomiuk
    Justus
    Innushka Lazutina
    Руслан Ратушняк
    Надежда Волобуева
    Галина Тарасенко
    Ольга Никитина
    Ольга Никитина
    Марина Петрова
    Justus
    Марина Петрова
    Марина Петрова
    Марина Петрова
    L Babakulov
    L Babakulov
    Ирина Лосева
    Катерина Озолиньш
    Ольга Николаевна Иващенко
    Алла Удод
    Алла Удод
    Тамара Косован
    Тамара Косован
    Тамара Косован

    Отправить комментарий

    Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

    Доска почета

    Плюсани блог!