Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

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

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

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

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

download

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

 

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

archive

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

 

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

upload

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

 

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

add-style

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

 

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

paste

Теперь переходим к нашему блогу на 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 и делаем все так как на рисунке ниже.

link

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

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

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

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

paste-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. Вызываем слайдер (вызов нужен не во всех слайдерах, поэтому данный шаг не везде нужен)

call

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

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

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

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

Если у вас есть вопросы, то задавайте их в комментариях.