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

Это просто фото и здесь спойлер не откроется

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

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

Демонстрация

<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
  <label for="punch">Нажми для показа</label>
  <br />
<div>
<img alt="Ключевое слово" src="адрес картинки" style="height: auto; max-width: 100%;" />
  </div>
</div>
<style>
div.canustrating {
  color: #f7f4f4;
  text-shadow: 0 1px 0 #444040;
  width: 495px;
  padding: 1px;
  border-radius: 3px;
  margin: 1rem;
  text-align: center;
  font-family: Arial Black, sans-serif;
  margin: 0 auto;
}

div.canustrating label {
  display: block;
  background: #373c54;
  font-size: larger;
  border-radius: 5px;
  padding: 15px;
  transition: .4s all linear;
  border: 2px solid #f5f3f3;
  box-shadow: 1px 1px 5px rgba(72, 69, 69, 0.7), 1px 0px 10px 3px rgba(33, 31, 31, 0.44);
}

div.canustrating label:hover {
  cursor: pointer; background: #380f0f;
}
input.mesnongengas ~ div {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.mesnongengas:checked ~ div { height: 215px;
}
input.mesnongengas:checked + label { background: #980c0c;
}

input.mesnongengas {
  display: none;
}</style>

В данном примере под вопросом спрятана картинка, в качестве ответа на загадку. В случае с текстом в коде замените адрес картинки на нужную информацию. Как - то так

<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
  <label for="punch">Нажми для показа</label>
  <br />
<div>
Тут всё самое интересное, важное, нужное
  </div>
</div>

Для реализации нужно скопировать код, написать ваш текст и установить его целиком прямо в редакторе в режиме HTML в нужном месте.
Со стилями самой кнопки тоже можно поиграться. Хотя бы даже с цветом, меняя свойства background:. Таблица есть здесь.

Начинающим блогерам не всегда бывает понятно сразу, а попробовать хочется. Пишите в комментариях - во всём разберёмся.

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

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

Всё абсолютно просто. Зададим цветную рамку и с помощью свойства shadow добавим тень. Я в тестовых примерах всегда делаю специально более контрастные цвета, чтобы было понятнее. Вы можете сделать нужные вам. И об этом ниже.
А теперь посмотрите на тестовом блоге как всё это будет выглядеть. Наведите курсор на любое изображение.

Демонстрация

В спокойном положении картинка, а при наведении рамка с тенью. Тут должна заметить - лучше он смотрится если вы  убрали в шаблоне, заданную по умолчанию рамку вокруг изображений в блоге. Хотя, можно и с ней попробовать.

Код

.post img {
padding: 8px;
background: #ffffff;  /* основной фон */
border: 1px solid #cccccc; /* размер и цвет рамки */
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB; /* цвет при наведении */
border:1px solid #FF3300; /* цвет рамки при наведении */
-moz-box-shadow:0 0 10px 2px #FF0000;
-webkit-box-shadow:0 0 10px 4px #FF0000;
box-shadow:0 0 10px 4px #FF0000;
}

Комментариями в коде я отметила основные цвета. Поменяйте так же значения -moz-box-shadow: и webkit-box-shadow: на свои. Размеры внешней тени 5px; на желаемые.

Для применения такого эффекта ко всем изображениям, готовый код устанавливаем во вкладке Тема перед строкой ]]></b:skin>.  Если же решите его применять иногда, то просто заключите этот код в теги

<style>тут весь код <style>

Устанавливайте непосредственно в нужном месте сообщений, в режиме HTML.

Сложного ничего нет, и такой hover эффект сделает ваш блог более интересным.

Всем удачи, солнечных денёчков и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

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

Особой  функции она не несёт, но всё же, такая маленькая и совсем не навязчивая  "залипалочка" для посетителей. 

Демонстрация 

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

Это код

<style>
#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#CD5555;
  color:#fff;
  border-radius:3px;
  font-size:14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#CD5555;
}</style>
<div id='scroll'></div>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Жёлтым цветом я выделила CSS стили для самой кнопки - отступы, общий фон, цвет и размер шрифта. Зелёный - это цвет стрелочки справа.

Создайте свой дизайн и готовый код установите в гаджет HTML/JavaScript, где - нибудь в самом низу макета.

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

Привет, друзья. Не все шаблоны Блоггер дают возможность настроить внешний вид подвала (футера). А ещё есть и некоторые сторонние шаблоны, где футер вообще не предусмотрен. У меня в предыдущей версии шаблона такое было. А ведь этот элемент макета может содержать много информации и помочь разгрузить сайдбар. Можно добавить счётчики статистики или  форму связи. Всё что угодно.

Так что сегодня создадим футер из трёх колонок для размещения в них дополнительных гаджетов и зададим подходящие для вашего дизайна стили. 

