Всем, привет. Очередной слайдер с кнопками навигации на чистом CSS для установки в блоге. Без всяких лишних библиотек. При всей простоте достаточно красиво смотрится. Прост в установке. Легко справится даже начинающий блогер.


Для просмотра перейдите на тестовый блог


Код слайдера скопируйте в блокнот, а настройки разберём ниже


<div class="slider">
  <input type="radio" name="switch" id="btn1" checked>
  <input type="radio" name="switch" id="btn2">
  <input type="radio" name="switch" id="btn3">

  <div class="switch">
    <label for="btn1"></label>
    <label for="btn2"></label>
    <label for="btn3"></label>
  </div>

  <div class="slider-inner">
    <div class="slides">

      <img src="https://media.tvzvezda.ru/news/vstrane_i_mire/content/201711170756-ht5v.htm/1.jpg"/>

      <img src="https://icdn.lenta.ru/images/2017/10/30/17/20171030172107800/pic_1422d45d2e2fb896ddc1b5ecdbb69c7a.jpg"/>

<img src="https://files.adme.ru/files/news/part_61/616755/preview-21983715-650x341-98-1484577240.jpg"/>
    </div>
  </div>
</div>

<style>
.slider {
  position: relative;
  width: 680px;
  margin: 50px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider input[name="switch"] {
  display: none;
}
.switch {
  position: absolute;
  left: 0;
  bottom: -40px;
  text-align: center;
  width: 100%;
}
.switch label {
  display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  margin: 0 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  border-radius: 50%;
  border: 5px solid #2f363c;
  background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
  background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
  background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
  background-color: white;
}
.slider-inner {
  overflow: hidden;
}
.slides {
  width: 300%;
  transition: all 0.5s;
}
.slides img {
  width: 680px;
  height: 340px;
  float: left;
}
#btn1:checked~slider-inner slides {
  transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
  transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
  transform: translate(-1360px);
}
</style>


В коде розовым цветом я отметила адреса своих изображений - устанавливайте свои. Слайдер рассчитан на 3 слайда. Достаточно. Ширина его 680px;

Готовый код устанавливается в гаджет HTML/JavaScript над сообщениями блога.

Ещё варианты слайдеров для изображений

Простой слайдер для картинок в блоге
Слайдер - аккордеон
Красивый слайдер изображений с оригинальным эффектом

Сегодня у меня всё. Всем удачи и добра. Увидимся.

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

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

Реклама
Всем, привет. Немножко отступим от настроек и сделаем шпаргалку о создании favicon для нашего блога. Я обратила внимание, что у многих моих читателей её вообще нет или стоит стандартный блоггеровский значок. Этот пост я писала давно и решила его дополнить и обновить. Вероятно, не все обращают на это внимание или не знают, как это сделать.

favicon - что это?  

Это небольшого размера значок, который отображается в окне браузера рядом с названием блога или сайта перед URL страницы. Посмотрите вверху у меня перед названием статьи. Никакой особо важной функции он не
Привет, друзья. И снова я про красивое оформление участка текста. При написании сообщения все мы каким - то образом выделяем нужный участок текста, чтобы заострить  на нём внимание читателей. Да и просто сплошной текст тяжело воспринимается. Предложу вам ещё 2 варианта, как можно выделить нужный участок статьи.

В статье я приложила только скриншоты для наглядности. Проверить в работе вы сможете если скопируете нужный код и установите его в этом редакторе кодов.

1. Оформим скорее подзаголовок к нужному абзацу  в виде ленты с загнутым уголком.

оформление текста

