2012-08-23

Blogspot, вставила Conveyor Belt slideshow

                                                                                                                                                               
      Решила я немного приукрасить свой блог и добавить под шапкой блога непрерывную ленту изображений своих рецептов.      Вариантов таких Image Slider великое множество , но у меня были определенные требования      -   никаких jQuery, Flash и прочих новомодностей, которые зачастую блокируются в правильно настроенных браузерах. Посетители моего блога являются обыкновенными чайниками и нужно чтобы моя лента изображений была видна всем и во всех браузерах.
      Порыскав по интернету, я остановилась на Conveyor Belt slideshow script  ( Ленточный конвейер слайд-шоу).
      Мой блог приобрел такой вид:


Conveyor Belt slideshow
    

   Если кому-то интересно как я это проделывала, то может
а я себе для памяти все запишу, да и блогерам может этим помогу.

  В том месте, где должен располагаться наш Image Slider, добавляем гаджет “ HTML/Java Script “, и в выскочившем окошке добавляем скопированный с "Conveyor Belt slideshow script" код.( код копируем полностью)

   Вносим изменения в код:

Код Conveyor Belt slideshow


     Вместо 300 px ставим длину нашего слайдера ( у меня ширина блога 1100, я сделала ленту слайдера 1000 px.)
     150 пикселей  -   это высота вашей ленты, и, соответственно, ваших мини-фото ( у меня высота всех фото, а значит и ленты 180 пикселей.
     Третий по счету овал  - это фон, на котором будет располагаться слайд-лента ( я поставила белый FFFFFF.
     А с четвертым квадратным блоком нам и придется в основном работать.
    
   У меня в слайд-ленте отображается 30 мини-фото, в коде  шаблон для вставки ссылок на фото рассчитан только на 5 (включая 0-нулевую стартовую). Так что мне пришлось методом копирования и вставки увеличить число шаблонов для вставки фото до 30.( я все не покажу, но как смогу дам объяснение.:



       =

   Вот я скопировала и вставила ниже код для вставки фото. У меня уже код рассчитан на 10 фото. Нужно обратить особое внимание на первый синий столбец -  здесь нужно менять порядковые числа из расчета “ n – 1 “, а в правом  синем столбце я просто проставила реальные порядковые номера фото, чтобы потом легче было ориентироваться.
     Зеленый овал   -  сюда можно вставить ссылки на страницы, где находятся наши фото(или рецепты как у меня) Но я этого не сделала  -  руки не дошли.
     Красный овал   -   а вот сюда мы вставляем адрес наших фото ( я залила на веб-альбом Picasa и оттуда брала адреса.)

   Все фотографии уменьшала и обрабатывала в бесплатном фото-редакторе  PhotoScape , там же добавляла округление углов. Потом все фотографии провела через (к сожалению сайт онлайн-компрессора перестал существовать, но фото можно ужать до нужного размера в программе FastStone Image Viewer)    и уменьшила вес  фото до 6-10 кб.,
Когда все вышеописанные манипуляции будут проделаны, жмем в нашем гаджете кнопку “Сохранить” и идем любоваться на наш Slider Image.



12 комментариев:

  1. Спасибо.
    Буду пытаться сделать похожее у себя в блоге. Если возникнут вопросы, буду спрашивать у вас.

    ОтветитьУдалить
    Ответы
    1. С превеликим удовольствием отвечу на ваши вопросы если они возникнут

      Удалить
  2. Добрый день.
    У меня почемуто ничего не получилось :-(((

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Наталия!
      Извините за задержку с ответом.
      Попытаюсь помочь.
      ЧТО именно у вас не получилось?
      Вы пытались проделать предварительную вставку ленты, состоящую из трех-четырех изображений в тестовом блоге?
      Я вообще ваш блог не вижу - ссылка ведет в никуда...

      Удалить
  3. Добрый день.
    Не знаю получилось ли отправить сообщение.
    Дошла я до вставки фото в "красный овал" и не знаю как это делать.
    Блог у меня есть, только не знаю почему он не высвечивается. Мой блог на испанском языке.
    спасибо за ответ

    ОтветитьУдалить
    Ответы
    1. Наталия, давайте договоримся так.
      Вы идете в настройки своего блога (Гаечный ключ с левой стороны). Далее смотрим "Основное" > " Конфиденциальность" - нажмите "изменить" и проверьте "Добавить блог в наши каталоги?" - ставим "Да", проверьте также
      " Вы хотите, чтобы поисковые системы находили ваш блог? " - ставим также
      "Да".
      Далее на этой же странице опускаемся до пункта "Разрешения" > "Читатели блога" и ставим "Кто угодно". Мне нужно видеть ваш блог ( или сайт) , иначе разговора не будет.

      Удалить
    2. Уважаемая ,Prokofevna, у меня стоит всё так как вы попросили. Я без входа в аккаунт могу видеть свой блог.Там где закладка "О себе" есть ссылка на мою публикацию "Abrigos y complementos......". Я ни откого не скрывала свой блог, наоборот мне интереснее если его будут видеть.
      Спасибо за помошь.

      Удалить
    3. Уважаемая,Prokofevna,
      У меня всё стоит так как вы и попросили. Блог ни от кого не скрываю, наоборот мне интереснее если его увидят больше людей. На моей страничке есть закладка "о себе", и там внизу справа стоит ссылка на мою публикацию "Abrigos y complementos....".

      Вставила фото в альбом "Пикаса" а где там стоят ссылки на фото и как именно их вставлять не знаю.
      Благодарю за вашу помошь.

      Удалить
    4. А какое название носит ващ блог?(просто интересно)
      Он находится на бесплатном Blogspot? Если я правильно определила ваш блог, то вы используете простой шаблон из Дизайнера шаблонов Blogger&
      Впрочем это не важно.
      Прежде чем вставлять слайд-шоу в блог, нужно картинки подготовить: уменьшить их размеры и вес. Вес я уменьшала через он-лайн редактор, но сайт перестал работать, и я уже внесла поправки в свое сообщение.
      Далее я все миниатюрные картинки поместила в отдельную папочку в веб-альбом Пикаса, а оттуда уже брала ссылку на каждую картинку и вставляла ее в тот розовый овал, о котором вы писали.
      Советую вам открыть в вашем браузере Мой блог, далей найти и открыть "Исходный код моего блога", далее найдите в открывшемся коде "Conveyor belt slideshow script" и внимательно посмотрите на то, какой код у меня получился.
      Начала писать более подробный пост - скоро опубликую

      Удалить
    5. Мой блог это " Одежда и комплименты для гончих и других пород".Фото уже все отобраны , уменьшены и отправлены в отдельную папку и альбом Пикаса.
      Не пойму где открыть "исходный код моего блога"?
      Буду с нетерпением ждать новую вашу публикацию.

      Удалить
    6. Накталия, я опубликовала новое сообщение вам в помощь .Смотрите пост за сегодняшнее число.

      Удалить
    7. Исходный код Моего (prokofevn(ы) можно открыть так:
      1. открыть в любом браузере мой блог
      2 В IE - "Вид" > Просмотр HTML-кода
      3. В Firefox - жмем на значок Лисы > Веб-раработка > Исходный код страницы
      4. В Google Chrome - ищем "Инструменты" > "Просмотреть исходный код"

      Удалить