Качающаяся картинка, как украшение к празднику для блога на Blogger, Блогспот!


Фавикон у Blogger Пост (в основном) для пользователей:

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


Сегодня я предлагаю вам очень простое и вместе с тем эффективное украшение, которое сможет поставить любой, даже новичок. Это праздничная открытка которая качается и увеличивается путем наведения курсора. Как это выглядит вы можете посмотреть на сайтбаре (боковой панели блога).
 
Итак приступим к делу! Скрипт размещается благодаря гаджету HTML/JavaScript. Для этого проследуйте Дизайн > Добавить гаджет и после того, как вы нажали добавить гаджет, выбирайте рубрику - HTML/JavaScript. В открывшееся окно, вставляете скопированный ниже код и жмете сохранить.
 
 
На том месте,  где красная маркировка,  можете всавить урл. (адрес) любой картинки, а размер можно регулировать, там где зеленая маркировка.
 

<div dir="ltr" style="text-align: left;" trbidi="on">


<style type="text/css">
 .st {
 width:150px;
 border:3px solid #BBBBBB;opacity: 2.1;
 -webkit-animation: ring 68s 9s ease-in-out infinite;
 -webkit-transform-origin: 50% 14px;
 -moz-animation: ring 68s 9s ease-in-out infinite;
 -moz-transform-origin: 50% 14px;
 animation: ring 68s 9s ease-in-out infinite;
 transform-origin: 50% 14px;
}


@-webkit-keyframes ring {
 0% { -webkit-transform: rotateZ(0); }
 1% { -webkit-transform: rotateZ(30deg); }
 3% { -webkit-transform: rotateZ(-28deg); }
 5% { -webkit-transform: rotateZ(34deg); }
 7% { -webkit-transform: rotateZ(-32deg); }
 9% { -webkit-transform: rotateZ(30deg); }
 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); }
 }
 .st:hover {
 width:400px;
 margin-bottom:-06px;
 }

</style>
<left></left>
<div style="padding: 0px;">
<img class="st" src="http://s017.radikal.ru/i440/1202/4c/0b91309b9756.gif" title="название#1" /></div>
</div>
 
Для тех, кто просто желает поместить открытку на свой сайт или, у кого блоги не на блогспот (других платформах) предлагаю коды. Картинки размером в два раза больше и если желаете точно такой же размер, как опубликовано ниже, обратитесь в комментариях!
Анимированные фотографии к 8 марта. Кликните на эту строку, что бы увидеть открытки!
 

<a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка2.gif" /></a>
 
<a href='http://games.businesskey.com.ua/articles32.html'><img src="http://games.businesskey.com.ua/images/открытка7.gif" /></a>

<a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка3.gif" /></a>

<a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка4.gif" /></a>    
<a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка5.gif" /></a>  
<a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка6.gif" /></a>  







4 коммент.:

Юлия Костюк
Justus
Носова Е.Ю.
Алекс

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

Можно применять теги: <b></b><i></i><br />
<br />


Доска почета

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