<center>
<div class="pvoba">
уголки и рамки для оформления текста
</div>
<style>
.pvoba {
  position: relative;
  display: inline-block;
  width: 383px;
  margin: 7px 0 37px 0;
  padding: 28px;
  color: #f3eaea;
  text-align: center;
  background: #2b22a0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(16, 16, 16, 0.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, rgba(0, 0, 0, 0) 20px, #334ab9 0);
  filter: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvoba::before {
  content: ' ';
  position: absolute;
  top: 30px;
  right: 0;
  background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 no-repeat;
  width: 30px;
  height: 30px;
  transform: rotate(180deg);
}</style></center>

2. Текст заключённый в анимированные уголки. При наведении мыши уголки расходятся и возвращаются на место.

оформление текста


<div class="kavs">
<div class="tekst">
и здесь очень красивый и важный текст
  </div>
</div>
<style>.kavs {
  display: inline-block;
  width: 495px;
  position: relative;
  border: 1.5px solid #1b629e;
  transition: all .3s ease;
  margin: 5px;
  cursor:pointer;
}
.kavs:before, .kavs:after {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  background: #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
}
.kavs:before {
  width: calc(100% + 4px);
  height: 75%;
  z-index: 1;
  transition: height 0.6s;
}
.kavs:after {
  height: calc(100% + 4px);
  width: 85%;
  z-index: 1;
  transition: width 0.7s;
}
.kavs:hover:before, .kavs:focus:before {
  height: 50%;
}
.kavs:hover:after, .kavs:focus:after {
  width: 74%;
}
.tekst {
  padding: 29px;
  z-index: 2;
  position: relative;
  text-align: center;
}</style>


Как красиво оформить списки на странице.

Сейчас стало очень модным и актуальным использовать списки в теле поста. Списком могут быть оформлены важные моменты, рецепты, инструкции и прочее.  В Блоггере можно воспользоваться специальными инструментами прямо в панели управления. Но красиво оформленный список это не только элемент дизайна. Информация списком лучше воспринимается читателем. Предлагаю вам 2 варианта оформления списков на чистом CSS, что не несут нагрузки. hover эффект элементов списка задаст им больше привлекательности.

1. При наведении курсора лёгкое движение указателя. 

оформление списка


<ul class="spisok ktedsan">
<li>элемент списка 1</li>
<li>элемент списка 2</li>
<li>элемент списка 3</li>
<li>элемент списка 4</li>
<li>элемент списка 5</li>
</ul>
<style>
.spisok  {
  margin-bottom: 8px;
  padding:0;
  list-style: none;
  counter-reset: li;
  cursor:pointer;
}
.spisok  li {
  position: relative;
  border: 2px solid #cac1c1;
  background: #eaeaea;
  padding: 12px 18px 14px 28px;
  margin: 10px 0 10px 53px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.spisok  li:hover {
  background: #e5eaf1;
  border: 2px solid #91b5d2;
}
.spisok  li:before {
  line-height: 32px;
  position: absolute;
  top: 4px;
  left: -38px;
  width: 38px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #f3eeee;
  background: #5b9dd4;
  counter-increment: li;
  content: counter(li);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.spisok  li:hover:before {
  width:45px;
  background: #2972b1;
}
.spisok  li:after {
  position: absolute;
  left: 0;
  top: 4px;
  content: "";
  height: 0;
  width: 0;
  border: 16px solid transparent;
  border-left-color: #629ed0;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s
}
.spisok  li:hover:after {
  margin-left: 6px;
  border-left-color: #2973b3;
}

.ktedsan {
width: 540px;
}
</style>


2. Тоже элемент списка, но с другим эффектом.

оформление списков

<ul class="spisok1 kadergan1">
<li>Красивое оформление списков для материала</li>
<li>Красивое оформление списков для материала</li>
<li>Красивое оформление списков для материала</li>
<li>Красивое оформление списков для материала</li>
<li>Красивое оформление списков для материала</li>
</ul>
<style>
.spisok1 {
  margin: 18px 0 0;
  padding:0;
  list-style: none;
  counter-reset: li;
}
.spisok1 li {
  border: 2px solid #dad0d0;
  background: #f1efef;
  position: relative;
  margin-bottom: 17px;
  padding: 15px 12px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.spisok1 li:hover {
  z-index: 1;
  border: 2px solid #ADCEE9;
}
.spisok1 li:before {
  border: 2px solid #a7b9c7;
  position: absolute;
  top: -24px;
  padding: 1px 14px;
  font-size: 11px;
  font-weight: bold;
  color: #3b74a5;
  background: #edeff3;
  counter-increment: li;
  content: counter(li);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.spisok1 li:hover:before {
  border: 2px solid #337AB7;
  background: #337AB7;
  color: #FFF;
  cursor:pointer;
  -webkit-transform: translate(-12px, 0);
  -ms-transform: translate(-12px, 0);
  -o-transform: translate(-12px, 0);
  transform: translate(-12px, 0);
}
.spisok1 li:after {
  content: "";
  position: absolute;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: width;
  transition-property: width;
  z-index: -1;
  background: #f0f2f5;
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}
.spisok1 li:hover:after {
  width: 100%;
}

.kadergan1 {
width: 523px;
}
</style>


Во всех кодах можно изменять фоновый цвет на свой вкус. Для добавления дополнительных элементов списка, нужно просто добавлять строки

<li>Красивое оформление списков для материала</li>

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

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

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

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

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

Доброго времени суток, друзья. Я уже писала как изменить цвет копируемого текста в блоге. И сегодня покажу небольшую фишку, как выделить разными цветами отдельные участки в сообщении при копировании. 

выделить цветом копируемый текст

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


Как делается выделение текста разным цветом

Просто задаём отдельный класс для каждого цвета (допустим красный)

<div class="red"> Здесь будет весь необходимый текст.</div>


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

::selection {background: #ff0000;}
::-moz-selection {background: #ff0000;}


чтобы изменить цвет букв допишем 

::selection {background: #ff0000; color: #fff;}
::-moz-selection {background: #ff0000; color: #fff;}

И так к каждому абзацу или части текста.

Сейчас сами стили для ::selection. Я сделала 3 цвета. Можно использовать больше или меньше. Вот такой код CSS

<style>div.red::selection {background: #ff0000;}
div.red::-moz-selection {background: #ff0000;}

div.blue::selection {background: #03d5fb; margin-bottom:30px;}
div.blue::-moz-selection {background: #03d5fb;}

div.green::selection {background: #c1e124;}
div.green::-moz-selection {background: #c1e124;}</style>,


Как это реализовать в Блоггере 

Пишите в редакторе ваше сообщение. Затем переходим тут же в режим HTML и заключим нужный участок текста в теги

<div class="red"> Здесь будет весь необходимый текст.</div>

Следующий участок так же, но с другим классом

<div class="blue"> Здесь будет весь необходимый текст.</div>

и следующий

<div class="green"> Здесь будет весь необходимый текст.</div>

И в самом конце сообщения вставляем, там же, код CSS

Вот и всё. Если захотите такое часто применить, то стоит установить код CSS в шаблоне блога перед строкой ]]></b:skin>. Потом только при написание сообщения заключить нужные участки соответствующего класса.

<div class="red"> Здесь будет весь необходимый текст.</div>

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

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

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

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

Доброго времени суток, друзья. Небольшая заметка для тех кто только что переключился на комментарии BLOGGER. У многих до последнего момента стояли комментарии Гугл+, которые, как известно на данный момент BLOGGER "приказали долго жить".

На этой неделе уже несколько человек обратились с вопросами о комментариях, а именно, о корректной настройке блогеровских комментариев. При переключении на новый формат (BLOGGER). Они стали отображаться вот так - во всплывающем окне.

настройки комментариев в Блоггере

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

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

Зайдите в админпанель блога - НАСТРОЙКИ - СООБЩЕНИЯ, КОММЕНТАРИИ И НАСТРОЙКИ. Выбираете РАСПОЛОЖЕНИЕ КОММЕНТАРИЕВ. Нажимаете на кнопочку и в открывшемся списке отмечаете ВСТРОЕННЫЕ. Там же ниже можно настроить кто может оставлять комментарии. После этих изменений в правом углу вверху не забудьте сохранить настройки.

переключиться на профиль Блоггер

Всё, сейчас у вас, окно комментариев будет отображаться под вашими сообщениями, "как у всех".

Хочу ещё напомнить, поскольку само приложение Гугл+ скоро закроют, стоит уже перевести свой профиль этой сети на профиль BLOGGER.

Опять заходим в админпанель - ПОЛЬЗОВАТЕЛЬСКИЕ НАСТРОЙКИ. В разделе общие нужно выбрать BLOGGER. Вы сейчас можете нажать на ссылку ИЗМЕНИТЬ. попадаете на такую страницу, где нужно заполнить данные о себе. В общем - то всё просто.



Не забывайте сохранять изменения.


Чтобы более подробно ознакомиться со всеми настройками блога, скачайте книгу Блоггер для каждого

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

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

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