Вращающийся баннер: интересное решение

Здравствуйте, дорогие читатели и гости сайта «Тестируем шаблон». Рада нашей новой встрече на блоге.

Сегодня мы вновь вернемся к теме  самодельных  баннеров  на блоге, но сегодняшний баннер имеет одну особенность: он умеет вращаться, что делает его более заметным и достаточно привлекательным. Сделать его несложно пользуясь готовой формой HTML кода.

Для чего мы используем баннер на блоге? Во-первых, можем привлечь внимание к избранным статьям на сайте, во вторых сделать красивую ссылку на другой  свой ресурс, а также мы уже с помощью самодельного баннера  сделали красивый виджет- твиттер для блога и замечательные рубрики в виде кнопочек. 

Сегодня мы поговорим просто о разновидности баннера, но функции он может выполнять все выше перечисленные.

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>
<center><div id=»social»>
<!—Start  Icon—>
<a title=»Подготовка к Новому году началась. А ты готов?» href=»http://test-shablon.ru/podgotovka-k-novomu-godu-podvodim-itogi/» target=»_blank»>
<img border=»0″ src=»http://test-shablon.ru/wp-content/uploads/2012/08/Без-имени-1.gif» style=»margin-right:1px;» alt=»Icon»/></a>
<!—End  Icon—></center>

Синим выделена та часть кода, которая отвечает за вращение баннера, и я ее не редактирую, дабы не повредить «механизм»  Wink

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

Розовым выделен адрес, куда перейдет читатель при переходе на баннер, в данном случае адрес статьи.

Коричневым выделен адрес изображения, которым мы пользуемся для баннера. Находим адрес согласно картинки ниже (синим выделен на фото как раз адрес картинки).

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

Скопировать 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>
 <center><div id="social">
 <!--Start Icon-->
 <a title="Подготовка к Новому году началась.А ты готов?" href="http://test-shablon.ru/podgotovka-k-novomu-godu-podvodim-itogi/" target="_blank">
 <img border="0" src="адрес Вашей картинки" style="margin-right:1px;" alt="Icon"/></a>
 <!--End Icon--> </center>

Если вы внимательно смотрели 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>
<center><div id=»social»>
<!—Start Bkontakte Icon—>
<a rel=»nofollow» title=»Я в Вконтакте-)» href=»http://vk.com/id147374890″ target=»_blank»>
<img border=»0″ src=»http://brychewa.ru/wp-content/uploads/2011/09/iconca.gif» style=»margin-right:1px;» alt=»Icon»/></a>
<!—End Bkontakte Icon—>
<!—Start Facebook Icon—>
<a rel=»nofollow» title=»Facebook» href=»http://www.facebook.com/yuliya.brychewa» target=»_blank»>
<img border=»0″ src=»http://test-shablon.ru/wp-content/uploads/2012/08/facebook.png» style=»margin-right:1px;» alt=»Icon»/></a>
<!—End Facebook Icon—>
<!—Start Twitter Icon—>
<a rel=»nofollow» title=»Twitter» href=»https://twitter.com/brychewa/» target=»_blank»>
<img border=»0″ src=»http://test-shablon.ru/wp-content/uploads/2012/08/twitter-2.png» style=»margin-right:1px;» alt=»Icon»/></a>
<!—End Twitter Icon—>
<!—Start Google+ Icon—>
<a title=»Google+» rel=»nofollow» href=»https://plus.google.com/u/0/116550986939362841963/posts» target=»_blank»>
<img style=»margin-right:1px;» src=»http://test-shablon.ru/wp-content/uploads/2012/08/google-1.png»/></a>
<!—End Google+ Icon—>
</center>

1) первым синим выделен код, отвечающий за вращение,

2)затем идет черным шрифтом информация относящаяся к кнопке Вконтакте. Здесь по аналогии с первым рассмотренным баннером, текст который виден при наведении мышкой на кнопку, затем адрес вашей страницы ВКонтакте и адрес картинки -изображения на вашем блоге.

3)Вторым синим шрифтом выделена информация относящаяся к кнопке  Facebook.

4) затем черным шрифтом информация относящаяся к кнопке Twitter.

5) и третье выделенное синим -информация относящаяся к кнопке Google+.

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

Размеры изображений для такого баннера лучше использовать 45*45 пикселей. Если у вас не получится вращения в сайтбаре, сначала проверьте данный код в черновике статьи, возможно это именно из-за размеров картинок. (У меня так было, пока я не установила картинки размером 45*45)  Надеюсь моими адресами картинок вы пользоваться не будете, так как я очень люблю экспериментировать и могу удалить свои изображения в любой момент, и у вас они просто исчезнут из виджета. ;-)

Скопировать код-образец  для баннера с четырьмя социальными кнопками можно из окошечка ниже

<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>
 <center><div id="social">
 <!--Start Bkontakte Icon-->
 <a rel="nofollow" title="Я в Вконтакте-)" href="http://vk.com/id147374890" target="_blank">
 <img border="0" src="адрес Вашей картинки" style="margin-right:1px;" alt="Icon"/></a>
 <!--End Bkontakte Icon-->
 <!--Start Facebook Icon-->
 <a rel="nofollow" title="Facebook" href="http://www.facebook.com/yuliya.brychewa" target="_blank">
 <img border="0" src="адрес Вашей картинки" style="margin-right:1px;" alt="Icon"/></a>
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a rel="nofollow" title="Twitter" href="https://twitter.com/brychewa/" target="_blank">
 <img border="0" src="адрес Вашей картинки" style="margin-right:1px;" alt="Icon"/></a>
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a title="Google+" rel="nofollow" href="https://plus.google.com/u/0/116550986939362841963/posts" target="_blank">
 <img style="margin-right:1px;" src="адрес Вашей картинки"/></a>
 <!--End Google+ Icon-->
 </center>

