Добавляем слайдер или плагин 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”>…) .
На этом установка слайдера закончена.
