Добавить иконки для каждой ссылки в меню Страницы для блоггер



Всем здравствуйте. Многие блоггеры пользуются родным виджетом "страницы" для создания меню в своих блогах. Одни оформляют дизайн меню в конструкторе тем, настраивают фон, шрифт, размер и его цвет,  другие используют стили CSS.

Сегодня предложу Вам еще одну тему оформления, добавим для каждой вкладки соответствующие иконки в меню. Смотрим скриншот:

Рядом с каждой ссылкой соответствующая иконка

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

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

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

<style>
#PageList1 li:nth-child(1):after {
content: url(https://lh5.googleusercontent.com/-ZCsJOk2P980/U3tTTvFGP8I/AAAAAAAAnL4/3sF22OgJf4g/s22-no/home36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):after {
content: url(https://lh3.googleusercontent.com/-k5GEqpHKA0w/U3tTAWQNlAI/AAAAAAAAnLw/R0jxHw387o0/s22-no/contattami36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):after {
content: url(https://lh4.googleusercontent.com/-wKUOZ9nf3vM/U3tYVu5xLjI/AAAAAAAAnMg/0-Hq4vOoCnE/s22-no/facebook36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(4):after{
content: url(https://img.icons8.com/material/24/000000/google-plus.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(5):after{
content: url(https://img.icons8.com/material-sharp/24/000000/pinterest.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(6):after {
content: url(https://img.icons8.com/windows/25/000000/twitter.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(7):after {
content: url(https://img.icons8.com/material-sharp/25/000000/map.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(8):after{
content: url(https://img.icons8.com/material-sharp/25/000000/information.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
</style>


В HTML коде адреса иконок не удаляю, надеюсь кому-нибудь пригодятся. В строке #PageList1 li:nth-child(1) выделено красным, это первая вкладка меню и так далее. Голубым адрес иконки, 22 px размер, больше ничего такого в настройках нет.

Если нужно, измените положение иконки: margin и padding. Ниже HTML код для одной вкладки:

#PageList1 li:nth-child(1):after {
content: url(адрес иконки);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}

При желании можно установить иконки с левой стороны ссылки. Для этого в коде измените для всех вкладок свойство after на before.

Этот вариант отлично смотрится в боковой панели, скриншот или живой пример:

Установка и оформление меню с иконками в боковой панели

Используя стили CSS, приукрасим виджет меню (вставить отдельным гаджетом):

<style>#PageList1{
border:15px double #03b4cc; *// размер. цвет и форма рамки;
background-color: #f8f8ff ; *// фон гаджета;
</style>

Далее, где мы будем брать иконки для оформления нашего меню. Рекомендую сервис Icons8.ru, иконок там "океан", выбирай какие и для чего хочешь. Как работать на сайте, перейдем по ссылке:

Большой выбор бесплатных иконок

Слева "категории", выбираем к примеру, "главная". Перед нами откроется выбор иконок домашней страницы. Нажимаем на нужную, смотрим справа пред просмотр.

Обратите внимание, что справа также есть меню с иконками главной страницы разной формы и цвета. Выбираем с меню или вверху нажмите на значок "перекрасить иконку".

Изменить фон и цвет иконки

Настроили иконку, не забудьте "сохранить". Чуть ниже выбранной иконки нажмите "Сделать HTML".

Нажать Сделать HTML и скопировать адрес выбранной иконки.

Сверху url адрес иконки, копируете и вставляете в код для меню. Внизу код иконки для гаджета или вставить в статьи на страницах по вкладке HTML.

Если будет непонятно, пишите мне в комментариях или обращайтесь через форму контактов. И на сегодня закончу, всем всего доброго.

Другие статьи по теме:

Text.ru - 100.00%





Автор статьи ✎ Olga Protasova Выпуск ✹ 11/21/2018 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *