Будь в курсе событий!

15.01.2014

Автоматизированный слайдер для боковой панели CSS, JS на блогспот, блоггер.

5 comments






Привет друзья, сегодняшний урок у нас будет о автоматическом слайдере контента.Сам слайдер вообще для боковой вкладки или слева, или справа его надо распологать у себя на ресурсе но можно конечно и посередине.У меня уже есть статьи о  слайдерах но они отличаются от этого, или этот от них виджет, пробуйте дорогие читатели очень забавная вещица, и для пользователей вашего веб ресурса будет очень удобна. А теперь поговорим об установке и так что бы установить данный гаджет ,виджет нам надо зайти в блог панель меню дизайн, далее добавить гаджет, HTMLjavascript , добавляем сохраняем вот этот скрипт:

     <style scoped="" type="text/css">
    /*
    zarnakoom.com
    */
    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/AVvXsEiupJkswO03TcAuMLSBoHTOx4yiOzVBGkzSLX4oJdQoIZQbj2hZi182uGTg4WtDq6cEi-Z7ieg2qZSJ71pXn-94Ju8-JIRSeZuRDMcrnuo8qJZ9PQx9ZziiObRgbY2bw4JcOF71I15NNTU/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="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    FeaturedPostSide({
    blogURL:"http://www.zarnakoom.com",
    MaxPost:8,
    idcontaint:"#featuredpostside",
    ImageSize:300,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    //]]>
    </script>




Первое и самое главное что надо учесть если у вас в блогк стоит jQuery код то этот скрипт
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 в коде вам не нужен.

blogURL = Добавить свой ​​блог URL здесь
MaxPost = общее количество  постов в слайдере
ImageSize = размер картинок постов в слайдере
interval-Интервал = Время, необходимое для изменения, или смены постов в слайдере
autoplay-автозапуск = Тут можно  выбрать пункт, сами посты будут изменяться  в слайдере или с помощью кнопок .
tagName-тэг = Если вы хотите отобразить статьи по тегу / этикетке , например, виджета тега , будет написано как по тэгу : " виджетов"
На этом все дамы, и господа удачных экспериментов с виджетом.

5 комментариев :

  1. А у меня не отображаются картинки а так се работает,Вы не знаете почему?

    ОтветитьУдалить
  2. Тимур здравствуйте еще раз вы наверно забыли добавить снизу вот в эту строчку свой блог

    blogURL = Добавить свой ​​блог URL здесь ( Зеленым цветом ссылка отмечена, смотри под скриптом описание)- на этой странице.

    ОтветитьУдалить
    Ответы
    1. Да добавлял все равно ни в какую писал так же blogURL:"http://www.zarnakoom.com" и так даже "http://www.zarnakoom.com" ну естественно со своим урл тоже не работает.видимо из за шаблона может.он простой но полностью измененный опыты постоянные.
      А так сайт хороший у Вас все есть для стандартного шаблона Вы программист ?

      Удалить
  3. Тимур ты не так понял?, замени мой адресс вот этот http://www.zarnakoom.com на свой понимаешь?Я отчасти не програмист, а симбиоз.

    ОтветитьУдалить
    Ответы
    1. Ничего, если я вмешиваюсь. Тут скрипт библиотеки jquery в коде. И если она в каком-то коде в блоге уже есть это и мешает.
      А вообще информации столько со своего блога нашла.

      Удалить

© 2012-2017 Cash's from program