как оформить гаджет ярлыки в BLOGGER

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

В своё время я писала пост о том, как изменить дизайн гаджета ярлыки в блоге. Речь шла об облаке ярлыков (категории, рубрики,теги). Обзывают их по разному. В продолжении этой темы предложу ещё 2 варианта, как можно их разукрасить немного с помощью стилей CSS, чтобы уж не были такими скучными. И "разноцветить" мы будем опять именно облако. 

Немного отвлекусь для ясности и понимания если кому интересно. Щёлкните правой кнопкой мыши по полю в блоге и выберите Просмотр кода страницы. В открывшемся окне с помощью клавиш CTRL+ F вызовите функцию поиска ( для начинающих советую почитать эту статью). И впишите в поле категории (это мой вариант). Вас перебросит к полному коду гаджета. Сразу под заголовком, за который отвечает строка 

 <h2>Категории</h2>

вы увидите много строчек с классом <span class='label-size label-size-5'>, <span class='label-size label-size-4'>. Вообще, их всего на самом деле от одного до пяти. Вот именно их мы и разукрасим. Просто присвоим каждому классу определённый цвет. Опять же оговорюсь, что это касаемо только ОБЛАКА.  

Разноцветный фон облака ярлыков. Примерно так это будет смотреться.

 Код

.label-size-5  {background: #6495ED;}
.label-size-4  {background: #2E8B57;}
.label-size-3  {background: #FFD700;}
.label-size-2  {background:#FF4500;}
.label-size-1  {background:#B03060;}

Разноцветный шрифт облака ярлыков. Вот как - то так. Можно увидеть у меня на этом блоге такое оформление.

Код

.label-size-5 a {color: #6495ED;}
.label-size-4 a {color: #2E8B57;}
.label-size-3 a {color: #FFD700;}
.label-size-2 a {color:#FF4500;}
.label-size-1 a {color:#B03060;}

В зависимости от того, что вам нужно, копируйте один из кодов. Идём во вкладку Тема, находим знакомую всем строку ]]></b:skin> , опять же с помощью горячих клавиш. И аккуратненько прямо над ней нужный код вставляем. Сохраняем и любуемся созданной красотой.

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

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email