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


При нажатии на пункт списка, появляется более подробное описание. Я для примера сделала некоторые пункты меню с описанием и переходом на нужную страницу. Здесь размещать можно всё. Например, сделать вопрос - ответ. Или создать кулинарное меню, разместить загадки и ответы. Масса вариантов. 

Посмотрите на тестовом блоге, как это работает.

Даю код целиком и разберём его ниже

<div id="page-wrap">
<h1>
Некоторые пункты меню </h1>
<br />
<br />
<section class="slide-up-boxes">
    <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_84.html">
     <h5>
Вопрос - ответ</h5>
<div>
На этой странице вы сможете задать вопросы автору блогу</div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_34.html">
     <h5>
Связь с автором</h5>
<div>
Если возникла необходимость связаться с автором блога , то вам сюда</div>
</a>
   </section>
  </div>
<style>
* { margin: 0; padding: 0; }

body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }

p { margin: 0 0 20px 0; }

a { text-decoration: none; }

.slide-up-boxes a {
  display: block;
  height: 130px;
  margin: 0 0 20px 0;
  background: rgba(192, 192, 192, 0.5); /*цвет фона блоков */
  border: 4px solid #556B2F;/*размер и цвет рамки */
  height: 65px;
  overflow: hidden;
}

/* стили для пунктов аккордеона */

.slide-up-boxes h5 {

  color: #333;
  text-align: center;
  height: 65px;
  font: italic 18px/65px Georgia, Serif;
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
  margin-top: -65px;
  opacity: 0;
}

/* стили всплывающих блоков */
.slide-up-boxes div {
  position: relative;
  color: blak;
  font: 12px/15px Georgia, Serif;
  height: 45px;
  padding:10px ;
  opacity: 0;
  -webkit-transform: rotate(6deg);
  -webkit-transition: all 0.4s linear;
  -moz-transform: rotate(6deg);
  -moz-transition: all 0.4s linear;
  -o-transform: rotate(6deg);
  -o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url() 17px 17px no
-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url() 21px 10px no-
repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url() 14px 16px no-
repeat; padding-left: 133px; }
</style>


Готовый код можно установить и в сообщении блога в формате HTML, и в гаджет HTML/JavaScript ( как вы видели на моём тестовом).
При необходимости добавляйте ещё секции вида

  <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>


Я в самом коде пометила комментариями, что можно изменить под ваш дизайн.
В первом коде div помечены ссылки на страницы, куда будет осуществляться переход. Если это не предполагается, просто уберите эти строки.
В тегах h5 прописываем свои пункты. Соответственно и в div нужный текст.
В последней части коды, которая отмечена серым, попробуйте вставить вместо фонов картинки в url( ) .

Вот такой необычный аккордеон со слайд эффектом в итоге получаем.

Спасибо за внимание, всем добра и до встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Доброго времени суток, друзья. Как создать кнопку «Follow» , которая является одним из важных виджетов, устанавливаемых на блоге. Кнопка «Follower» BLOGGER называется функцией «стать постоянным читателем (присоединиться к этому блогу)».

кнопка подписки

Пост подкорректирован и немного изменён.

Метод, который мы будем  использовать для создания кнопки «подписка», заключается в использовании ссылки «Подписаться», которая есть у виджета ПЧ (присоединяется к этому сайту), поэтому кнопка будет более удобной и простой в применении.

Первое, что нужно сделать - создать ссылку на блог follow + id, см. Пример ниже;

https://www.blogger.com/follow.g?blogID= 7438819944636028340


Идентификационный номер, выделенный жирным шрифтом, представляет собой номер идентификатора моего блога. Измените его на идентификатор вашего  блога. Чтобы получить или увидеть «идентификатор» войдите в админпанель  блогера, выберите нужный блог, если у вас их несколько. Затем посмотрите на адресную строку вашего блога.


Создали свою ссылку и пока сохраните её в блокноте или черновике. Рассмотрим варианты её размещения.

Как установить кнопку присоединиться в верхней части колонки комментариев

Идём во вкладку тема и находим строку ]]></b:skin> и над ней устанавливаем код

.comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;}
.comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}


Затем там же в шаблоне ищем строку

<h4 id='comment-post-message'>


 или

<h4 id='comment-post-message'><data:postCommentMsg/></h4>


 и заменяем одну из них на

