Оформление информации в статье на Блоггер

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

Выглядит данное оформление так:

Оформление информации в статье на Блоггер

Установить стили

Первый код устанавливаем в шаблон Blogger, заходим в Тема >> Изменить HTML. Ищем в коде тег ]]></b:skin> и выше него ставим код:

.nbt_message_box {
margin:15px 0;
}
.note {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #FDEBA5;
background:url(https://blogger.googleusercontent.com/img/a/AVvXsEgYXK3DJWt_bZAQ7_uSk0YmzllypLnBA9FEeoklBngqbjarD0kbBzW1e2LVL24bh4NmK79LKhjvJSiYw8fjdY_azRcZYWNoPDYiGYiMgu3UToQnKTly_6UTIaBGarkhZeqUrSumzcERwKFjjbiy-El2Yg5OmVJ16onT5p9d-qQcrFGukgVT2O5li4CGrg) no-repeat scroll 10px center #FEF4C8;
padding:.5em 1em .5em 3em;
}

.code {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #BEE5F8;
background:url(https://blogger.googleusercontent.com/img/a/AVvXsEjgk8I3i-5qH3NIwYyi-DaWSqIog0TM-m1TVokCZft-vAaWiHu1eyyBdQE_0qrIe69ZwsBwxDvrCvF2vAKBvARzbUPDFD_8Z4iibF3rUweQl2eZ6XZa7jyYDQZZhaYNDLMVOCuDItnXZxU9mdxqEELYXWO1_-xV6cb5_h-Sshluarv4B2YgE5l2fSifGg) no-repeat scroll 10px center #D7EFFB;
padding:.5em 1em .5em 3em;
}

.info {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #DEF1BF;
background:url(https://blogger.googleusercontent.com/img/a/AVvXsEho8LV01vJOgcPa7JwYLE8fkzMPCDqlBy3_p3Sr9GSbRUMWswGjgI3jmoTskjA7pfk6Pb-Y8tkeuGN6NAPcXi3Th9EI3me3RW6Ph8NR4aax3Q3iKwk-OuTyv_YJ4Wv11QTSGVpHiBSxauuTBD8eETz6goCQo18QKHQYvvZSCbHBV-LncT2RYr3AElkw4w) no-repeat scroll 10px center #E8F6D2;
padding:.5em 1em .5em 3em;
}

.warning {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #FFDBDB;
background:url(https://blogger.googleusercontent.com/img/a/AVvXsEjTHgfGPrjFti6YG6zkfZ_bYHgRwGoEQXqHdST7s3xLweJb4tr_tWGOI5FIKUv-Huoe9ZyQVPuur6qUhVKDcRmJ2mhAhkRo4lft_nvrui-PduNlVA7HchhtcjUO0JGoBSeb53q-RObTMtGtQ39Fd3_Lv-6kvW8Y01rzcpoUyBRv156uNsmk62ATbJQocA) no-repeat scroll 10px center #FFE7E7;
padding:.5em 1em .5em 3em;
}

Сохраняем шаблон.

Поменять в коде можно:

Значки — выделила ссылки на картинки красным цветом

Шрифт — выделила в коде зелёным

Размер шрифта — оранжевым цветом

Размер окантовки — синим

Цвет окантовки — розовым

Фон блока — голубым цветом

Значки можно найти на сайтах:

https://icon-icons.com/ru/

https://icons8.ru/

https://iconbird.com/

https://www.iconfinder.com/

https://findicons.com/

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

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

1. Уведомления: (note)

<div class="nbt_message_box note">
Ваш текст
</div>

2. Информация: (info)

<div class="nbt_message_box info">
Ваш текст
</div>

3. Код: (code)

<div class="nbt_message_box code">
Ваш текст
</div>

4. Предупреждение: (warning)

<div class="nbt_message_box warning">
Ваш текст
</div>

Можно поменять значения блоков. Например, если не нужен блок "Код", замените его на нужный, сменив значок. Можно даже не менять названия блоков — оставить как есть, только поменять назначение.

Либо, если блок не нужен совсем, удалите его из кода в шаблоне.

И наоборот, если нужно добавить ещё один блок, то в шаблон добавляем такой код:

.announce{
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #FFDBDB;
background:url(ваш значок) no-repeat scroll 10px center #FFE7E7;
padding:.5em 1em .5em 3em;}

И так же создаёте код для добавления в статью:

<div class="nbt_message_box announce">
Ваш текст</div>

Меняете название блока — выделила красным

Меняете цвет окантовки нового блока — выделила оранжевым

Меняете цвет фона нового блока — выделила оранжевым