Привет, друзья. Предлагаю вам код красивого 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

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

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

Можно изменить дизайн комментариев блога на совершенно оригинальный вариант. Или хотя бы изменить дизайн окна формы создания у них. Можно нумерацию к каждому  комментарию добавить.

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

Наглядно посмотреть можно на тестовом блоге

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

Настройка и реализация до безобразия простая. Даже начинающие вести блог легко с этим справится.

Это код, который нужно скопировать.

<style>
.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
   border: 1px solid #DDD;
   margin: 0 2px;   text-decoration: none;   border-radius: 4px;   text-shadow: 0 1px 1px white;
   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   background: -webkit-linear-gradient(top, #fbfaf8, gainsboro);   background:    -moz-linear-gradient(top, #fbfaf8, gainsboro);   background:     -ms-linear-gradient(top, #fbfaf8, gainsboro);   background:      -o-linear-gradient(top, #fbfaf8, gainsboro);   text-transform: lowercase;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover {   box-shadow:         inset 0 1px 2px #c4c4c4;   border: 1px solid #AAA;   border-top-color: #999;   text-decoration: none;}
.thread-toggle {   border-radius: 4px 4px 0 0;   border-top: 2px solid $(link.hover.color);   text-shadow: 0 1px 1px white;   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   text-transform: lowercase;}
.thread-toggle a{text-decoration: none;}
.comments .continue a {   float: right;      border-radius: 0 0 4px 4px;}.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;}  .comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{   border: 1px groove #acacac;   padding: 10px;   border-radius: 5px;  box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}
.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }
.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #FFDAB9; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #D2B48C; }
.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #87CEFA; }</style>

Розовым я выделила 3 цвета для данного примера. Можно подобрать оттенки определённого цвета под индивидуальный дизайн. Сделать ярче или приглушённее цветовую гамму. В помощь вам эта таблица цветов HTML. Кто разбирается в стилях CSS тут целое поле для творчества - шрифты, радиусы, границы, тени и прочее.
Готовый код устанавливаем в разделе дизайн- гаджет HTML/JavaScript. Перетащить его куда - нибудь в самый подвал (футер) блога. Название писать не нужно. И постарайтесь запомнить где он у вас, а вдруг захочется поменять или убрать совсем.

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

Вот как просто можно разукрасить фон ленты комментариев.

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

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

Введите Ваш email

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