Site icon Vavik96

Добавляем слайдер или плагин jquery на сайт blogspot

И так здравствуйте, несколько дней назад ко мне обратились за помощью по сайту который расположен на блогохостинге компании «Гугл» Blogspot.com. Заданием было добавить слайдер на страницу шаблона. И я решил возможно кому-то тоже понадобиться инструкция по установке слайдера, или какого-то jquery плагина.

И так начнем с того что нужно выбрать нужный нам слайдер, для примера я выбираю bxslider. Вы можете выбрать тот который вам понравился где-то в интернете или выбрать в моей подборке слайдеров. Если вы определились со слайдером вам нужно пройти следующие шаги.

1. Скачивание слайдера

Переходим на сайт  bxslider и скачиваем архив со сладером.

 

2. Разархивируем архив

Открываем скачанный архив и разархивируем его в папку на своем ПК.

 

3. Загружаем файлы на удаленный сервер, или хранилища данных типа Google Drive, Dropbox, SkyDrive, Яндекс.Диск

Для примера я выбрал Dropbox. После регистрации и входа создаем папку, например slider. После чего заходим в созданную папку и загружаем в нее разархивированные файлы слайдера. Если в разархивированном файле присутствуют папка, то нужно также их создать в нашем хранилище, у меня это папка images и plugins и загружаем файлы которые должны в них находиться.

 

4. Копируем код скриптов и стилей слайдера

Переходим на сайт нашего слайдера и копируем код который подключает скрипты и стили для работы слайдера.

 

5. Вставляем код в наш шаблон.

Теперь переходим к нашему блогу на Blogspot.com и выбираем наш сайт, после чего выбираем пункт меню шаблон и кликаем по кнопке Изменить HTML. Теперь ищем в коде шаблона закрывающий тег </head> перед которым вставляем скопированный код. Но это еще не все, ведь мы не просто так загружали файлы слайдера в хранилище drobbox (Для чего смотрим в следующем шагу).

 

6. Изменяем пути скриптов и стилей

И так вот наш скопированный код слайдера:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

ПРИМЕТКА:

- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> - это библиотека jquery.
 Скорее всего у вас она уже подключена, в таком случае ее не нужно вставлять, разве что ваша версия уже устарела, тогда заменяем ее.
- <script src="/js/jquery.bxslider.min.js"></script> - это скрипт нашего слайдера.
- <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> - это стили для нашего лайдера

А вот как его нужно изменить:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="https://www.dropbox.com/s/mnkqiho9a27hk7u/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="https://www.dropbox.com/s/qynwm13y2pgkhr8/jquery.bxslider.css" rel="stylesheet" />

Как вы можете заметить изменились только ссылки скрипта и стилей слайдера. Но у вас будут другие ссылки, как их получить показываю ниже. Переходим на вкладку с нашим хранилищем dropbox и делаем все так как на рисунке ниже.

Выбираем нужный нам файл и в открывшемся окне нажимаем на кнопку “получить ссылку”. После нажатия ссылка автоматически копируется в буфер обмена. и вставляем ее вместо старой ссылки выбранного файла. Тоесть если у нас например есть ссылка на скрипт jquery.bxslider.min.js, ищем его в списке и копируем его ссылку после чего вместо /js/jquery.bxslider.min.js мы вставляем нашу ссылку, у меня это https://www.dropbox.com/s/mnkqiho9a27hk7u/jquery.bxslider.min.js а у вас будет немного другая.

P.S. Так делаем со всеми скриптами и стилями которые необходимы для работы слайдера или плагина.

После всех изменений сохраняем наш шаблон кликнув по соответствующей кнопке.

7. Установка html кода

Теперь копируем наш html код слайдра, и переходим на наш сайт. Здесь выбираем пункт меню “Дизайн” и выбираем нужный нам блок где хотим разместить слайдер. Нажимаем на ссылку изменить возле блока и в сплывающем окне в поле “Содержание” (Убедитесь что выбрана функция Изменить Html) вставляем наш код. У меня это следующий код:

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Где:

– <ul class=”bxslider”> – это наш блок со слайдером

– bxslider – класс нашего слайдера (который нам понадобиться для вызова слайдера)

 

– <li><img src=”/images/pic1.jpg” /></li> – это один слайд;

– <img src=”/images/pic1.jpg” /> – наше изображение;

– /images/pic1.jpg – ссылка на изображение (вместо этой ссылки вы вставляете ссылки на свои изображения).

Сохраняем и выполняем следующий шаг.

8. Вызываем слайдер (вызов нужен не во всех слайдерах, поэтому данный шаг не везде нужен)

Переходим на сайт слайдера и копируем код его вызова. после чего снова выбираем пункт меню шаблон и кликаем по кнопке Изменить HTML. И опять ищем в коде шаблона закрывающий тег </head> перед которым прописываем теги <script>  </script> и внутрь вставляем скопированный код. У меня это код:

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

 -$(‘.bxslider’) – вместо bxslider можно использовать свое наименование, но тогда нужно не забыть указать точно такое название клаcсу нашего слайдера (см. пункт 7 – <ul class=”bxslider”>…) .

На этом установка слайдера закончена.

hmil.com.ua

Exit mobile version