Новогодняя гирлянда с качающимися шариками в шапку 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 коммент.:

    Анютка
    Гончарова Анна Анатольевна
    Екатерина
    Ольга
    Unknown
    Оксана
    A_lena
    Renate
    Ирина
    Вера Любимова
    Любовь
    Justus
    Unknown
    Анонимно
    Любовь
    Justus
    Unknown
    Unknown
    Анонимно
    Максим Волченко
    Nataly
    Мария Алексеевна
    Justus
    Кулешова Татьяна Алексеевна
    Анонимно
    Olga Suerte
    Olga Suerte
    Вениамин
    Vera Melnyk
    Kefaloniagid
    Алина Солнечная
    Rina
    Unknown
    Паша
    Ламаш Наталія
    Unknown
    Justus
    Unknown
    Justus
    Unknown
    Оксана Александровна
    Unknown
    Unknown
    Justus
    Unknown
    Анонимно
    Justus
    Анонимно
    dashinamama2011
    Александр
    Татьяна
    Елена Сморжевская
    Unknown
    Библиотеки Аксая
    vera
    OLGA
    Unknown
    Ерофеева Александра Алексеевна и Покасова Светлана Владимировна
    Unknown
    блог Татьяны Коноваловой
    BVB-Russe
    Justus
    BVB-Russe
    BVB-Russe
    блог Татьяны Коноваловой
    Tanya
    Unknown
    Unknown
    Ocean
    Бібліотека - філіал № 4
    Ljudmila
    Justus
    Любов Василівна Пархомюк
    Justus
    Иннушка
    Unknown
    Надежда Волобуева
    Дитинство - щаслива пора
    Unknown
    Unknown
    Marina Petrova
    Justus
    Marina Petrova
    Marina Petrova
    Marina Petrova
    Unknown
    Unknown
    Ирина Лосева
    Unknown
    Иващенко Ольга Николаевна
    Alla Udod
    Alla Udod
    Тамара
    Тамара
    Тамара

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

    Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

    Доска почета

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