Приветствую гостей и читателей блога. В этой статье мы научимся самостоятельно создавать галерею изображений. В код можно вставить url адреса Ваших фото, картинок популярных постов, баннеров партнерских программ.
Вариант простой галереи Вы видите на рисунке этой страницы. Код вставляете дизайн-добавить гаджет, сохраняете в нужном месте макета блога.
Так же без проблем устанавливается на страницы сообщений. При тестировании корректно работал в разных шаблонах blogger, в том числе и не стандартных. Копируйте код ниже, настраивайте, наслаждайтесь.
<script type="text/javascript" src="https://santosh143.googlecode.com/svn/marquee">
</script>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '900px',
'background': 'dark grey',
'border': '1px solid dark grey'
},
inc: 2, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>
<marquee
scrollamount=3 onmouseover=this.scrollamount=0
onmouseout=this.scrollamount=3 width=600 height=100>
<a href="ссылка на страницу" target="_blank"><img alt="текст"src="адрес изображения" width="100" title="название"height="100" />
<a href="ссылка на страницу" target="_blank"><img alt="текст" src="адрес изображения" width="100" title="название"height="100"/>
<a href="ссылка на страницу" target="_blank"><img alt="текст" src="адрес изображения" width="100"title="название" height="100" />
<a href="ссылка на страницу" target="_blank"><img alt="текст" src="адрес изображения" width="100"title="название" height="100"/>
<a href="ссылка на страницу" target="_blank"><img alt="текст" src="адрес изображения" width="100"title="название" height="100" />
<a href="ссылка на страницу" target="_blank"><img alt="текст"src="адрес изображения" width="100" title="название" height="100" /></a></a></a></a></a></a></div>
</marquee> <script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '700',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>
Настройки: выделенное синим-адрес ссылки; голубым-пишите текст alt, сиреневым-название title при наведении мыши (оптимизируете картинки); коричневым-url адрес картинки; бардовым-скорость движения; Будьте внимательны, потеря кавычек, точек, запятых, скобок может привести к не корректному отображению картинок.
И у меня вся информация. Пишите, делитесь с друзьями. А я сегодня говорю Вам до свидания и до новых встреч.
Почитайте по теме: Гаджет прокрутки сообщений блога в виде изображений; Как открыть изображение, фото или видео в новом окне;
Рекомендуемый контент:
Здравствуйте! Огромное спасибо за Ваш труд! Узнала много нового о блоге. Очень заинтересовало создание слайдера изображений. Но я не совсем понимаю настройки (синим, голубым). Можно ли вставить картинки в этот слайдер, если они у меня на компьютере сохранены?
ОтветитьУдалитьА.Г. Бендик здравствуйте.Картинки вставить можно и нужно. Для этого надо знать url адрес картинки. Правая кнопка мыши-скопировать адрес изображения. Если на компьютере, загрузите в редакторе блоггер и по вкладке HTML скопируйте адрес.
УдалитьТакже можно воспользоваться сервисами. Например в этой статье:
http://www.bdblogov.ru/2013/08/url.html
В коде сюда src="адрес изображения" вставить url адрес картинки;
<a href="ссылка на страницу" вставить ссылку для перехода на страницу (если надо) при нажатии на картинку, к примеру реферальная ссылка или на любую статью в Вашем блоге;
title="название" написать название картинки, при наведении мыши читатель прочитает название изображения;
alt="текст" кратко описать изображение. Для оптимизации картинки.
Если что-то не поймете, задавайте вопросы.