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

всплывающее окно

Код абсолютно не сложный, без всяких библиотек и тяжёлых скриптов. И устанавливается элементарно в гаджет 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 ГОДОМ!!!

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

навигация блога


Красивые кнопки панели навигации
Плавающие кнопки панели навигации
Верхняя панель навигации

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

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

Для установки сначала нужно скопировать этот код

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://googledrive.com/host/0Bz4YdwRI3rnCcjZCT1AyLTRLb2s/bootstrap.min.css");
var postperpage=3;//настроить количество постов на главной странице
var numshowpage=3;
var upPageWord="предыдущие";
var downPageWord="следующие";
var home_page="/";
var urlactivepage=location.href;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 M;7 l;7 i;7 u;1B();I 1s(18){7 6=\'\';P=L(S/2);5(P==S-P){S=P*2+1}E=i-P;5(E<1)E=1;g=L(18/o)+1;5(g-1==18/o)g=g-1;F=E+S-1;5(F>g)F=g;6+="<1l b=\'4-1o\' 1I=\'1o\'><3 9=\'3\' b=\'4 4-c 1K\'>1J "+i+\' 1H \'+g+"</3>";7 1f=L(i)-1;5(i>1){5(i==2){5(l=="s"){6+=\'<3 9="3" b="4 4-c 1T"><a f="\'+D+\'">\'+Q+\'</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="/x/v/\'+u+\'?&d-r=\'+o+\'">\'+Q+\'</a></3>\'}}e{5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="#" A="O(\'+1f+\');B C">\'+Q+\'</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="#" A="N(\'+1f+\');B C">\'+Q+\'</a></3>\'}}}5(E>1){5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="\'+D+\'">1</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="/x/v/\'+u+\'?&d-r=\'+o+\'">1</a></3>\'}}5(E>2){6+=\'<3 9="3" b="4 4-c">...</3>\'}1m(7 m=E;m<=F;m++){5(i==m){6+=\'<3 9="3" b="4 4-c 1E">\'+m+\'</3>\'}e 5(m==1){5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="\'+D+\'">1</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="/x/v/\'+u+\'?&d-r=\'+o+\'">1</a></3>\'}}e{5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="#" A="O(\'+m+\');B C">\'+m+\'</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="#" A="N(\'+m+\');B C">\'+m+\'</a></3>\'}}}5(F<g-1){6+=\'<3 9="3" b="4 4-c">...</3>\'}5(F<g){5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="#" A="O(\'+g+\');B C">\'+g+\'</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="#" A="N(\'+g+\');B C">\'+g+\'</a></3>\'}}7 1d=L(i)+1;5(i<g){5(l=="s"){6+=\'<3 9="3" b="4 4-c j"><a f="#" A="O(\'+1d+\');B C">\'+1k+\'</a></3>\'}e{6+=\'<3 9="3" b="4 4-c j"><a f="#" A="N(\'+1d+\');B C">\'+1k+\'</a></3></1l>\'}}7 G=y.1Q("G");7 1a=y.1R("1S-1O");1m(7 p=0;p<G.T;p++){G[p].1i=6}5(G&&G.T>0){6=\'\'}5(1a){1a.1i=6}}I 1g(15){7 U=15.U;7 1x=L(U.1L$1M.$t,10);1s(1x)}I 1B(){7 k=w;5(k.h("/x/v/")!=-1){5(k.h("?V-d")!=-1){u=k.K(k.h("/x/v/")+14,k.h("?V-d"))}e{u=k.K(k.h("/x/v/")+14,k.h("?&d"))}}5(k.h("?q=")==-1&&k.h(".6")==-1){5(k.h("/x/v/")==-1){l="s";5(w.h("#J=")!=-1){i=w.K(w.h("#J=")+8,w.T)}e{i=1}y.1r("<n W=\\""+D+"16/17/13?d-r=1&X=Y-Z-n&R=1g\\"><\\/n>")}e{l="v";5(k.h("&d-r=")==-1){o=1N}5(w.h("#J=")!=-1){i=w.K(w.h("#J=")+8,w.T)}e{i=1}y.1r(\'<n W="\'+D+\'16/17/13/-/\'+u+\'?X=Y-Z-n&R=1g&d-r=1" ><\\/n>\')}}}I O(H){12=(H-1)*o;M=H;7 11=y.1u(\'1v\')[0];7 z=y.1t(\'n\');z.9=\'1p/1q\';z.1w("W",D+"16/17/13?1A-1z="+12+"&d-r=1&X=Y-Z-n&R=1c");11.1y(z)}I N(H){12=(H-1)*o;M=H;7 11=y.1u(\'1v\')[0];7 z=y.1t(\'n\');z.9=\'1p/1q\';z.1w("W",D+"16/17/13/-/"+u+"?1A-1z="+12+"&d-r=1&X=Y-Z-n&R=1c");11.1y(z)}I 1c(15){1b=15.U.1P[0];7 1j=1b.1n.$t.K(0,19)+1b.1n.$t.K(1G,1D);7 1e=1F(1j);5(l=="s"){7 1h="/x?V-d="+1e+"&d-r="+o+"#J="+M}e{7 1h="/x/v/"+u+"?V-d="+1e+"&d-r="+o+"#J="+M}1C.f=1h}',62,118,'|||button|btn|if|html|var||type||class|default|max|else|href|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|jj|script|postperpage|||results|page||lblname1|label|urlactivepage|search|document|newInclude|onclick|return|false|home_page|mulai|akhir|pageArea|numberpage|function|PageNo|substring|parseInt|nopage|redirectlabel|redirectpage|nomerkiri|upPageWord|callback|numshowpage|length|feed|updated|src|alt|json|in||nBody|jsonstart|summary||root|feeds|posts|banyakdata||blogPager|post|finddatepost|nextnomer|timestamp|prevnomer|hitungtotaldata|alamat|innerHTML|timestamp1|downPageWord|div|for|published|group|text|javascript|write|loophalaman|createElement|getElementsByTagName|head|setAttribute|totaldata|appendChild|index|start|halamanblogger|location|29|showpagePoint|encodeURIComponent|23|из|role|страница|showpageиз|openSearch|totalResults|20|pager|entry|getElementsByName|getElementById|blog|showpage'.split('|'),0,{}))
//]]>
</script>
</b:if>


