Как изменить панель файлов Cookie в Blogger

Как изменить панель файлов Cookie в Blogger

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

Измените панель файлов cookie Blogger

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

С панелью файлов cookie blogger это не обременяет загрузку блога, потому что эта панель файлов cookie отображается только для посетителей из стран ЕС.

Если вы хотите видеть, как отображается панель cookie вашего блога blogger (если вы не отключите ее), добавьте код ?gl=frв конце URL-адреса вашего блога, подобный этому (вы притворяетесь посетителем из Фрэнсиса). https://www.bloganda.com/?gl=fr

Панель файлов cookie Blogger зависает под блогом

Как изменить панель файлов Cookie в Blogger

Эта первая модификация переместит панель cookie-файлов blogger в нижнюю часть и создаст кнопку, похожую на изображение выше.

CSS

 #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}}{codeBox}

Панель файлов cookie Blogger, плавающая в нижнем левом углу блога

Панель файлов cookie Blogger, плавающая в нижнем левом углу блога

Эта вторая модификация сделает панель файлов cookie Blogger плавающей в нижнем левом углу блога, как показано на изображении выше. Разве это не круто?

Если вы хотите попробовать стили, указанные выше, используйте приведенный ниже CSS.

CSS

/* Blogger Cookies Bar */

#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: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)}}{codeBox}

Панель cookie Blogger зависает в правом нижнем углу блога

Панель cookie Blogger зависает в правом нижнем углу блога

Если вы хотите попробовать стиль, указанные выше, используйте приведенный ниже CSS.

CSS

/* Blogger Cookies Bar */

#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)}}{codeBox}

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

И если вы хотите изменить текст, добавьте следующий javascript и сохраните его над кодом </body>

JavaScript

//<![CDATA[

cookieOptions = {

msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",

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

close: "Got it!",

learn: "Learn More" };

//]]>{codeBox}

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


TM

Отправить комментарий

Новые Старые