Как да създадете меню чрез притурката Страници, мисля, че всеки знае. Позволете ми да напомня за начинаещите:
Оформление ➔ Добавяне на притурка ➔ Страници ➔ Запазване на подредбата.
Още за това прочетете в статията, като кликнете по тази хипервръзка.
Инсталирайте притурката хоризонтално под заглавката. Ето така. В страничната лента изглежда не както трябва.
Код
Копирайте кода, добавете в притурката HTML/JavaScript и запазете в долната част на блога.
<style>
#PageList1 li:nth-child(1):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvmQX4VzorivQ64SwXDY2o89L8xYJKfSivYwvOQfqY8IKAXMZXpFVMFJc6W9b4K95VZxlMzhbjf4KJCjl3DynrfYgGpM2N8_kphne_f83WwjVWABJ9klOCaQ0Hn_gDrjgEB7ABZDcbQU/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/AVvXsEhCO0OsOT0Z5fyEJYiPoE68uRFl55CsJNpgOsiAMdaT9jr5AhLzc3EfzXHCXuD1AEcOj7_BkUNDcLmx70oFxcusSE_yPXkG0WoE8yOoMYeMgQwUgWoBdOixmyg3365-2Smk3oDd8GXg8NQ/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/AVvXsEjnOrEti5Ji_fsKUlJyaReAE02gygxd2LsV9k4WNwFCTTAy1smrVFtiI8QqmpEiLT5O2_uqI_bQldX5BWo85Wc4Trjt9TOPpTh0Utt5UqAzC_7JKhWNQuQ6wavLM2fSTRNomkmXwaEa8H0/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, иконите там са в изобилие. Изберете които и за каквото искате. За да работите със сайта, следвайте .
Имате въпроси? Моля, в коментарите.
Разнообразете вашето меню. Доскоро и успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар