Блоггер уже давно использует собственную панель уведомления посетителей об использовании файлов cookie, которая автоматически появляется, когда посетитель заходит из стран Евросоюза. О ней много говорили и сейчас, скорее всего просто забыли. А она присутствует  на всех блогах Blogspot. 

Если вы ведёте блоги в России, Украине, Белоруссии, то на ваш блог Blogger не встраивает эту панель уведомления для жителей этих стран. Панель файлов cookie отображается только для посетителей из стран ЕС. Более подробно для чего она необходима почитайте здесь.

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

Чтобы посмотреть, как видят посетители вашу панель, вставьте в строку браузера следующий адрес 

https://poluhka.blogspot.com/?gl=SE

Последние символы это код Швеции для примера. Представим, что мы оттуда просматриваем свой блог.  Замените на адрес своего блога строку голубого цвета. 

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

Более компактно и не мешает посетителям в верхней части блога при скроллинге страницы.

Заходим во вкладку тема. 

 Перед строкой устанавливаем такой код и сохраняем.

#cookieChoiceInfo{background-color:#222;padding:10px;bottom:0;top:unset;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Calibri,Helvetica,Arial} #cookieChoiceInfo .cookie-choices-text{margin:0 auto;font-size:16px;color:#fff;text-align:left;} #cookieChoiceInfo .cookie-choices-button{color:#000;background-color:#adbcc5;border-radius:5px;padding:8px 18px;text-transform:none;transition:all .2s linear;font-weight:400} #cookieChoiceInfo .cookie-choices-button:nth-child(2){background-color:#f1d600} #cookieChoiceInfo .cookie-choices-button:hover,#cookieChoiceInfo .cookie-choices-button:nth-child(2):hover{background-color:#e9eef0} @media screen and (max-width:800px){#cookieChoiceInfo .cookie-choices-text{margin:0 0 20px}#cookieChoiceInfo .cookie-choices-buttons{margin:0 0 10px}}

Вы можете изменить фон, цвет текста, кнопку, чтобы сделать их более подходящими для вашего блога (кто затрудняется с этим, пишите в комментариях).

Опять используя адрес https://poluhka.blogspot.com/?gl=frа , проверяем результат.

Шаблоны у всех разные и если не видите изменений, заключите этот код в теги <style>тут весь код </style> и установите его перед закрывающим тегом </head>.  

Что касается текста, в принципе, его можно оставить. Но ничего страшного если вы и его замените. Для этого в шаблоне нужно найти закрывающийся тег </body> и над ним вставить следующий код

<script>//<![CDATA[ cookieOptions = {

    msg: "Этот сайт использует файлы cookies. Просматривая сайт Вы автоматически соглашаетесь на это.",

    link: "https://www.blogger.com/go/blogspot-cookies",

    close: "Да!",

    learn: "подробнее" };

//]]>

</script>

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

Есть возможность задать расположение панели файлов внизу по углам - хотите слева или справа. 

Для отображения панели справа такой код

#cookieChoiceInfo{background-color:#222;padding:10px 10px 40px;top:unset;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Calibri,Helvetica,Arial;width:300px;left:unset;right:10px;bottom:10px;border-radius:5px;overflow:hidden} #cookieChoiceInfo .cookie-choices-text{margin:0 0 5px;font-size:16px;color:#fff;text-align:left;}

#cookieChoiceInfo .cookie-choices-inner{position:static}

#cookieChoiceInfo .cookie-choices-buttons{margin:0;display:block}

#cookieChoiceInfo .cookie-choices-button{color:#f1d600;text-transform:none;transition:all .2s linear;font-weight:400;display:block;text-align:left;margin:0 0 10px;padding:0}

#cookieChoiceInfo .cookie-choices-button:nth-child(2){color:#000;text-align:center;background-color:#f1d600;padding:8px 18px;position:absolute;bottom:0;left:0;right:0;margin:0}

#cookieChoiceInfo .cookie-choices-button:hover{color:#e9eef0}