<h4 id='comment-post-message'>
<span class='subscrnya'><data:postCommentMsg/></span>
<span class='rightx'><b:if cond='data:top.commentLabel'>
<a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>стать читателем блога</a>
  </b:if>
  </span>
 </h4>


<h4 id='comment-post-message'> или <h4 id='comment-post-message'><data:postCommentMsg/></h4> это код родных комментариев Блоггер включенных по умолчанию. 

Сохраните шаблон. Вот так примерно это выглядит

подписка


Добавить кнопку в меню навигации «Follow». Просто добавим ссылку в пункт меню.

Так примерно

<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>Об авторе</a></li>
<li><a href='add_url'>Содержание</a></li>
<li><a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>Форма подписки</a></li>
</ul>
</nav>


Живой пример на моём блоге дела домашние в меню под шапкой. Можете попробовать, чтобы увидеть, как это будет выглядеть при нажатии.

Добавить кнопку - ссылку подписаться в сайдбар

<button onclick="window.location='https://www.blogger.com/follow.g?blogID=7438819944636028340'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Присоединиться к блогу</b></button>


Добавить кнопку стать постоянным читателем в сообщении блога

В любом месте сообщения блога, переходим в режим HTML и вставляем код


<a href="https://www.blogger.com/follow.g?blogID=7438819944636028340" target="_blank"><button><b>подписка</b></button></a>




Уберите теги <button>...</button> останется только ссылка.

Или такая кнопка. Просто взяла вариант из сайдбара.



В последнем варианте можно сделать свою собственную кнопку - картинку. Подробнее здесь. А уж мотивирующий к подписке текст, придумайте сами.

Одним словом, вариантов много. И мимо интересной кнопки, точно не пройдут мимо. Включаем фантазию, а установка кнопки дело совсем не сложное. Можно и гаджет ПЧ оставить и ещё кнопочку куда - нибудь подключить. Хуже не будет.



хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Привет друзья. И опять про новый интерфейс админ панели Блоггер. На этот раз некоторые изменения самого редактора сообщений. Для того, чтобы посмотреть на них и поиграться, вам следует переключиться на обновлённые интерфейс.

Там достаточно всё понятно, но есть некоторые дополнения, которые порадовали,  и некоторые изменения с которыми нужно поиграться, чтобы понять как это работает. Ну, давайте по порядку.

Переключаемся на новый интерфейс. Сейчас, чтобы создать новое сообщение, в правм нижнем углу нажимаем на красную кнопку со знаком +. Вот и попадаем в редактор создания нового поста.

обновлённый редактор в блоге


Тут всё понятно. Те же функции с форматированием текста, цвета, выравниваем и прочим. Обратите внимание на кнопки в самом верху справа. Особенно на вот эти самые первые стрелочки < >.  Если нажать на них , то попадаем в режим HTML.

новый редактор Блоггер

Тут уже нет привычных кодов <div dir="ltr" style="text-align: left;" trbidi="on">  о которых я писала в этом сообщении. Они позволяли переводить ваш блог на такие языки как арабский, сирийский иврит и другие, которые читаются справа налево. Сейчас вы сами можете это задать (или нет) в новых настройках. Для этого нажмите на три кнопки ДОПОЛНИТЕЛЬНО в верху редактора. Немного о функциях и что мы здесь имеем

создание таблиц в Блоге

Оформить как цитату, оформить как код участок текста у меня не получилось. Как и с форматированием. Ну, положим, что у меня в шаблоне свои коды для этих целей установлены. Попробовала на тестовом простом блоге, получилось совсем каряво. Поиграйтесь здесь.

Порадовало, что появилась функция создания таблиц, с возможностью добавления строк и ячеек. нужная опция. Не надо вставлять коды и пользоваться сторонними редакторами.


И ещё одно новшество. Вставка видео с компьютера и YouTube за считанные минуты без установки кода в формате Html. Нажимаем на иконку видео и тут же находим нужный ролик. Выбираем и жмём ВСТАВКА и вуаля...

вставка видео в новом редакторе блога

Для начинающих блоггеров очень удобно. Однако вставить видео с  Фейсбука и встроить ролик из других социальных сетей придётся старым способом. 

А так с боку все окончательные настройки сообщения. В верхне части те же функции просмотра, поправки и публикации поста. 

