Сладер с условным названием
"Четыре вертикальные картинки (слайда) " для боковой колонки, хочу предложить вашему вниманию. Ранее мною использовался на этом блоге. Бродя по "буржуйскому" инету,
на индонезийском блоге http://mkr-site.blogspot.com, несколько лет назад был найден этот довольно оригинальный и красивый слайдер. Но в процессе настройки и шлифовки дизайна блога, слайдер был изьят, тем более появились проблемы со скриптом. Недавно на просторах индийского инета на блоге http://www.allbloggertricks.com/,
блоггера и студента Dhiraj Barnwal из Jamshedpur найден аналогичный виджет, который имхо хорошо смотрится на сайтах с любым дизайном, путем индивидуальных настроек цветовой гаммы, варьируя размерами и т.д. , легко впишется в ваш сайт. Хотя этот виджет практически полностью настроен для работы, внести только адрес своего блога и слайдер готов к работе ( blogURL = Добавить URL своего блога). По умолчанию слайдер автоматизирован для показа слайдов, но возможен и ручной режим показа. Размещение данного слайдера- боковые колонки блога.
Посмотреть работу слайдера в реале можно нажав
"Demo"
Основные настройки слайдера:
blogURL-адрес вашего блога;
MaxPost-максимальное количество сообщений в слайдере;
Interval-время, необходимое для изменения положения слайдов в миллисекундах;
autoplay-написать (
true)
истинным или (
false)
ложным, для смены слайдов в автоматическом режиме либо ручном (используя стрелки "назад"-"вперед");
tagname-отображение сообщений по тэгу или ярлыку (по-умолчанию), при отображении по "тэгу" (tagname: "widget").
Дополнительные настройки цветовой гаммы и размеров вносите по своему вкусу под дизайн своего блога
Установка данного виджета осуществляется как обычно.
Копируем нижевыложенный код виджета и вставляем его через админку блога
Дизайн → Добавить виджет → HTML / JavaScript.
Добавляем данный код и сохраняем.
<style scoped="" type="text/css">
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXAG5Z6L4Iq7NB5VULZEbpetGGuUxOdqNpITj0_vhhk9S3BLiU9ugPNwRCjWP5LLKLIgtN_rDsKFDrxn6V9j1Wg9eBUJLdzU08h4GzUE5Y3Pt9HgEFaCqJH6w3HwR7MAcCg8DZkDJjTU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://lybovw.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
Сразу хочу отметить, что мы рассматривали вертикальное исполнение данного слайдера, но как вы понимаете, точно такой же слайдер, но переиграв соотношения сторон, т.е. фактически положив его "на бок" можно получить автоматический слайдер из этих же картинок, но горизонтального исполнения. Ранее использовалось мною эти два варианта, но какой более удачный, сказать трудно.
Еще один из вариантов вертикального слайдера мною выложено в
"Блог об интернет-заработке Lybov-W" в разделе
"Blogger", в статье
"Автоматический скользящий вертикальный слайдер для Blogspot "
Посмотреть данный слайдер в действии можно нажав
Demo-1
Комментариев нет:
Отправить комментарий