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

Во - первых оно обратит внимание читателя и в то же время его легко можно закрыть одним нажатием кнопки если уж очень "режет глаз".

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

Скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.

Код

<style>.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
</style>
<div class='note gradient'>
  <p>здесь любой ваш текст <b>и здесь ваш текст</b></p>
<div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

Можно отрегулировать padding:2px;margin:0 отступы, чтобы выровнять расстояние.

Можно изменить свойство gradient, выделенное зелёным, в зависимости от вашего дизайна. Есть замечательный генератор градиент фона. https://www.colorzilla.com/gradient-editor/

Чтобы изменить цвет фона, пожалуйста, замените background:#2b0c93 на возможные

.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
.blue{background:#1E88E5}
.cyan{background:#00ACC1}
.teal{background:#00897B}
.green{background:#43A047}
.yellow{background:#FDD835}
.orange{background:#FB8C00}
.brown{background:#6D4C41}
.grey{background:#546E7A}

Если возникнет идея и захочется в сообщении выделить несколько блоков разным цветом и в разных местах поста, тогда в каждом следующем варианте замените в коде везде note на note1, note2, note3 и  так далее.  И значение цвет background, соответственно. Я выше привела некоторые из них. 

Сейчас, когда определились с местом положения блока и фоном, устанавливайте код в гаджет HTML/JavaScript в любом месте макета блога. Или же в теле поста в нужном месте, перейдя в режим HTML.

Если нужно без разрыва сделать разноцветные блоки, как на первой картинке, код HTML можно прописать так

<style>
.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
</style>

<br />
<div class="note gradient">
Здесь блок с классом note gradient<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note red">
Здесь второй блокс классом note red<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note pink">
Здесь третий блок с note pink<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note purple">
Блок с note purple<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note indigo">
И блок с note indigo<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>

Так же скопируйте код и просмотрите в редакторе, ссылка на который выше.

Вот такие разноцветные блоки (окно для заметок, важных моментов, объявлений) можно легко и оригинально использовать на своих блогах.

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

Введите Ваш email

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

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

Мне очень нравится такое решение. Читаешь и обязательно обращаешь внимание на изображение. 

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

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

Возьмём тот же код и разберём всё остальное.

Код

<span style="width: 200px; float: right; text-align: center; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 10px; margin: 5px 0 5px 5px;">Здесь анонс или заголовок поста</span>

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

Если так у вас не получается сделать, прочитайте другой вариант в шпаргалке, упомянутой выше.

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

Эффекты для текста.
То же самое делаем с левой стороны.

Заменяем значение right на left.
Тут я ещё просто убрала рамку border-top: 3px solid #000; border-bottom: 3px solid #000;

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

Конечно же, много такого лепить не стоит. Всё же это лишние изображения и ссылки. 2-3 блока, думаю будет достаточно. Так или иначе, мы таким образом делаем ещё и внутреннюю перелинковку. А в этом варианте добавили и визуального эффекта.

Даже если не нужны картинки, просто ссылки тоже вариант.

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

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

Введите Ваш email

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

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

Код абсолютно не сложный, без всяких библиотек и тяжёлых скриптов. И устанавливается элементарно в гаджет HTML/JavaScript. Сама картинка и кнопка "закрыть" в svg формате. Наглядно посмотреть эту "конструкцию" можно на тестовом блоге в правом верхнем углу.

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

Весь код

<div class='app-android-outer'>
      <div aria-label='Open Content' class='app-android' onclick='var x=document.getElementById("appcontent");"block"===x.style.display?x.style.display="none":x.style.display="block";' role='button' tabindex='0' title='приветствие'>
<svg height='20' viewbox='0 0 24 24' width='20'><path d='M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8A1.5,1.5 0 0,0 19,9.5V16.5A1.5,1.5 0 0,0 20.5,18A1.5,1.5 0 0,0 22,16.5V9.5A1.5,1.5 0 0,0 20.5,8M3.5,8A1.5,1.5 0 0,0 2,9.5V16.5A1.5,1.5 0 0,0 3.5,18A1.5,1.5 0 0,0 5,16.5V9.5A1.5,1.5 0 0,0 3.5,8M6,18A1,1 0 0,0 7,19H8V22.5A1.5,1.5 0 0,0 9.5,24A1.5,1.5 0 0,0 11,22.5V19H13V22.5A1.5,1.5 0 0,0 14.5,24A1.5,1.5 0 0,0 16,22.5V19H17A1,1 0 0,0 18,18V8H6V18Z' fill='#fff'/></path></svg>
        </div>
      <div class='app-content slideInUp' id='appcontent'>
        <h3>Приветствую, Вас</h3>
<div class='app-content-on'>
блог <b>шпаргалки блогерши</b> о создании, настройках, оформлении и ведении блога на платформе BLOGGER <i>Надеюсь, что Вы найдёте здесь много полезной и интересной информации. Очень буду рада вашим отзывам
        </i></div>
<button aria-label='Close' class='app-close-button' onclick='this.parentElement.style.display=&quot;none&quot;'><svg height='18' viewbox='0 0 24 24' width='18'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#555'/></path></svg></button>
        </div>
        </div>

<style>
.app-android-outer {
  width: 50px;
  position: fixed;
  top: 0;
  right: 50px;
  z-index: 9999
}
.app-android {
  width: 50px;
  height: 55px;
  line-height: 55px;
  margin: 0;
  text-align: center;
  position: relative;
  float: right;
  cursor: pointer
}
.app-android svg {
  vertical-align: middle;
  opacity: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg {
  opacity: 1
}
.app-android:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.app-content {
  background: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android-4.png) no-repeat bottom left;
  width: 300px;
  padding: 0;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, .2);
  line-height: 1.3;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  outline: 0;
  position: absolute;
  right: 50%;
  top: 50px;
  margin-right: -40px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-user-select: text;
  z-index: 2;
  display: none;
}
.app-content h3 {
  margin: 0;
  padding: 5px 20px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  border-color: rgba(0, 0, 0, .2)
}
.app-content-on {
  padding: 10px 20px 16px;
  color: #333;
  font-size: 16px;
  font-weight: 400
}
.app-content-on svg {
  vertical-align: -7px;
}
.app-content:before {
  content: "";
  border-color: transparent;
  border-style: dashed dashed solid;
  border-width: 0 8.5px 8.5px;
  position: absolute;
  right: 0;
  margin-right: 30px;
  z-index: 1;
  height: 0;
  width: 0;
  border-bottom-color: #ccc;
  border-bottom-color: rgba(0, 0, 0, .2);
  top: -9.5px
}
.app-content:after {
  content: "";
  border-color: transparent;
  border-bottom-color: #fff;
  border-style: dashed dashed solid;
  border-width: 0 8.5px 8.5px;
  position: absolute;
  right: 0;
  margin-right: 30px;
  top: -8.5px;
  z-index: 1;
  height: 0;
  width: 0
}
.app-close-button {
  position: absolute;
  width: 18px;
  height: 18px;
  line-height: 28px;
  text-align: center;
  top: 7px;
  right: 5px;
  background: 0 0;
  border: none;
  cursor: pointer;
  padding: 0
}
.app-close-button:before {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  bottom: -15px;
  left: -15px;
  cursor: pointer
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@media screen and (max-width:960px) {
  .app-android-outer {
    right: 80px
  }
}
@media screen and (max-width:375px) {
  .app-content {
    margin-right: -75px
  }
  .app-content:after,
  .app-content:before {
    margin-right: 65px
  }
}
@media screen and (max-width:320px) {
  .app-content {
    margin-right: -95px
  }
  .app-content:after,
  .app-content:before {
    margin-right: 85px
  }
}</style>

Копируйте готовый код целиком, устанавливайте его в гаджет HTML/JavaScript в любое место макета блога. Иконка будет расположена именно в том месте, как задумано. В строке, отмеченной серым цветом, полупрозрачная  фоновая картинка самого всплывающего окна. За ненадобностью можно убрать из кода и задать предпочтительный основной фон на свой вкус, изменив значение background: #fff  на желаемое. 

2 варианта всплывающего окна
всплывающее окно в нижней части страницы

Спасибо всем за внимание. Увидимся. 

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

введите пожалуйста свой адрес электронной почты :

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

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

Перейдём к делу. Изначально мой тестовый блог выглядел так. Я отметила пространство (или задний фон всего полотна), который задан был в настройках темы.

Сейчас мы его поменяем на такую картинку

Чтобы получилось примерно вот так

Здесь я хочу обратить ваше внимание. Ширина блога в моём случае 1200 px. Размеры  фоновой картинки  1450 на 950 px. Картинка заполнила полностью всё пространство.

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

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

Особых навыков не нужно.

1. Подберите нужную картинку и скопируйте её адрес.
2.Копируйте приведённый ниже код и устанавливаете адрес своей картинки

body {
background: url(здесь адрес картинки)
no-repeat top fixed;
}

3. Идём во вкладку Тема - Изменить HTML находим   ]]></b:skin> и устанавливаем над этой строкой готовый код.

Результат будет виден при просмотре темы. Если вы остались им довольны смело нажимайте сохранить и любуйтесь новым шаблоном.

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

body {
background: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
no-repeat top fixed ;
background-size: 100%;
}

Со значением background-size: 100%; можно поиграться, меняя его на меньшее, пока не добьётесь желаемого.

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

Возможно Вы пропустили

Как сделать фоновое изображение на CSS
Постоянно меняющийся фон страницы
Шаблон блога на всю ширину страницы

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

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

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

Живую демонстрацию вы можете увидеть сразу ниже. Ссылки я дала на  некоторые страницы своего блога для наглядности. Вы, конечно, поменяете их на адреса своих страниц. Картинки и текст - соответственно.

Дорогие читатели "Здесь ссылка", Поздравляю вас с наступающим 2020 годом Здесь тоже ссылка. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом Здесь тоже ссылка' Принесет в делах согласье, В личной жизни — много счастья!."

Вот сам код.

<div class="wrapper tabled">
<div class="stage">
<div class="middled">
Дорогие читатели <a class="boo" href="http://www.shpargalochki.ru/">"текст ссылки"</a>, Поздравляю вас с наступающим 2020 годом<a class="boo" href="http://www.shpargalochki.ru/2019/12/podborka-variantov-oformleniya-bloga-na-novyj-god.html">текст ссылки</a>. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом <a class="boo" href="http://www.shpargalochki.ru/p/blog-page_1.html">текст ссылки</a> Принесет в делах согласье, В личной жизни — много счастья!."</div>
</div>
</div>

<style>
.stage {
  display: table-cell;
  vertical-align: middle;
}
 .tabled, .middled {
  text-align: center;
  margin: 0 auto;
}
 .jumbo {
  font-size: 150%;
  vertical-align: -25px;
  transform: rotate(8deg);
}
 .jumbo:first-child {
  -webkit-animation: wave 10s infinite ease;
          animation: wave 10s infinite ease;
}
.jumbo:last-child {
  -webkit-animation: wave 15s infinite ease;
          animation: wave 15s infinite ease;
}
 @keyframes wave {
  0% { transform: rotate(8deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(8deg); }
} @-webkit-keyframes wave {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(10deg); }
  100% { -webkit-transform: rotate(0deg); }
}
 p {
  font-size: 110%;
  font-family: Helvetica, sans;
  max-width: 24em;
  margin: 0 auto;
  text-align: justify;
  color: #00695C;
  font-weight: lighter;
  line-height: 1.5em;
}
 a {
  color: #ccc;
  text-decoration: none;
  border-bottom: solid thin #f7901d;
}
 a:hover {
  color: #f7901d;
}
 .boo {
  position: relative;
}
.boo:before, .boo:after {
  position: absolute;
  transition: all 0.15s ease;
}
 .boo:before {
  top: -75px;
  left: -70px;
  -webkit-transform:rotate(0deg) scale(0);
     -moz-transform:rotate(0deg) scale(0);
       -o-transform:rotate(0deg) scale(0);
      -ms-transform:rotate(0deg) scale(0);
          transform:rotate(0deg) scale(0);
}
 .boo:after {
  top: -115px;
  right: -70px;
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
  -webkit-transform:rotateY(180deg) scale(0);
     -moz-transform:rotateY(180deg) scale(0);
       -o-transform:rotateY(180deg) scale(0);
      -ms-transform:rotateY(180deg) scale(0);
          transform:rotateY(180deg) scale(0);
}
 .boo:hover:before {
  top: -140px;
  -webkit-transform:rotate(15deg) scale(1);
     -moz-transform:rotate(15deg) scale(1);
       -o-transform:rotate(15deg) scale(1);
      -ms-transform:rotate(15deg) scale(1);
          transform:rotate(15deg) scale(1);
}
 .boo:hover:after {
  -webkit-transform:rotateY(180deg) scale(0.7);
     -moz-transform:rotateY(180deg) scale(0.7);
       -o-transform:rotateY(180deg) scale(0.7);
      -ms-transform:rotateY(180deg) scale(0.7);
          transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after {
  content: url('ссылка на картинку . png');
}
</style>

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

<a class="boo" href="http://www.shpargalochki.ru/">"текст ссылки"</a>)

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

А мне от всего сердца хочется вам всем пожелать самого счастливого Нового года. Улыбок, радости, здоровья, благополучия родным и близким. Добра и мира Вашему дому!!!

С НАСТУПАЮЩИМ, ВСЕХ, НОВЫМ 2020 ГОДОМ!!!

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