Ну , как - то так. Есть ещё не значительные изменения, но там всё понятно. Нужно посидеть и попробовать все опции у себя в черновике. 

Всем добра и здоровья. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Привет, друзья. У меня был пост как сделать качающуюся картинку в блоге при наведении на неё курсора.  Вот недавно один мой подписчик спрашивал, как таких раскачивающихся картинок установить несколько. Сложного нет ничего. Так же, используя свойство keyframes и CSS трансформацию, которая и позволит  раскачивать, поворачивать и масштабировать  картинки в разных вариантах.

качающиеся картинки
ЭТО ТОЛЬКО ИЗОБРАЖЕНИЕ

Много слов писать не буду. Просто для начала скопируйте, приведённый ниже код и просмотрите его в этом редакторе. Обратите внимание, что каждое изображение раскачивается по разному.

Для начала мы создадим 3 класса, назовём их  swing1, swing2,  swing3. Зададим нужную ширину и высоту. А затем общие стили CSS и отдельно для каждой картинки.

<img class="swing1" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />

<img class="swing2" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />

<img class="swing3" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />
 <style>
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing1:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
.swing2:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: swing;
animation-name: swing;
}
.swing3:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-animation-name: swing;
animation-name: swing;
}
</style>


Вставляем нужные адреса картинок в строках

https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png

Меняем по необходимости размер. Каждый из вариантов я отметила разным цветом. Если нужно 3, копируйте код целиком. Можно оставить и 2, и 1, соответственно, убрав лишние. На ваше усмотрение. Так же можно разместить любые баннеры, или сделать качающийся текст. Код вставляем в тело сообщения в формате HTML или в гаджет HTML/JavaScript. 

Всем добра и до встречи. 



здесь можно оформить подписку на новые шпаргалки

Введите Ваш email



Доброго времени суток, друзья. Сегодня у меня для вас 2 варианта слайдера для изображений. По задумке они будут располагаться в гаджете над  шапкой блога или под ней. Несмотря на то, что коды каждого кажутся громоздкими, они вполне себе легко настраиваемые и лёгкие в использовании. 

Вариант 1. 

Слайдер без подключения библиотеки jquery. Идёт плавная смена картинок. При наведении курсора на сам слайдер приостанавливается смена изображений, при клике на кнопку, которые вверху, тоже. При желании можно сделать каждую картинку кликабельной, с переходом на нужную страницу. Слайдер резиновый, подойдёт под любой экран. Готовый код рассчитан на 5 слайдов, но при необходимости можно добавить или удалить. 
Как он работает можно увидеть в этом редакторе. Скопируйте код и вставьте в поле. 

резиновый слайдер


Код

<div id="odin">
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="природа южного урала"/>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="природа южного урала"/>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="природа южного урала"/>
<img src="http://s4.fotokto.ru/photo/full/563/5639963.jpg" alt="природа южного урала"/>

  <div>
    <button type="button" value="0">1</button>

    <button type="button" value="1">2</button>

    <button type="button" value="2">3</button>

    <button type="button" value="3">4</button>

    <button type="button" value="4">5</button>
      </div>
</div>
<style>
#odin {
  position: relative;
  max-width: 100%;  /* можно ограничить ширину в px  */
  max-height: 340px;  /* можно ограничить высоту в px  */
  overflow: hidden;
}
#odin img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  outline: 300px solid #fff;
}
#odin div {
  position: relative;
  height: 0;
  margin-bottom: 60%;
  z-index: 3;
}
#odin img:nth-of-type(1) {
  z-index: 2;
}
#odin button:nth-of-type(1) {
  opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
               function (callback) {
                   return window.setTimeout(callback, 1000 / 60);
               };
})();
function slider(f, img, button, V, Vo) {
  var iii = 0,
      start = null,
      clear = 0;
  function step(time) {
    if (start === null) start = time;
    var progress = time - start;
    if (progress > V) {
      start = null;
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
        button[i].style.opacity = "1";
      }
      img[iii].style.zIndex = "1";
      iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
      img[iii].style.zIndex = "2";
      img[iii].style.opacity = "0";
      button[iii].style.opacity = ".4";

    } else if(img[iii].style.opacity != "") {
      img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
    }
    if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
  }
  requestAnimationFrame(step);
  f.onmouseenter = function() { if(clear == "0") clear = "1"; }
  f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }
  for (var j=0; j<button.length; j++) {
    button[j].onclick = function() {
      clear = "2";
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
      }
      img[this.value].style.zIndex = "2";
      img[this.value].style.opacity = "1";
      for (var k=0; k<button.length; k++) {
        button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
      }

    }

  }

}
var f = document.getElementById('odin'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '4000', '1000');  // '2000' &#8212; скорость смены картинок, '1000' &#8212; скорость прозрачности
</script>