#cookieChoiceInfo .cookie-choices-button:nth-child(2):hover{background-color:#e9eef0;color:#000}

@media screen and (max-width:425px){#cookieChoiceInfo{width:calc(100% - 20px)}}

Результат

Для отображения слева

#cookieChoiceInfo{background-color:#808000;padding:10px 10px 40px;top:unset;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Calibri,Helvetica,Arial;width:300px;left:10px;bottom:10px;border-radius:5px;overflow:hidden} #cookieChoiceInfo .cookie-choices-text{margin:0 0 5px;font-size:16px;color:#fff;text-align:left;} #cookieChoiceInfo .cookie-choices-inner{position:static}#cookieChoiceInfo .cookie-choices-buttons{margin:0;display:block} #cookieChoiceInfo .cookie-choices-button{color:#f1d600;text-transform:none;transition:all .2s linear;font-weight:400;display:block;text-align:left;margin:0 0 10px;padding:0} #cookieChoiceInfo .cookie-choices-button:nth-child(2){color:#000;text-align:center;background-color:#f1d600;padding:8px 18px;position:absolute;bottom:0;left:0;right:0;margin:0} #cookieChoiceInfo .cookie-choices-button:hover{color:#e9eef0} #cookieChoiceInfo .cookie-choices-button:nth-child(2):hover{background-color:#e9eef0;color:#000} @media screen and (max-width:425px){#cookieChoiceInfo{width:calc(100% - 20px)}}

Результат

Во всех трёх вариантах меняйте общий цвет панели, заменив background-color:#222; на свой.

Наши блоги  посещают представители стран Европейского союза, вы обязаны соблюдать правила в отношении согласия пользователей из ЕС. 

Посмотрите к примеру статистику посещений моего блога

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

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

Введите Ваш email

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

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

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

Для начинающих не большое пояснение. Код обычного списка в HTML выглядит так. 

<ol>

<li> первые блюда </li>

<li> вторые блюда </li>

<li> десерты</li>

</ol>

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

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

Код такой

<ol>
<li> первые блюда </li>
<li> вторые блюда </li>
<li> десерты</li>
</ol>
<style> 
ol{
counter-reset: myCounter;
}
 
li{
list-style: none;
}
 
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9; /* цвет фона квадрата*/
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
/* размеры квадрата */
width: 40px; 
height: 40px;
}</style> 

Не хотите квадратики сделаем кружочки с помощью свойства border-radius: 50px;  

 Код такой

<ol>
<li> первые блюда </li>
<li> вторые блюда </li>
<li> десерты</li>
</ol>
<style> 
ol{
counter-reset: myCounter;
}
 
li{
list-style: none;
}
 
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9; /* цвет фона */
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50px;
}</style> 

А сейчас вообще красоту сделаем с подпунктами списка и hover  эффектом при наведении

Это код для последнего варианта

<style>
ol {
counter-reset:myCounter;
margin-left:0;
padding-left:5px;
color: rgb(100,100,100);
}
 
li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
 
li:hover {
color: rgb(0,0,0);
}
 
li:before {
content:counter(myCounter);
counter-increment:myCounter;
position:absolute;
top:0;
left:0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding:0px;
color:#fff; /* цвет текста*/
background:#2980b9;  /* цвет фона*/
font-weight:bold;
text-align:center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
 
li:hover:before {
background-color:#DC143C; /* цвет линии*/
}
 
li li:before{
background-color: #3498db;
}
 
li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(255, 160, 122); 
z-index: 0;
}
 
li:hover:after {
background-color: #DC143C; /* цвет при наведении на пункт меню*/
}
 
