Икони в меню Страници за Blogger
.jpg)
понеделник
Как да създадете меню чрез притурката Страници, мисля, че всеки знае. Позволете ми да напомня за начинаещите:
Оформление ➔ Добавяне на притурка ➔ Страници ➔ Запазване на подредбата.
Още за това прочетете в статията, като кликнете по тази хипервръзка.
Инсталирайте притурката хоризонтално под заглавката. Ето така. В страничната лента изглежда не както трябва.
Код
Копирайте кода, добавете в притурката HTML/JavaScript и запазете в долната част на блога.
<style>
#PageList1 li:nth-child(1):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8d2XLNMdhnQH_TV_P0Qj0VzXyUGR2rEDIDSJ2EJak-NEiB_IhhxiRZk_dNQhQkreAyOLXQgHC-MO6snr40Tx-UH54k138Q6pxUye1F2Y36KsHJH-PKkVbJ0NwTOeeqs0fUZ3NJtVbjE/s22-no/home36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip522KgHBGDPxpZvDm60BbNIN-7z6IOJbKYyPH7axm6xVTy1qPv0qI0j2b72DzHruCBG3vWItUZwx65fcMW4TXVv9TcrES8k1pUDWQUFu-An5yxqhaLtxT52NqFZI_wReLkOkPKeyRNiE/s22-no/contattami36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4mewQl28Zb4lkBVk9cq_AfqnC63S585hfr_AokWyIzbG7dwVlE6buKWWPlGPm1hgJ6XM427-aibcwD2ggqZAbyvjCbpTb9DdtbrTq_wBISP3RDaJVdbDsm6AI5FrPpOHgB8ufA0xo9DQ/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, иконите там са в изобилие. Изберете които и за каквото искате. За да работите със сайта, следвайте .
Имате въпроси? Моля, в коментарите.
Разнообразете вашето меню. Доскоро и успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
