
Такой слайдер подойдёт и для рукодельных блогов, где девчонки очень часто постоянно устраивают всякие конфетки и розыгрыши. Может стать прекрасной альтернативой для замены гаджета список чтения. Будут в виде информера отображаться баннеры ваших любимых блогов.
Или сделать просто такую нехитрую галерею изображений. Подумайте.
В блогере с установкой слайдера сложного ничего нет. Код совершенно простой. Устанавливается в гаджет 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. Буквально сегодня начала писать, такой же но с рандомным выводов картинок. Посмотрим, что получится.
ОтветитьУдалить