Мои читатели могли обратить внимание, что на моих блогах появилась строка анимированных банеров под названием "Мои проекты".
Дело в том, что имея несколько блогов, я всегда была озадачена вопросом как ненавязчиво рассказать об этом своим читателям, с целью привлечь их внимание в новым проектам. И вот результат моего эксперимента вы можете видеть под заголовком. Если кого заинтересовала эта идея публикую код. Все банеры кликабельны и ведут на соответствующие блоги.
Код для вставки в блог в виде гаджета HTML/JavaScript
(текст выделенный таким шрифтом нужно заменить на ваше значение)
<td bgcolor=#ffffff width="200"> <p align=center style="margin-left: 5px; margin-right: 5px;"> <font face=arial size=3 color=#303030><b> Название, например, Мои проекты</b></font></p> </td> <td bgcolor=#ffffff> <center> <marquee width="520" height="100" bgcolor="#D4FFAA" vspace="1" hspace="1" direction="left" behavior="alternate" scrollamount="3" > <a rel=nofollow" href="адрес куда ссылается баннер №1 " target=_blank><img src="адрес картинки № 1" border="0" width="240" height="100" /></a> <a rel=nofollow" href="адрес куда ссылается баннер №2 " target=_blank><img src="адрес картинки № 2" border="0" width="240" height="100" /></a> <a rel=nofollow" href="адрес куда ссылается баннер №3 " target=_blank><img src="адрес картинки № 3" border="0" width="240" height="100" /></a> <a rel=nofollow" href="адрес куда ссылается баннер №4 " target=_blank><img src="адрес картинки № 4" border="0" width="240" height="100" /></a> </marquee> </center> </td> |
Как вы уже наверное догадались, что прежде чем разместить такой код у себя в блоге нужно подготовить банеры (картинки) к каждому проекту. Сделать это можно практически в любом редакторе изображений, с которым вы наверняка знакомы. Единственное условие- их размеры должны быть равны. В моем примере размер каждого банера равен 240Х100. Затем банер подгружается на сервис хранения картинок и адрес ссылки вставляется в код.
Также обратите внимание на строку:
<marquee width="520" height="100" bgcolor="#D4FFAA" vspace="1" hspace="1" direction="left" behavior="alternate" scrollamount="3" >
где 520 - это длина всей конструкции, а 100 ширина, равная ширине банеров. Длину конструкции можно изменить на ваше усмотрение.
rel="nofollow" вставляется в код, если вы не желаете, чтобы ссылка была индексируемой.
Подобную идею можно реализовать не только со своими проектами, но и с банерами сторонних ресурсов. Ведь благодаря такой конструкции можно кардинально уменьшить пространство, занимаемое под рекламные банеры, и привлечь внимание читателей.
6 коммент.:
Лиля, спасибо огромное. Как всегда все очень подробно и понятно. Не удивлюсь, если многие блоги скоро будут украшены такими слайдами.
Мария спасибо за отзыв.
Это здорово, что кликая на банер, попадаешь на определенный рекламируемый сайт, но мне не очень нравится, что картинки не идут одна за другой, а приходят и уходят, оставляя на какое то мгновение просто зеленый цвет в банере. Другое дело, если бы картинки шли одна за другой без остановки и никуда не пропадая, например, мне очень нравится один сайт, где можно сделать себе слайд шоу или банер, только там, кликая на картинку, попадаешь на страницу этого банера, а не рекламируемого сайта. Так что там тоже свои минусы в этом плане. А про подобный банер я рассказывала здесь seozametka.blogspot.com/2011/09/blog-post.html .
Инна спасибо за ссылку. Только почему почему вы говорите о зеленом цвете, у меня его не видно и банеры идут друг за другом. Или вы о других банерах?
Здравствуйте, Лиля. Раньше действительно один банер был зеленого цвета, а сейчас все как надо. Мне очень нравится, и сегодня я сделала подобный банер и рассказала об этом в сеозаметке.
Инна, спасибо.
Отправить комментарий