x

Красивый Слайдер для Blogger

Слайдер для Blogger - Slider с адаптивным дизайном 2018

Большинство вебмастеров и блогеров стараются обустроить свой блог слайдером, но найти действительно достойный очень тяжело, потому что большинство из них имеет много недостатков. К примеру когда вы хотите поменять пост в слайдере вам приходится делать это вручную, задавать ссылку, описание и картинку к нему. Так же не мало важную роль играет то, как слайдер отображается на дисплеях с разными разрешениями. Теперь это не будет вас беспокоить, слайдер который мы вам предлагаем установить обладает всем необходимым. А если точнее, то он может отображать последние посты (сообщения) вашего сайта, последние посты от заданного ярлыка или же случайные посты. И само собой адаптивный дизайн, правда, если вы используете стандартный шаблон blogger в котором не настроен общий реагирующий дизайн в таком случае функция отзывчивого дизайна слайдера работать не будет. Как работает сие чудо можете пронаблюдать на тестовом блоге.

Итак можем приступить к установке нашего слайдера, это еще один его плюс, ведь разместить его на своем блоге очень просто. Для этого переходим в раздел Тема - Изменить HTML в открывшемся редакторе ищем значение <head> и сразу после него добавляем код:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Дальше нам нужно найти значение ]]></b:skin> и перед ним разместить следующий код:

