Как добавить боковой блок на Blogger?

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


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

На платформе Blogger сможет запустить свой сайт даже новичок, но возможностей будет намного меньше, чем при использовании CMS (WordPress или Joomla). Преобразовать блог на Blogger можно, но делать это намного сложнее. Поэтому, в этой статье мы расскажем, как добавить боковой блок на Blogger.

Боковое меню на Blogger

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

Установить блок со ссылками в боковую часть легко, но новички могут не знать, как это делается. Чтобы установить форму и добавить туда ссылки, переходите в раздел «Дизайн» и выбирайте добавление нового гаджета:

После этого откроется список с доступными гаджетами, где нужно выбрать «Текст»:

Дальше откроется окно с редактированием блока. Вам потребуется нажать «Изменить HTML» и добавить следующий код:

<div rgba=""><b>Категории</b><hr />

<a href="Ссылка ">Способы заработка</a><hr /><b>

<a href="Ссылка ">SEO оптимизация</a></b> <hr />

<a href="Ссылка">Создание сайта</a><br /></div>

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

Чтобы появилась рамка, потребуется добавить CSS, не переживайте, это тоже не сложно:

1. Переходим к настройкам шаблона:

   

2. Переходим в «Дополнительно» и выбираем «Добавить CSS»:

   

3. Справа от меню появится область, куда нужно вставить специальный код:

   .bloc_rr {

   border: 1px solid black; /* Оформление таблицы */

   background: сссссс; /* Фоновый цвет */

   padding: 11px; /* Отступ текста от края */

   border-radius: 10px;  /* Закругление углов */

   line-height: 1.6; /* Межстрочный интервал */

   box-shadow: -2px 2px 10px rgba(0,0,0,0.5) /* Тень */

   }]]>

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

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