li li {
font-size: 0.8em;
}</style>
<h2>Рецепт - блины тонкие</h2>
<ol>
<li>
Приготовьте сковородку
</li>
<li>
В большой миске смешайте ингредиенты:
<ol>
<li>Яйца - 3 шт.</li>
<li>Молоко - 250 мл (1 стакан)</li>
<li>Вода - 300-400 мл (1-2 стакана)</li>
<li>Сахар - 2 ст. ложки</li>
<li>Мука - 240 г (1,5 стакана)</li>
</ol>
</li>
<li>
Всё содержимое хорошо взбейте до однородной массы. 
</li>
<li>
Прокалите на огне сковороду и смажьте её маслом
</li> <li>
Налить на середину сковороды немного теста (примерно 0,5 обычного половника). Наклоняя сковороду в разные стороны, распределить тесто по поверхности. Жарить на среднем огне 0,5 минуты.
</li> <li>
Затем аккуратно приподнять блин (руками или лопаточкой), перевернуть его на другую сторону и жарить еще 10-30 секунд. 
</li>
</ol>

Вы можете в код по необходимости добавлять нужные пункты в теги <ol> и <li>.  Все стили в кодах я закомментировала. Меняйте на ваш вкус. Очень уместно такие списки применять в блогах кулинарной тематики, блогах учителей, Использовать как списки дел, создания меню, да вообще перечень чего - то. 

И Блоггере код списка устанавливается в редакторе сообщения, в режимеHTML в нужном месте поста. 

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

Ещё статья про оформлении нумерованного списка в сообщении.

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

 Всем, доброго времени суток. Был у меня очень давно пост о том как изменить стиль гаджетов в блоге. Там речь шла об оформлении всех их сразу. Но иногда хочется выделить один единственный виджет или все в разных стилях. Что - то я тогда этот момент упустила. А такое возможно и достаточно просто. 

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

У меня этот виджет был HTML6.  Из стандартных это могут быть

Followers1(.Followers1) - Постоянные читатели;
BlogArchive1(.BlogArchive1) - Архив ;
PageList1(.PageList1) - Страницы;
PopularPosts1(.PopularPosts1) - Популярные сообщения;
CustomSearch1(.CustomSearch1) - Поиска;
LinkList1(.LinkList1) - Список ссылок;
Profile1(.Profile1) - Профиль автора;
FollowByEmail1(.FollowByEmail1) - Подписка по email; и другие

Давайте уже смотреть, как можно изменить стили отдельно взятого гаджета.

Рамка для виджета

#HTML6{

padding: 5px;

border: 1px solid #ff0000; 

}

Виджет с заливкой фона и рамкой

#HTML6 {

padding: 5px;

border: 1px solid #ff0000;

background:#bea7c9; 

} 

Тень 

#HTML6 {padding: 5px; border: 2px solid #ff0000;  box-shadow: 3px 3px 3px #ff0000;}

Закругляем углы у рамки 

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; } 

То же самое но с залитым фоном

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;  background:#bea7c9; } 

А это пример, как собрать всё воедино и ещё добавить картинку фоновую

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:url(здесь адрес картинки);box-shadow: 3px 3px 3px #ff0000;  }

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

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

Тогда поступаем так же, а код будет такой 

 

#HTML6 > h2 {/*стили для заголовка этого гаджета*/}

В моём варианте такой 

#HTML6 > h2 {padding: 5px; border: 5px solid #ff0000; -moz-border-radius:10px; -webkit-border-radius:10px; background:#ff99b8;box-shadow: 3px 3px 3px #ff0000; }

Как говорится - творите что хотите. Все коды устанавливаем в шаблоне блога над строкой ]]></b:skin>.

Ещё статьи по оформлению гаджетов в Блоггере

Как сделать по центру заголовок гаджетов

Как оформить первые буквы в названии поста и виджета 

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

Введите Ваш email

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

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

Вот так оно выглядит

Если скопируете код и вставите его в этом редакторе , то увидите меню с подсказками в рабочем исполнении

Код

<style>#menu ul {

 list-style: none;

 font-family: Georgia;

 font-size: 18px;

 font-style: italic;

 line-height: 24px;

 border: 2px solid #000000;

 border-left: 1px solid #000000;

 float: left;

 padding: 0;

 margin: 12px 0 25px 24px;

 }