В коде я выделила цветом количество отображаемых постов на одной странице (3). Вы можете изменить на нужное число. Ну и текст, если захотите. Например -"вперёд - назад" или "туды - сюды" и т.д.

Сейчас идём во вкладку ТЕМА - Изменить HTML. С помощью горячих клавиш Ctrl + F ( читаем об этом здесь), находим закрывающийся тег </body>. Сразу над ним вставляем скопированный код.


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

Всем предпраздничного настроения и  с наступающим Новым годом.

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

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

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

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

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

Реализация достаточно простая. Нужно выбрать понравившейся вариант, скопировать код и установить его в разделе дизайн в гаджет HTML/JavaScript. И перетянуть в нужное место макета блога. Цвета самой панели меняйте на ваше усмотрение. 

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


 Вариант 1. Простая панель с рамкой и кликабельной надписью. 
панель в верхней части блога с кликабельными ссылками
Код.

<style>#knig_bar {width: auto; height: auto; display: block; text-align: center; padding: 7.5px; background: none repeat scroll 0 0 #004D40;
  border: 4px double black; 
    background: #fc3; 
    padding: 10px; 
   } color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}
</style>
<div id='knig_bar'>
Все статьи блога для вас <a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 2. Тёмная панель уже с другой рамкой , где ссылка оформлена в виде кнопки.

Код.

<style>#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c;border: 3px solid #ff6347 ;
    border-radius: 10px; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}</style>
<div id='knigulper_bar'>
Все статьи блога для вас<a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 3. Панель с бегущей строкой.

Задали немного динамики  с помощью тега marquee и получили такую динамичную бегущую строку. Еще в этом варианте, кроме основной ссылки, добавлена ссылка на последнюю статью блога. Но это можно легко убрать, если посчитаете нужным.

С помощью свойства box-shadow зададим красивые границы с тенью.

бегущая строка с кликабельными сслыками

Код.

<style>#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}

#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#37474F;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
#bloggernotification a:hover{text-decoration:underline}
#openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}</style>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: &apos;Oswald&apos;, sans-serif;'>
  <marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'><a href='http://www.shpargalochki.ru/2018/04/dizajn-gadzheta-okno-poiska-blogger.html'><font color='yellow' size='3'>НОВОЕ</font> ДИЗАЙН ОКНА ПОИСКА</a>  <a href='http://www.shpargalochki.ru/p/blog-page_1.html'><font color='yellow' size='3'></font> Все статьи блога</a></marquee>
 </div>
</div></div></div>


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

Приветственный бар в верхней части блога
Фиксированная панель в нижней части блога.

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

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

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