/* Skitter Slideshow */
#skitterslideshow{padding:4px;border:1px solid #DDD;box-shadow:0 1px 5px rgba(0,0,0,.15)}
#slider-wrapper-indzign{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:250px;position:relative;z-index:8888}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{background-color:#fbfbfb;transition:background-color linear .3s}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;width:100%;height:100%}
.box_skitter .image img{display:none;width:100%;height:100%}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute;top:0;width:0%;height:auto;width:0%;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:50px;border:3px solid #FFF;background:rgba(0,0,0,.5);box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:50px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(http://2.bp.blogspot.com/-9u_hEl1AYQw/UZoFMXLUjnI/AAAAAAAAAco/c8wJh46pAJY/s1600/skitterloading.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{border:1px solid #FFF;box-shadow:0 1px 3px rgba(0,0,0,0.3);border-radius:0}
.box_skitter_home.indzign-theme .info_slide{}
.box_skitter_home.indzign-theme .info_slide_dots{bottom:-16px;width:110px;left:50%!important;margin-left:-65px;height:30px;padding:0 8px;z-index:99}
.box_skitter_home.indzign-theme .info_slide_dots span{transition:background linear .3s;background-image:url(http://3.bp.blogspot.com/-4YmYwCb-ysQ/UZoFIi-u66I/AAAAAAAAAcI/oGf5a50M4Mk/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#d1d1d1;color:#777;border-radius:50%;border-bottom:1px solid #FFF;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.indzign-theme .info_slide_dots span:hover{background-color:#666}
.box_skitter_home.indzign-theme .info_slide_dots span.image_number_select{background-color:#5ebc00;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button{display:block;width:75px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;text-indent:0;bottom:-12px;top:auto;color:#777;z-index:98;cursor:pointer}
.box_skitter_home.indzign-theme .prev_button:hover,.box_skitter_home.indzign-theme .next_button:hover,.box_skitter_home.indzign-theme .prev_button:active,.box_skitter_home.indzign-theme .next_button:active{opacity:1!important}
.box_skitter_home.indzign-theme .next_button{right:28.5%;padding-right:5px;text-align:right;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .next_button span{padding-right:20px;background:url(http://4.bp.blogspot.com/-tDcoMZRS_FI/UZoFLG8tRpI/AAAAAAAAAcM/v7hsdxe-B_o/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .prev_button{left:28.5%;padding-left:5px;text-align:left;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .prev_button span{padding-left:20px;background:url(http://4.bp.blogspot.com/-Iy1Iil-KW5c/UZoFMLhWK2I/AAAAAAAAAck/kPbQFfFn-3k/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .label_skitter{background:#49afcd;width:90%;padding:5px 8px 5px;left:50%;margin-left:-45%;bottom:10%;text-align:left;height:auto;border-right:2px solid #fff;border-left:2px solid #fff;color:#fff;font-size:12px}
.box_skitter_home.indzign-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.indzign-theme .label_skitter h4{margin:0;font-size:135%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white;padding:0 0 10px}
.box_skitter_home.indzign-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.indzign-theme .label_skitter a:hover{color:#eee}
.box_skitter_home.indzign-theme .info_slide_thumb{background-color:#fff}
.box_skitter.indzign-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:100%}
.box_skitter .container_skitter .date span{margin-right:3px}
@media only screen and (max-width:960px){.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media only screen and (max-width:768px){#slider-wrapper-indzign{height:220px}.box_skitter .box_clone img{width:422px;height:220px}.box_skitter_home.indzign-theme .next_button{right:19.5%}.box_skitter_home.indzign-theme .prev_button{left:19.5%}}
@media only screen and (max-width:640px){.box_skitter_home.indzign-theme .next_button{right:26.5%}.box_skitter_home.indzign-theme .prev_button{left:26.5%}}
@media only screen and (max-width:480px){#slider-wrapper-indzign{height:200px}.box_skitter .box_clone img{width:280px;height:220px}.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media screen and (max-width:320px){.box_skitter_home.indzign-theme .label_skitter p{display:none}.box_skitter_home.indzign-theme .next_button{right:5.5%}.box_skitter_home.indzign-theme .prev_button{left:5.5%}}

Отлично осталось еще два простых шага, находим код </body> и перед ним добавляем небольшой код:

<script src="https://cdn.jsdelivr.net/gh/Indzign/theme@master/skitterslidex.js" type="text/javascript"/>

Теперь можете сохранить шаблон, но это еще не все. Остался последний штрих, нужно скопировать код и вставить его либо в разделе Дизайн - добавить гаджет - HTML\Javascript или же если вы более-менее разбираетесь в редакторе HTML можете примостить его там где пожелаете. Вот и сам код:

<div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'https://shablonu-dlya-blogger.blogspot.com',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Komentar",
        NoCmtext: "No Comment",
        pBlank: "https://2.bp.blogspot.com/-D47WWjFZXdk/UP1z-A5uCuI/AAAAAAAAH98/heTBvxq49No/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>

Выделенный адрес в последнем коде меняете на адрес своего сайта - блога.
Max post - количество постов отображаемых в слайдере.
RandompostActive - служит для подключения или же отключения функции отображения случайных постов. Чтобы подключить false меняем на true.
tagName - служит для отображения последних постов от заданного ярлыка. false меняем на нужный ярлык к примеру Стиль и берем его в кавычки 'Стиль'

Теперь можете наслаждаться работой нового слайдера.



21 Коммент.
Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

21 Коммент.

Оставить комментарий
avatar
MaxSliL
декабря 09, 2015

В статье у вас опечатка : "Дальше нам нужно после значения ]]> разместить следующий код:" - нужно перед значением ]]> разместить код.

Ответить
avatar
Mark Korvin
декабря 09, 2015

Спасибо, что указали на ошибку и тем самым уберегли других пользователей от мучительной установки слайдера.

Ответить
avatar
Sergii
апреля 16, 2017

Спасибо, классный слайдер. Добавляет оригинальности и привлекательности. А как поменять параметры, чтобы изменить высоту и ширину бокса (или это автоматом?) и увеличить время показа. Заранее спасибо.

Ответить
avatar
Sergii
апреля 16, 2017

Попробовал установить... работает, но размещен внизу, ниже футера по всей ширине. Может, что не так делаю?

Ответить
avatar
Mark Korvin
апреля 17, 2017

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

За высоту слайдера отвечает строка:
#slider-wrapper-indzign в ней параметр height: 250px;

За ширину отвечает строка:
#skitterslideshow в ней допишите параметр width:500px;

Ответить
avatar
Sergii
апреля 17, 2017

Спасибо за совет. Попробовал, к сожалению не получается. Не хватает опыта и знаний

Ответить
avatar
Mark Korvin
апреля 17, 2017

Есть много шаблонов с уже установленными слайдерами, как раз на тот случай, когда мало опыта.)

Ответить
avatar
Sergii
апреля 17, 2017 Этот комментарий был удален администратором блога.
avatar
Mark Korvin
апреля 18, 2017

Поздравляю с первым положительным опытом в blogger.)

Ответить
avatar
Unknown
января 24, 2018

установил, появился, показывает что загружает, потом попросту белый фон в рамке...

Ответить
avatar
Mark Korvin
января 24, 2018

Ссылку на свой сайт вставили в последнем скрипте?

Ответить
avatar
Тата
мая 11, 2019

Отличный слайдер, а можно в нижней части убрать
1.блок (где стрелки вправо и влево и надписи prev & next),
2.фон где кнопки сделать прозрачным
3. а в голубом блоке чтобы отображался только заголовок сообщения.

Ответить
avatar
Mark Korvin
мая 11, 2019

Можно. Нужно добавить CSS код:
.box_skitter_home.indzign-theme .next_button, .box_skitter_home.indzign-theme .prev_button {display:none}
.box_skitter_home.indzign-theme .info_slide_dots {background: rgba(51, 51, 51, 0.47843137254901963); border: none!important;}

Для заголовка, нужно в скрипте слайдера найти параметр:
NumCharacter: 150,
и выставить его на 0

Ответить
avatar
Тата
мая 11, 2019

он у меня почему-то не отображается в сайтбаре, может из-за того что первый скрипт на http и pBlank: http?

Ответить
avatar
Mark Korvin
мая 11, 2019

Вполне возможно, пропишите вместо HTTP, HTTPS.

Ответить
avatar
Анна Дейна
июня 29, 2019

Здравствуйте. На тестовом блоге всё работает.

В процессе возникло несколько вопросов:
1. Как сделать, чтобы изображения, прикрепленные к отображаемым постам не перерастягивались на всю длину слайда, а занимали выбранное мной положение (справа, слева, центрировать).
2. Можно ли одновременно добавить больше одного тега? Либо, сделать так, чтобы в слайдере было, скажем, три пункта и по каждому отображалось содержимое по одному тегу. Иными словами: в слайдере по очереди возникает 3 кликабельных изображения. Первое отвечает за тег "статьи" и выдает рандомную статью по этому тегу. Второе изображение - соответственно тег "тексты" и рандомные сообщения по этому тегу. Третье - тег "гайды". Названия взяла для примера.
3. Раньше раздел "страницы" был лимитным. Сейчас, на сколько мне известно - без лимита. Можно ли в слайдер прописать рандом по определенным страницами (а не стандартным сообщениям блога, которые он выдает). Или структурой блоггера это не предусмотрено? Сколько ищу - не могу найти адекватногоо информера для страниц или хотя-бы css тега, отвечающего за их отображение. Просто первоначальной мыслью у меня было сделать слайдером показ рандомных статей, которые я публиковала через страницы а не сообщения блога.
4. В css коде вашего скрипта используется много png изображений, чей адрес начинается так "http://3 (тут цифра меняется).bp.blogspot.com/". Это какие-то внутренние сервисы блоггер?
5. Js файлы из скриптов. Правильно ли я поняла, что они подгружены в специальную бибиотеку гугла? Не будет ли в будущем опасности их удаления гуглом, на примере того, как иногда они избавляются от своих старых наработок и ресурсов. В этом плане несколько спокойнее была бы возможность подгрузить нужные файлы прямо в корень папки своего блога (по аналогии с другими сайт хостингами), но гугл нам такую возможность не дал.)

П.м.: сорри за обьем - пытаюсь разобраться, чтобы потом не ловить через месяц или год-два трабблы с работой скриптов (всякое со мной бывало в этом плане от незнания и малоопытности), наверстать упущенное и реализовать задуманное. ;)

Ответить
avatar
Mark Korvin
июня 29, 2019

Здравствуйте.
1. Сделать изображения под размер слайдера.
2. Неа, только один тег.
3. Страницы в нем не будут отображаться, это нужно искать слайдер в который картинки и ссылки на страницы задаются вручную.
4. Это картинки элементов слайдера: стрелки, круги и т.д.
5. Всякое может быть, слайдер работает с 2016 года по сей день, может завтра уже и не будет работать 😃.

Ответить
avatar
Анна Дейна
июня 29, 2019

Спасибо за ответ.
Еще один момент касательно js адреса:"cdn.rawgit.com/Indzign/theme/master/skitterslidex.js".
В этом году сервер rawgit.com заканчивает свою работу. О чем сказано на главной странице ихнего сайта. Некоторые функции будут доступны до октября 2019.

Ответить
avatar
Mark Korvin
июня 30, 2019

Спасибо за информацию 😉. Перекинул на другой сервер.

Ответить
avatar
Eka
декабря 03, 2019

Скажите пожалуйста, а как сделать слайдер для фото в альбоме гугл?

Ответить
avatar
Mark Korvin
декабря 03, 2019

Вам слайдер нужен для Blogger, или для сервиса Гугла "Фото"?

Ответить