Надеюсь, что вращающийся баннер на вашем блоге добавит своеобразный шарм и колорит, а насколько изображений он будет, зависит только от вашей фантазии. О интересных находках для  дизайна блога  мы поговорим в следующих статьях рубрики. До новых встреч, с вами была Юлия.

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))

Метки: . Закладка Постоянная ссылка.

66 комментариев: Вращающийся баннер: интересное решение

  1. Татьяна пишет:

    Как же красиво на вашем сайте! Уже новогоднее настроение. Добавляю его в закладки.

    • Юлия пишет:

      Татьяна, у нас одинаковые шаблоны на сайтах, так что присоединяйтесь к новогоднему настроению и украшениям :bye: ;-)

  2. Татьяна пишет:

    Как у вас красиво! Спасибо за полезные практические советы. Надо будет попробовать такой баннер сделать. Cool

    Пользуясь случаем приглашаю вас прочитать и высказать свое мнение о моей идее. Please

  3. Ольга пишет:

    Какой полезный сайт!! Спасибо! Буду пользоваться:-)

  4. Анна пишет:

    Юлия, доброго вам времени суток! Вы, как всгда, НА ВЫСОТЕ!!! Не успела ещё сделать предыдущее, как у вас уже появилась новая фишка блога.СПАСИБО!!! :rose: Очаровательная фишка!!!! Буду разбираться, чтобы использовать. Юлечка, а вы могли бы написать статью о том, как поставить баннер( или это слайдер называется, наверное, правильно), в котором меняются картинки. У вас это ваши шаблоны. Только картинки должны меняться быстрее, конечно. Я так понимаю, что их можно выставить в коде, наверное.Удачи вам!!! Roses-are-red

  5. Елена пишет:

    А у меня сегодня сломался компик. Цельный день восстанавливала. И еще не все восстановила I-see-stars

  6. Анна пишет:

    Юлечка, ещё один вопрос: как вы пишете на картинке название вашего блога? Это сложно выполнить? Спасибо.

  7. Валерий пишет:

    Кстате, да и баннеры и не только можно закрутить, тем более НГ на носу:-D

  8. Надежда пишет:

    Спасибо,Юля.Очень интересная рассылка,с ссылками на такие замечательные статьи. Очень удобно теперь из письма попадать прям на эти статьи.

  9. Надежда пишет:

    Хорошо,Юля я сейчас переделаю изображения.Адреса я уже свои поставила и сделала кнопку Я в Одноклассниках-заходи.

  10. Надежда пишет:

    Хорошо,Юля.Картинки я переделаю,а адреса я уже свои поставила и сделала кнопку Я в Одноклассниках-заходи.

  11. Larisenok пишет:

    ты такая умничка — я вот читаю и понимаю, что наверное я сама не справлюсь

  12. Евгения пишет:

    Мне очень понравилась идея вращающегося баннера… нужно будет подумать и сделать что-нибудь подобное и у себя… Спасибо!!!

  13. Irina пишет:

    Ну за тобой не успеть. Только разберусь с чем-то одним. А тут новая конфетка!
    Юль! Ты не знаешь как убирать ссылки на фото, если они на другом ресурсе?

  14. mrs.interesno пишет:

    Ну прикольный банер.
    Нравится мне все это безобразие с кнопочками вращающимися. :good:
    Как бы еще ручки свои на это навострить.
    Ничего последнее время не успеваю.

    Юля, поражаюсь твоей работоспособности.
    Ведешь столько блогов, так у тебя еще и ребятней куча хлопот.

    • Юлия пишет:

      Беата, времени и правда маловато, но ведь огорода-то ведь сейчас нет, значит надо успевать :yes:

  15. Галина пишет:

    Юля, ну и выдумщица ты по части украшений для блога! Когда только успеваешь и новые плагины протестировать, и статью написать, и в гости сходить! У меня как-то совсем не получается все это совместить в одно целое. :cry:

    • Юлия пишет:

      У меня тоже очень сложно все это совмещается, особенно в гости сходить, получается редко и только к близким друзьям Who-s-the-man

  16. Светлана пишет:

    Все, что касается кодов, для меня темный лес. Нет, вроде все понятно, но я обязательно где-нибудь в чем-нибудь накосячу. А банер вращающийся- это здорово!

  17. razbirishka пишет:

    Юля, а как это повлияло на скорость загрузки? Не смотрели еще? Все-таки не у всех 15-50 мегабит.Некоторые еще на модемах сидят. Или нормально грузится?

  18. Юлия пишет:

    Удивляюсь, как просто и понятно можно объяснить такие непростые вещи. У меня технические вопрося всегда вызывают затруднения.

  19. Юлия пишет:

    Извините, хотела сказать вопросы.:)

  20. Анатолий. пишет:

    О, Новым годом запахло! красиво как у тебя!
    Юль, я снова не могу ссылочки на твои вторые сайты найти… они тут на блоге есть?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)