Слайдер для Blogger - Slider с адаптивным дизайном 2023
Большинство вебмастеров и блогеров стараются обустроить свой блог слайдером, но найти действительно достойный очень тяжело, потому что большинство из них имеет много недостатков. К примеру когда вы хотите поменять пост в слайдере вам приходится делать это вручную, задавать ссылку, описание и картинку к нему. Так же не мало важную роль играет то, как слайдер отображается на дисплеях с разными разрешениями. Теперь это не будет вас беспокоить, слайдер который мы вам предлагаем установить обладает всем необходимым. А если точнее, то он может отображать последние посты (сообщения) вашего сайта, последние посты от заданного ярлыка или же случайные посты. И само собой адаптивный дизайн, правда, если вы используете стандартный шаблон 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 меняем на нужный ярлык к примеру Стиль и берем его в кавычки 'Стиль'
Теперь можете наслаждаться работой нового слайдера.
Второй вариант слайдера
Есть еще один неплохой вариант, который мне нравится даже больше, чем первый. Способ установки так же прост, для этого вам нужно:1. Открыть HTML редактор своего шаблона в разделе Тема - Изменить HTML
2. После закрывающего тега
Если у вас возникли вопросы пишите в комментариях.
]]></b:skin> добавьте CSS код:
<style>
.featslider { position: relative; } ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height: 400px; object-fit: cover;}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:15px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://ht5445yrthfhhghn54553t.blogspot.com/",
featuredNum:5,
listbyLabel:false,
interval:5000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:1200,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Пред</a><a href="#" class="feat-next">След</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script></head> и разместите перед ним код:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>Видео инструкция по установке второго слайдера
Если у вас возникли вопросы пишите в комментариях.