Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

понеделник

Икони в меню Страници за 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, иконите там са в изобилие. Изберете които и за каквото искате. За да работите със сайта, следвайте хипервръзката.

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

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

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

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

    BGtop



    Няма коментари:

    Публикуване на коментар