Оформление панели уведомления о файлах cookie в blogger

Блоггер уже давно использует собственную панель уведомления посетителей об использовании файлов 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


17 комментариев:

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

    ОтветитьУдалить
  2. И правда, Саша. Швеция что - то вообще самая активная и у меня.

    ОтветитьУдалить
    Ответы
    1. Это меняет дело. Я полагаю там бот индексатор Гугла наверное базируется сейчас. А я обрадовался блин.

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

    ОтветитьУдалить
    Ответы
    1. Привет, Люба. Тут практически всё можно поменять от места расположения до текста и фона. Со Швецией солидарна с Александром.

      Удалить
  4. Саша, я тоже об этом подумала.

    ОтветитьУдалить
  5. Честно говоря, данная опция меня не очень заинтересовала.

    ОтветитьУдалить
    Ответы
    1. Не важно. Она есть на блоге и ладно.

      Удалить
  6. Вика, здравствуйте! А можно вас попросить о персональной консультации? Что-то я не справляюсь сама - неожиданно выключилась переадресация на домен...

    ОтветитьУдалить
  7. Анна, а поподробнее можно. Вижу Ваш адрес http://www.craft-retro.ru/. Где и что Вы имеете в виду.

    ОтветитьУдалить
    Ответы
    1. Если подробнее, то получается вот такая штука: при попытке переключить бегунок переадресации домена, вылезает надпись "У вас нет прав на использование этого домена", в то время как права у меня есть, и они подтверждены. Соответственно, не работает и переключатель "Доступность https".
      Скриншот, если надо, я сюда загрузила:

      https://d.radikal.ru/d20/2103/85/2cab29a28c83.png

      Удалить
  8. Анна, возможно вам нужно добавить в Search Console версию сайта которую вы хотите связать, не доменный ресурс, а именно https://.....

    ОтветитьУдалить
    Ответы
    1. Вика, спасибо, что так оперативно отвечаете! Скажите, а после добавления нужно будет еще что-то дополнительно делать? Ведь это будут разные адреса - http и https?

      Удалить
  9. Анна, а вот тут я точно не знаю как. Вы вероятно добавляли метатег. Если да до добавьте ещё один. В любом случае его вообще убрать потом можно.Да. Я вот не переходила имея персональный домен на https. Мне братья сеошники не рекомендовали с этим связываться. на тот момент было уже порядка 500 статей. Я правда решилась однажды - всё перекосило. Благо резервная копия была. Так что 100% правильного ответа не могу дать.

    ОтветитьУдалить
    Ответы
    1. Вика, метатег для подтверждения прав на домен имеется в виду? Да, добавляла, было дело... Ладно, буду думать, что со всем этим делать дальше... А может, у Вас есть на примете человек, который за какую-нибудь вменяемую денежку возьмётся разобраться? У меня доход с этого блога и так слезы одни, а сейчас и вовсе упал -вот думаю,не из-за этого ли дурацкого файла ads.txt, который давно загружен, а предупреждение все равно не пропадает... Есть подозрение, что обе проблемы связаны между собой, теперь разобраться бы с ними...

      Удалить
  10. Анна, да, имеется в виду метатег. Доход с Адсенс вообще слёзы. В конце года хороший был. Последнее время особенно упал.. Гугл запускал новый алгоритм, доходы значительно снизились. С файлом файла ads.txt, тоже повсеместная картина. У меня на трёх блогах установлен и так же висит предупреждение. Обращалась к сеошникам раньше , говорят забейте на него. Вот как - то Максим писал по поводу его https://1zaicev.ru/ads/

    ОтветитьУдалить
    Ответы
    1. Да, я тоже видела много статей, говорящий, что не стоит обращать внимание на это предупреждение. Просто моего внутреннего перфекциониста раздражает эта красная полосочка )))
      ладно. спасибо вам, Вика, за подсказки и доброжелательное общение :) Я уже добавила Ваш сайт в закладки - много интересного для себя присмотрела, буду читать на досуге.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML