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

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

    Доска почета

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