В строках, отмеченными жёлтым вставьте адреса ваших изображений.

Если необходимо сделать изображение кликабельным пишем так

 <a href="здесь адрес страницы, на которую будет осуществлён переход.">Горы<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/></a>


При дополнении картинки добавляем строку

<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>


При этом необходимо добавить соответственно и нумерацию


<button type="button" value="5">6</button>


Остальные настройки я дала в комментариях в коде.

Вариант 2. 

Этот адаптивны слайдер с заголовком и описание картинок. Работает с подключением jquery. Я отметила первую строку красным цветом. Это и есть библиотека jquery. Скорее всего она уже подключена у вас в блоге. Тогда строку убрать нужно. Если нет, оставляйте код как есть.

адаптивный слайдер
Код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="slider" class="slider">
<ol class="slider_indicators">
<li class="slider_indicator slider_indicator_active" data-slide-to="0"></li>
<li class="slider_indicator" data-slide-to="1"></li>
<li class="slider_indicator" data-slide-to="2"></li>
<li class="slider_indicator" data-slide-to="3"></li>
</ol>
<div class="slider_items">
<div class="slider_item slider_item_1 slider_item_active">
    <div class="slider_text">
        <h1>Природа Южного Урала</h1>
        <h2>Подзаголовок </h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="slide1" />
</div>
<div class="slider_item slider_item_2">
<div class="slider_text">
        <h1>Заголовок слайда №2</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="slide2" />
</div>
<div class="slider_item slider_item_3">
    <div class="slider_text">
        <h1>Заголовок слайда №3</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="slide3" />
</div>
<div class="slider_item slider_item_4">
    <div class="slider_text">
        <h1>Заголовок слайда №4</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
        </div>
        <img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide4" /></div>
</div>

