пятница, 14 февраля 2014 г.

Крутящийся баннер


И опять порылась по сусекам интернета и предоставляю ещё один пост на тему создания баннеров.
И не просто баннера, а - Крутящийся баннер на сайт.
Только сегодня мы не будем устанавливать плагины, а воспользуемся готовым HTML кодом, чуточку подправим.
Прелесть данного баннера, при наведении на него курсором баннер начинает вращаться.
Представьте, читатель может сразу и не обратит внимания на картинку, а если на неё попадет курсор, то точно заметит. Где можно установить  крутящийся баннер на сайт.
Этот баннер можно установить и в сайдбар, в статье в любом месте.
Сам код выглядит так:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img
{ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>

 <p> <center>
<div id="social">
<!--Start Icon--><br />
<a title="Жми , узнай подробности" href="http://gala93.ruelsoft.info/res/" target="_blank"><br />
<img border="0" src="http://onlainblog.ru/wp-content/uploads/2013/06/2013-06-18_152558-e1371554888204.jpg" style="margin-right:1px;" alt="Icon"/></a><br />
<!--End Icon--> </center></p>
Теперь внимание!
Даже если вы не знаете html языка, уверяю Вас, это будет несложно. Я не зря разделила код по цветам, так будет проще и понятней, что за что отвечает.

Голубой цвет – это код, отвечающий за вращение, его не трогаем, оставляем без изменений.

Коричневая фраза – появляется при наведении курсора на картинку. Здесь пишем фразу, которая подтолкнет вашего читателя кликнуть по баннеру.

Красная ссылка – куда вы хотите перевести вашего читателя.

Зеленная ссылка – на картинку.

Скопируйте код себе в блокнот, и аккуратненько исправьте ссылки и фразу.

И получай:





Комментариев нет:

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