Как самостоятельно создать галерею изображений в блог blogspot



Приветствую гостей и читателей блога. В этой статье мы научимся самостоятельно создавать галерею изображений. В код можно вставить 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 адрес картинки; бардовым-скорость движения; Будьте внимательны, потеря кавычек, точек, запятых, скобок может привести к не корректному отображению картинок.

И у меня вся информация. Пишите, делитесь с друзьями. А я сегодня говорю Вам до свидания и до новых встреч.


Почитайте по теме Гаджет прокрутки сообщений блога в виде изображенийКак открыть изображение, фото или видео в новом окне;


Автор статьи ✎ Olga Protasova Выпуск ✹ 2/15/2015 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Здравствуйте! Огромное спасибо за Ваш труд! Узнала много нового о блоге. Очень заинтересовало создание слайдера изображений. Но я не совсем понимаю настройки (синим, голубым). Можно ли вставить картинки в этот слайдер, если они у меня на компьютере сохранены?

    ОтветитьУдалить
    Ответы
    1. А.Г. Бендик здравствуйте.Картинки вставить можно и нужно. Для этого надо знать url адрес картинки. Правая кнопка мыши-скопировать адрес изображения. Если на компьютере, загрузите в редакторе блоггер и по вкладке HTML скопируйте адрес.

      Также можно воспользоваться сервисами. Например в этой статье:

      http://www.bdblogov.ru/2013/08/url.html

      В коде сюда src="адрес изображения" вставить url адрес картинки;
      <a href="ссылка на страницу" вставить ссылку для перехода на страницу (если надо) при нажатии на картинку, к примеру реферальная ссылка или на любую статью в Вашем блоге;

      title="название" написать название картинки, при наведении мыши читатель прочитает название изображения;

      alt="текст" кратко описать изображение. Для оптимизации картинки.

      Если что-то не поймете, задавайте вопросы.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *