Икони в меню Страници за Blogger

Здравейте всички. Много блогъри използват предложената от Blogger притурка "Страници", за да създават меню в своите блогове. Някои оформят дизайна му, като настройват фон, шрифт, размер и цвят, а други използват CSS стилове. Ако и вие сте с такова меню в блога си, имате и друга възможност да го настроите. Да добавите към всеки раздел в него съответни икони.

Как да създадете меню чрез притурката Страници, мисля, че всеки знае. Позволете ми да напомня за начинаещите:

Оформление ➔ Добавяне на притурка ➔ Страници ➔ Запазване на подредбата. 

Още за това прочетете в статията, като кликнете по тази хипервръзка.
Инсталирайте притурката хоризонтално под заглавката. Ето така. В страничната лента изглежда не както трябва.

Код

Копирайте кода, добавете в притурката HTML/JavaScript и запазете в долната част на блога.

<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 във всички раздели;

➤Нищо друго няма в настройките.

От къде ще вземем икони за дизайна на нашето меню? Препоръчвам услугата Icons8.ru, иконите там са в изобилие. Изберете които и за каквото искате. За да работите със сайта, следвайте хипервръзката.

Имате въпроси? Моля, в коментарите.

Разнообразете вашето меню. Доскоро и успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: