Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

как оформить гаджет ярлыки в 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


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

  1. Виктория, у меня уже давно ярлыки стоят упорядоченные. Это ты мне их помогла сделать с прокруткой страниц. Мне нравится. Никому не мешают. В глаза не бросаются. У многих в блогах видела, что сайдбар начинается с ярлыков и их миллион. Некрасиво!

    ОтветитьУдалить
  2. Ирина, да ярлыки у многих стоят. Про миллион ярлыков отдельная тема. Тут я показала как их можно разукрасить.

    ОтветитьУдалить
  3. Конгениально! Будет время, поэкспериментирую, надо разнообразить дизайн )))

    ОтветитьУдалить
  4. Да, Виктория, всё достаточно просто и весной так хочется чего - то поярче.

    ОтветитьУдалить
  5. интересная тема. как-нибудь, нужно будет и свой блог до ума довести

    ОтветитьУдалить
    Ответы
    1. Семён, с этими кодами вообще мороки ни какой нет. Скопировать и поставить.

      Удалить
  6. Вика,сколько же у Вас полезностей и красивостей))).Второй день у Вас и глаза разбегаются,не могу остановиться:Все нужно! Спасибо огромное!!!

    ОтветитьУдалить
    Ответы
    1. Спасибо Вам за внимание к блогу. Для этого и делаю свои шпаргалки. Забегайте, если что не понятно спрашивайте.

      Удалить
  7. После внедрения кода, категории начали выглядеть намного красивей.

    ОтветитьУдалить
    Ответы
    1. Да, Александр. главное, что есть выбор и реализация простая.

      Удалить

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