«

»

Ноя 26 2012

Распечатать Запись

Как вставить слайдер на Blogspot

Вот уже несколько месяцев назад я добавил на свой сайт на blogspot такой популярный нынче элемент, как слайдер. Но только недавно моя жена обратила таки внимание на сие творение и по её реакции я понял, что данный визуальный элемент дизайна впечатляет и радует глаз пользователя. Поэтому тема “Как вставить слайдер на blogspot” да и на любой другой движок до сих пор актуальна.

Nivo слайдер на blogspot в процессе смены слайдов

Nivo слайдер в процессе смены слайдов

Для тех, кто хочет сразу же узнать как установить такой же к себе на сайт переходим к инструкции по установке. А я предпочту начать с того, почему же слайдер нужен на сайте.

Преимущества слайдера

  1. Динамичность. Слайдер – это изменяющийся во время просмотра элемент страницы. Следовательно он постоянно привлекает внимание пользователя: по аналогии, если бы разговаривающий с вами человек вытянул в сторону руку и двигал пальцами, то вы бы постоянно отвлекались на его руку. Этот факт позволяет нам обратить внимание пользователя на нужный контент!
  2. Мало места + много контента. При прочих равных для размещения всего того же объема контента на странице потребуется ровно во столько раз больше места, сколько слайдов на данный момент в слайдере. Например, у меня 6 слайдов и что бы их разместить линейно нужно в 6 раз больше места. Учитывая, что гугл выше котирует контент “первого экрана” (т.е. часть страницы, которую видит пользователь без прокрутки вниз), слайдер становится полезным и в плане SEO-оптимизации.

Недостатки слайдера

Явный недостаток у слайдера один – он затормаживает загрузку страницы и причин тому две. Во-первых, слайды, как правило, – это картинки с небольшим текстом. Если же слайдов много, то это много картинок, которые могу уже достаточно весить. Пользователь с хорошим интернетом может и не заметит, а вот поисковые системы могут учесть разницу в миллисекундах при ранжировании сайта. Во-вторых, слайдеры работают с использованием скриптов JavaScript, а они как известно тоже могут подтормаживать загрузку, если не оптимизированы.

5 шагов по установке слайдера на Blogspot

  1. Подготовить исходные данные для слайдера. Определиться с размерами, типом слайдов, типом смены слайдов, временными интервалами между сменами и т.п. Нажать на кнопку ниже, настроить параметры слайдера и нажать “Generate”.
  2. Вставить скрипт слайдера. Полученный код вставить в ваш шаблон на Blogspot (“Шаблон – Изменить HTML – Приступить”) перед закрывающим тегом  </head> .
  3. Сгенерировать слайды для слайдера на том же сервисе.
  4. Вставить виджет слайдера. После нажатии на кнопку Generate появится другая кнопочка “Add to Blogger”, при нажатии на которую вам будет предложено вставить сгенерированный виджет. Смело следуем инструкциям! Де факто это обычный HTML-виджет, у которого не отображается заголовок.
  5. Настроить местоположение слайдера. В дизайнере сайта перетащите виджет в нужное место.
  6. Радоваться новомодной фиче на своем блоге 😉

Впоследствии вы можете вручную править код при необходимости или же опять воспользоваться используемым в этой статье сервисом для генерации нового слайдера.

P.S. Не так давно с хостингом скриптов у гугла были проблемы и слайдер перестал корректно работать. Разработчик сервиса перетащил скрипты на другой хостинг и это потребовало изменения кода в скрипте слайдера. После внесения изменения слайдер снова заработал.

Обновление 25.02.2013: Для предупреждения ситуации, когда пропадает используемый скрипт в коде лучше заранее иметь несколько возможных источников скрипта. Но использовать предпочтительно самый популярный, так как он с большей вероятностью уже будет в кеше браузера посетителя нашего сайта. Например, у меня под слайдер добавлены заранее две строчки:

 Можно найти и другие источники этого скрипта, введя название в гугл. А можно и самому залить на какой-нибудь открытый хостинг скриптов и бесплатную CDN.

1 комментарий

  1. Евгения

    Спасибо! Очень симпотичный слайдбар и вставлять легко)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *