Привет, друзья. Если вы работаете с несколькими партнёрскими программами, то для размещения баннеров этих программ необходимо выискивать место в боковой панели. Уместным будет сделать простой слайдер для этого размером 125 на 125. Где есть возможность разместить неограниченное количество баннеров. При нажатии на который, пользователь переходит на саму партнёрку.Такой слайдер подойдёт и для рукодельных блогов, где девчонки очень часто постоянно устраивают всякие конфетки и розыгрыши. Может стать прекрасной альтернативой для замены гаджета список чтения. Будут в виде информера отображаться баннеры ваших любимых блогов.
Или сделать просто такую нехитрую галерею изображений. Подумайте.
В блогере с установкой слайдера сложного ничего нет. Код совершенно простой. Устанавливается в гаджет HTML/JavaScript. Используем свойство marquee direction, которое и определяет движение содержимого. Немного ещё добавим стилей.
Рабочий вариант можно увидеть на тестовом блоге вверху на боковой панели.
Сначала скопируйте код, приведённый ниже в блокнот.
<div align="center">
<marquee direction="up" scrollamount="3" style="background- text-align: center;
width:125px;height:125px;border:1px solid #000000;padding:3px"
onmouseover="this.scrollAmount='0'" onmouseout="this.scrollAmount='2'">
<a href=' Адрес куда должна вести ссылка' target='_blank' title='название '><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
<a href=' Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src="путь к картинки (адрес изображения) " width="125" /></a>
<a href='Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
</marquee>
</div>
В коде я установила ширину и высоту всего блока в 125 пикселей. Можно задать любую желаемую.<marquee direction="up" scrollamount="3" style="background- text-align: center;
width:125px;height:125px;border:1px solid #000000;padding:3px"
onmouseover="this.scrollAmount='0'" onmouseout="this.scrollAmount='2'">
<a href=' Адрес куда должна вести ссылка' target='_blank' title='название '><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
<a href=' Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src="путь к картинки (адрес изображения) " width="125" /></a>
<a href='Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
</marquee>
</div>
Свойство border:1px solid #000000; отвечает за ширину и цвет рамки. В строку, выделенную синим цветом, вставляйте адреса, куда должна вести ссылка. И красный цвет это адрес изображения самого баннера или картинки.
Чтобы добавить ещё баннеры вставляйте вот такой участок кода.
<a href='Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
Вот и все настройки. Думала написать, как сделать такое только с кликабельными ссылками без картинок, но оказалось, что этот пост у меня уже есть.
На этом у меня сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Удачи всем.
здесь можно оформить подписку на новые шпаргалки
Когда-нибудь, если мой блог дорастет до рекламы, обязательно воспользуюсь советом.
ОтветитьУдалитьВы можете подобным образом отображать ваши замечательные фото. Или список своих любимых блогов. Тут масса применений.
УдалитьСпасибо Вика! Оказывается всё просто, а я думал, что нужно использовать специальные скрипты или сервисы! Для меня эта информация очень релевантна и скорей всего в скором воспользуюсь ей для реализации ротатора баннера.
ОтветитьУдалитьСпасибо
Игорь, привет. Да, есть много вариантов с использованием сторонних сервисов и скриптов. Тут вообще всё просто. Когда воспользуетесь. дайте знать.
ОтветитьУдалитьЗдравствуйте. Отличный ротатор! А как сделать, чтобы баннер задерживался, скажем на 5 секунд, и дальше менялся на новый, который так же делал паузу на 5 сек?
ОтветитьУдалитьАлександр, за скорость смены отвечает атрибут scrollamount. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит.
УдалитьЗдравствуйте!Скажите,никак не появится реклама от Google Adsense.Блог Активен уже 2 месяц,за это время рекламные блоки много раз попадали в неиспользуемые.В чем может быть причина(писала на форум-говорят,может код не верно вставила).Помогите,заранее спасибо!
ОтветитьУдалитьЮлия Косметолог, так я вам не смогу ответить. Дайте ссылку на блог. И надо бы уточнить куда и как вы вставляли код. Напишите мне на почту через форму связи ниже.
УдалитьА как сделать этот код, чтоб былбы не скрол а рандомный показ банера или обновив сайт показывает каждый раз новый баннер? не подскажете?
ОтветитьУдалитьМожно и на почту dlyanas.ru@gmail.com
ОтветитьУдалитьЗаранее благодарен!
Dlya Nas, можно сделать при помощи сервиса. http://www.shpargalochki.ru/2014/09/rotator-bannerov-ot-servisa-inetclickru.html, а можно с помощью скрипта. Давайте напишу его на днях, следите.
ОтветитьУдалитьВика здравствуйте. Подскажите в какой статье вы описывали код для банеров (как в вашем эксперементальном блоге http://my-testoblog.blogspot.ru на боковой панели 4 банера здесь может быть ваша реклама 120*120) Заранее спасибо.
ОтветитьУдалитьLili4ka, я думаю, Вы это имеете ввиду. http://www.shpargalochki.ru/2015/05/sdelat-reklamnoe-mesto-v-bloge.html. Буквально сегодня начала писать, такой же но с рандомным выводов картинок. Посмотрим, что получится.
ОтветитьУдалить