[Урок] Как да добавим "Social Icons"

Всякакви уроци свързани с УЕБ ПРОГРАМИРАНЕТО.
Потребителски аватар
ᶂĂ®ÄẅἎẙℱ✟₩ reborn
Господ
Господ
Мнения: 10
Регистриран: Преди 3 месеца
Местоположение: В нас
Пол: Мъж ♂️
Bulgaria

Преди 3 месеца

1во ----> Отваряте фаила "stylesheet.css", намиращ се в папктата "theme" на вабият стил и на нов ред добавяте следния код:

Код: Избери всички

 .fara_icons{
left: 0; margin: 16% auto auto 10px; position: fixed;
}

.fara_icons img{
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: all 1s ease-in-out;
    -webkit-transform: rotate(-360deg);
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
}

.fara_icons img:hover{
	padding: 7px;
    opacity: 100;
    filter: alpha(opacity=40);
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 05s2s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;  
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
}

2ро ---> Отваряте файла "overall_header.html", намиращ се в папктата "templates" на вашият стил, в него търсите следния ред: "<div id="wrap" class="wrap">"(в повечето слуйеи е 84), и над него добавяте следния код:

Код: Избери всички

<div class="fara_icons">
<a href="Линка ви към Facebook" target="_blank"><img src="https://i.imgur.com/34vkdFX.png"></a><br>
<a href="Линка ви към YouTube" target="_blank"><img src="https://i.imgur.com/5zurOnH.png"></a><br>
<a href="Линка ви към SteamGrupata" target="_blank"><img src="https://i.imgur.com/Ojh7m9w.png"></a><br>
<a href="Discord-a"><img src="https://i.imgur.com/BaCxVax.png"></a><br>
<a href="Skype-a" target="_blank"><img src="https://i.imgur.com/iWfC6nN.png"></a>
</div>


ДЕМО
ДЕМО2
Отговори