#menu ul li {

 float: left;

 }

#menu ul li a {

 display: block;

 text-decoration: none;

 background-color: #595959;

 padding: 5px 10px 0 10px;

 color: #fefefe;

 width: 120px;

 border-right: 1px solid #797979;

 border-left: 1px solid #191919;

 }

#menu ul li a span {

 display: block;

 }

#menu ul li a span.text-top {

 border-bottom: 1px solid #595959;

 }

#menu ul li a:hover span.text-top {

 border-bottom: 1px dashed #fefefe;

 color: #ffddbb;

 }

#menu ul li a span.text-bottom {

 visibility: hidden;

 font-size: 11px;

 text-align: right;

 }

#menu ul li a:hover span.text-bottom {

 visibility: visible;

}

</style>

<div id="menu">

 <ul>

  <li>

   <a href="#">

    <span class="text-top">Главная</span>

    <span class="text-bottom">все стихи</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №3</span>

    <span class="text-bottom">Подсказка №3</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №4</span>

    <span class="text-bottom">Подсказка №4</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №5</span>

    <span class="text-bottom">Подсказка №5</span>

   </a>

  </li>

 </ul>

</div>

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

<li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>

В настройках самого стиля горизонтального меню можно поиграться со всеми значениями. Цвет фона, рамки, цвет и размер шрифта и другими. Будут сложности обращайтесь в комментариях. Готовый код устанавливается обычным способом в гаджет HTML/JavaScript и перетаскивается над сообщениями или под шапку блога. 

Посмотрите другие варианты меню под соответствующим ярлыком. 

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

Введите Ваш email

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

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

В блоггер легко устанавливается в гаджете HTML/JavaScript. Без подключения библиотек и скриптов, на чистом  CSS. Про настройки поговорим ниже. А пока посмотрите работу на тестовом блоге по углам страницы для примера.

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

Скопируйте код целиком и установите в гаджет HTML/JavaScript в любом месте блога

<style> .fixed-lside,.fixed-rside{   position:fixed;top:60px;width:160px;height:600px;z-index:9999; }.fixed-lside{   left:0;}.fixed-rside{   right:0;} .close-fixedside{   position:absolute;width:160px;height:45px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer } @media screen and (max-width:800px){  .fixed-lside,.fixed-rside{display:none;visibility:hidden;}} </style>

  <div class="fixed-rside"> <div aria-label="переход" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;"> <a href="http://hpargallka.blogspot.ru/"><img alt="" src="https://3.bp.blogspot.com/-1wKgNBrJSoc/U5sEQUMnLII/AAAAAAAAEcM/qJz86Gm99Zs/s1600/cooltext1604904014%2B%25281%2529.gif" title="шпаргалки блогерши" /></a> ></div>  

  <div class="fixed-lside"> <div aria-label="переход" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">Буду рада видеть вас - заходите, читайте, подписывайтесь<a href="http://hpargallka.blogspot.ru/"><img alt="" src="https://3.bp.blogspot.com/-1wKgNBrJSoc/U5sEQUMnLII/AAAAAAAAEcM/qJz86Gm99Zs/s1600/cooltext1604904014%2B%25281%2529.gif" title="шпаргалки блогерши" /></a> </div>

Общий размер задан в параметрах  160px x 600px( как размер рекламного кода или баннера), но вы можете изменить его на ваше усмотрение. 

Немного о настройках.

Мы задали сразу 2 класса - rside (для правого блока) и lside (для левого). Задали для каждого соответственные стили. Если вам нужен только один фиксированный блог объявления, уберите лишний из кода. Я отметила разным цветом каждый.  

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

Повторюсь, что это может быть любое текстовое сообщение, какая - то картинка, код баннера или партнёрки.

 

Такие фиксированные объявления всегда буду на виду у посетителей. Что непременно привлечёт их внимание.  

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

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

Введите Ваш email

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