Новогоднее украшение для блога!

     Привет! Этот пост будет кардинально отличаться от всех опубликованных ранее, и тема у него совершенно другая, которая абсолютно никак не связана с биржей, форексом, инвестированием, дневником трейдера и т.д. 

   Ведь скоро праздник!!!Скоро Новый Год!!! Вечером мне пришла идея  украсить свой сайт на платформе Blogspot, разбавить однообразие отчетов и графиков чем то новым и оригинальным. Тем самым, прибавить праздничного настроения себе и читателям блога !!! Как же установить красивую новогоднюю гирлянду в шапке сайта, с покачивающимися шариками? На самом деле все очень и очень просто)). Вот этим я и поделюсь сегодня с вами....

 
Чуть не забыл, этой публикацией я открываю новую рубрику на сайте, которая будет посвящена Blogspot. В  свободное от торговли и всяких забот время, буду делиться с вами всякими полезными кодами и секретами, которые помогли мне и надеюсь помогут кому то из Вас, сделать свой блог лучше и привлекательней.....

   Итак, в поисках украшений,на одном из сайтов которые у меня в закладках, я наткнулся на вот такую красивую гирлянду, которую можно установить в шапку блога на Blogger .Как раз то что мне было нужно)))По бокам  колокольчики, а в центре покачивающиеся шарики... Юстус спасибо за доработку и адаптацию кода с Wordpress!!!! Получилось очень здорово!!!

   В установке  нет никаких сложностей, и я надеюсь вы уже научились устанавливать код в свой блог  Дизайн>Добавить гаджет>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;"/>

  Это был первый пост на тему всяких  доработок, вкусностей и красивостей для Blogger/Блогспот. Надеюсь Вам понравилось и Вы заглянете еще не один раз. Лучшей благодарностью будет если Вы нажмете на кнопочки соцсетей!

Ну а у меня все.Удачи.Всем пока!!!