Вот так выглядит обычный футер  в шаблонах Блоггер. Скучно, одиноко и не красиво.

Будем исправлять ситуацию и сделаем его выразительнее и интереснее. Как - то так

Демонстрация 

Как сделать футер в 3 колонки

Шаг 1. Заходим в админпанель блога - вкладка тема - изменить HTML. Находим закрывающийся тег </body> и над ним вставляем следующий код

<div id='lower'>  <div id='lower-wrapper'>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar1' preferred='yes'>  </b:section>  </div>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar2' preferred='yes'>  </b:section>  </div>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar3' preferred='yes'>  </b:section>  </div>  <div style='clear: both;'/>  </div> </div>

Шаг 2. Там же, во вкладке тема нужно найти строку ]]></b:skin> и так же над ней добавляем этот код 

#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#00868B;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE; 
       background:#fff; 
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%; 
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
      color:#53868B; 
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

Этим мы задали стили для футера. И давайте сразу смотреть что можно поменять под дизайн вашего блога. 

  background:#00868B;общий фон футера

 жёлтым цветом отмечены границы, фон и ширина поля гаджетов

 color:#53868B; цвет заголовков гаджетов и размер шрифта

Если ещё пофантазировать и добавить некоторые стили можно получить примерно такой вариант.

Вместо   background:#00868B; вставила фоновую картинку - background:url(адрес картинки).

Добавила рамку и закругление углов

border:5px solid #DEDEDE;
border-radius: 50px 50px 0px 0px;

Творите, что хотите.

В конечном результате у нас появится поле с тремя дополнительными колонками для гаджетов. Даже если у вас уже есть сам по себе футер в макете и в нём размещена какая - то информация, можно просто переместить виджеты (гаджеты) в новый. Или убрать и установить снова, во вновь созданный.

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

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

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

<div class="container">
<div class="blocks">
<div class="block">
<img alt="" class="block__img" height="340" src="https://3.bp.blogspot.com/-mf6xkEfEwcw/XNeTiMX7MrI/AAAAAAAAMDg/_mnFIXaI1TEC2_3m7oKTAqgNvG5xkj8sQCLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0.jpg" width="600" />

<div class="block__body">
<h3>
Мандаринка </h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href=" ###">подробнее</a>

        </div>
</div>
<!-- .block -->

<div class="block">
<img alt="" class="block__img" height="340" src="https://4.bp.blogspot.com/-d_LY7yj7cW0/XNeTlyrPp4I/AAAAAAAAMDk/xKPb09UVXkMrvus-FO6NC06SsABtYk8HACLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0%2B1.jpg" width="600" />

<div class="block__body">
<h3>
Голубая олуша</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href="###">подробнее</a>

        </div>
</div>
<!-- .block -->

  </div>
<!-- .blocks -->   

</div>
<style>
.container {
  padding: 1em;
}
.blocks {
  display: flex;
  flex-flow: row nowrap;
}
.block {
  position: relative;
  width: 42.3%;
  height: 340px;
  max-height: 340px;
  margin-right: 1em;

  border: 1px solid #ccc;
  overflow: hidden;
}
.block:hover .block__body {
  position: absolute;
  top: 0;
  background: #2980b9;
  color: #fff;
  height: 100%;
  transition: top .5s;
}
.block:hover .block__body h3 {
  color: #fff;
}
.block__body {
  padding: 1em;
  top: 100%;
} .btn-learnmore{
  border-radius: 100px;
  padding: 0;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  cursor: pointer;
  overflow: visible;
  padding: 11px 23px;
  background-color: none;
  font-weight: bold;
  text-transform: uppercase;
  outline: none;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.5em;
  color: #fff;
}
.btn-learnmore:hover{
  background: #fff;
  color: #2f7195;
}
</style>

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

Вместо решёток вставляйте адреса страниц, на которые будет осуществляться переход по ссылке . Ну и ваш текст с заголовком.

Если есть необходимость добавить ещё картинки, в первом коде HTML нужно добавить ещё вот такой фрагмент

<div class="block">
<img alt="" class="block__img" height="340" src="https://4.bp.blogspot.com/-d_LY7yj7cW0/XNeTlyrPp4I/AAAAAAAAMDk/xKPb09UVXkMrvus-FO6NC06SsABtYk8HACLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0%2B1.jpg" width="600" />

<div class="block__body">
<h3>
Голубая олуша</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href="###">подробнее</a>

        </div>
</div>
<!-- .block -->

Совершенно не сложные настройки. Готовый код, как всегда, устанавливает в редакторе Блоггер в режиме HTML. Можно организовать целую галерею картинок с всплывающим описание и кнопкой для перехода на отдельную страницу.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...