</div>
<style>
.slider {position:relative;}
.slider_items{position:relative;width:100%;overflow:hidden;max-height:500px;}
.slider_item{position:relative;display:none;width:100%;transition: transform 0.6s ease;backface-visibility: hidden;overflow:hidden;}
.slider_item_active,.slider_item_next,.slider_item_prev{display:block;}
.slider_item_next,.slider_item_prev{position: absolute;top:0;}
.slider_item_next.slider_item_left,
.slider_item_prev.slider_item_right{transform: translateX(0);}
.slider_item_next,
.slider_item_right.slider_item_active{transform: translateX(100%);}
.slider_item_prev,
.slider_item_left.slider_item_active{transform: translateX(-100%);}
.slider_control{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:49%;color:#fff;opacity:.5;}
.slider_control:hover,
.slider_control:focus{opacity:1;}
.slider_control_prev{left:0;}
.slider_control_next{right:0;}
.slider_control::before {content: '';height:80px;width:19px;position:absolute;display:inline-block;background:transparent no-repeat center center;background-size: 100% 100%;}


.slider_indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none;}
.slider_indicator{position: relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;border-radius:6px;}
.slider_indicator::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator_active {background-color:#f00;}
.slider_items img{display:inline-block;height:auto;width:100%;vertical-align:bottom;}
.slider_text{z-index:3;position:absolute;top:10%;left:50%;margin-left:-400px;max-width:400px;}
.slider h1,.slider h2,.slider p{color:#fff;text-shadow:0 0 3px #000,0 0 10px #333;}

@media (max-width:1300px){
.slider_control_prev{left:5%;width:100px;}
.slider_control_next{right:5%;width:100px;}
}

@media (max-width:1050px){
.slider_text{top:10%;left:50%;margin-left:-200px;max-width:400px;}
}

@media (max-width:720px){
.slider_items{max-height:300px;}
.slider_items img{width:auto;height:100%;}
.slider_control_prev{display:none;}
.slider_control_next{display:none;}
.slider_text{top:1%;left:4%;right:4%;margin-left:0px;max-width:100%;}
}</style>
<script>
jQuery(document).ready(function($){

'use strict';
var slider=function(e){
const ClassName = {INDICATOR_ACTIVE: 'slider_indicator_active',ITEM: 'slider_item',ITEM_LEFT: 'slider_item_left',ITEM_RIGHT: 'slider_item_right',ITEM_PREV: 'slider_item_prev',ITEM_NEXT: 'slider_item_next',ITEM_ACTIVE: 'slider_item_active'}
var d=!1,u=0,i={},v={},I={},f={selector:"",isCycling:!0,direction:"next",interval:5e3,pause:!0},r=function(s){var n;return v.forEach(function(e,t){e===s&&(n=t)}),n},l=function(e,t,s){var n,a,i=ClassName.ITEM_RIGHT,r=ClassName.ITEM_PREV,l=v[t],c=v[s],o=function(){l.classList.remove(ClassName.ITEM_ACTIVE),l.classList.remove(i),c.classList.remove(r),c.classList.remove(i),c.classList.add(ClassName.ITEM_ACTIVE),window.setTimeout(function(){f.isCycling&&(clearInterval(u),C()),d=!1,l.removeEventListener("transitionend",o)},700)};d||(d=!0,"next"===e&&(i=ClassName.ITEM_LEFT,r=ClassName.ITEM_NEXT),c.classList.add(r),n=t,a=s,I.length===v.length&&(I[n].classList.remove(ClassName.INDICATOR_ACTIVE),I[a].classList.add(ClassName.INDICATOR_ACTIVE)),window.setTimeout(function(){c.classList.add(i),l.classList.add(i),l.addEventListener("transitionend",o)},0))},a=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=v.length-1,a=0===s?n:s-1;"next"===e&&(a=s==n?0:s+1),l(e,s,a)},C=function(){f.isCycling&&(u=window.setInterval(function(){a(f.direction)},f.interval))},t=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=e.target.getAttribute("data-slide-to");if(e.target.hasAttribute("data-slide-to")||e.target.classList.contains("slider_control"))if(e.target.hasAttribute("data-slide-to")){if(s===n)return;l(s<n?"next":"prev",s,n)}else e.preventDefault(),a(e.target.classList.contains("slider_control_next")?"next":"prev")};for(var s in e)s in f&&(f[s]=e[s]);return i="string"==typeof f.selector?document.querySelector(f.selector):f.selector,v=i.querySelectorAll("."+ClassName.ITEM),I=i.querySelectorAll("[data-slide-to]"),C(),i.addEventListener("click",t),f.pause&&f.isCycling&&(i.addEventListener("mouseenter",function(e){clearInterval(u)}),i.addEventListener("mouseleave",function(e){clearInterval(u),C()})),{next:function(){a("next")},prev:function(){a("prev")},stop:function(){clearInterval(u)},cycle:function(){clearInterval(u),C()}}}({
selector:".slider",
isCycling:true,
direction:"next",
interval:2000,
pause:false
});

});
</script>


Так же меняйте адреса картинок на свои. Пишите нужный текст в заголовках и описании.
Для добавления, опять же прописываем дополнительные участки в коде HTML.

<div class="slider_item slider_item_5">
    <div class="slider_text">
        <h1>Заголовок слайда №5</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
        </div>
        <img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide5" /></div>
</div>


И в списке ol так же добавим

<li class="slider_indicator" data-slide-to="4"></li>


Тут нужно понять, что первый индикатор имеет дополнительный класс slider_indicator_active и порядковый номер начинается с - 0, не с единицы.

direction:"next",  направление смены слайдов. Вместо next можно написать prev будет в другую сторону
pause:false  остановка слайдера, если навести на него курсор. В данном случаи - отключено. Чтобы включить нужно написать true.
interval:2000,  время смены слайда

Каждый из кодов устанавливайте в гаджет  HTML/Java script и перемещайте в нужное место макета блога.

Посмотрите, умудрилась установить оба слайдера на тестовом блоге


В заключении хочу оговориться. Оба кода вполне могут работать и на страницах блога. Попробуйте. Но тут придётся играться с разными значениями. Да и такие слайдеры очень красиво смотрятся  по всей ширине экрана. Поэтому и предложила варианты над/под шапкой блога. 

Всем терпения, здоровья. Если возникнут вопросы, пишите в комментариях.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Пользовательский поиск