Ako pridať ikony soc. sietí (FB a Instagram) do hornej časti na webe vo Webnode?

od jan 15 2019 Scripty Sociálne siete Všetky návody Základné 0 komentárov

Ikony Facebook a Instagram na web vo webnode - návod

Hľadáte spôsob ako na webové stránky u Webnode vložíte ikonky soc. sietí do hornej časti webu? 

 

V návodoch Ako prepojiť web s Facebook? a Ako prepojiť www stránky so sociálnou sieťou Instagram? sme si ukázali ako Váš web môžete rôznymi spôsobmi prepojiť so soc. sieťami Facebook a Instagram.

V tomto návode si ukážeme ďalšie veľmi jednoduché riešenie pre soc.siete FB/Instagram a to pridanie ikoniek soc. sietí do hornej časti Vášho webu (vľavo).

Pozrite si online ukážku (demo)

#1. Prvý krok je úprava URL adries pre Vaše sociálne siete v kóde nižšie.

 

Na riadku č. 23 v kóde upravte hodnotu URL-ADRESA-PRE-INSTAGRAM pre Instagram.

Prepíšte hodnotu URL-ADRESA-PRE-INSTAGRAM na URL adresu Vášho Instagramu. (Napr. URL adresa pre môj Instagram je: https://www.instagram.com/iamwilliam5/ )

Na riadku č. 28 v kóde upravte hodnotu URL-ADRESA-PRE-FACEBOOK pre Facebook.

Prepíšte hodnotu URL-ADRESA-PRE-INSTAGRAM na URL adresu Vášho Facebooku. (Napr. URL adresa pre moju firmu na Facebook je: https://www.facebook.com/webgrowcz/  )

#2. Druhý krok je vloženie upraveného kódu do hlavičky stránok.

V hornej lište editora kliknite na  a zvoľte napr. „Úvodnú stránku“ a pokračujte možnosťou „SEO Nastavení stránky“ a upravený kód vložte do sekcie „HTML kód v hlavičke„.

Kód vložte do hlavičky na všetky stránky na ktorých to chcete mať 🙂

 

Potrebný kód je:

<style>
.wpromotionicons {
position: absolute;
top: 10px;
left: 5px;
z-index: 99;
}
.wpromotionicons ul {
margin: 0;
padding-left: 0;
}
.wpromotionicons ul li {
margin-left: 5px;
list-style-type: none;
display: inline-block;
}
@media screen and (max-width: 767px) {.wpromotionicons {left: 165px;}}
</style>
<div class="wpromotionicons">
<ul>
<li>
<a href="URL-ADDRESS-INSTAGRAM" target="_blank" rel="noopener noreferrer">
<img src="https://www.wpromotions.eu/wp-content/uploads/2019/01/instagram-wpromotions.png" alt=Instagram">
</a>
</li>
<li>
<a href="URL-ADDRESS-FACEBOOK" target="_blank" rel="noopener noreferrer">
<img src="https://www.wpromotions.eu/wp-content/uploads/2019/01/facebook-wpromotions.png" alt="Facebook">
</a>
</li>
</ul>
</div>
view raw FB-Instagram-icons.html hosted with ❤ by GitHub

Pomohol ti tento návod? Pošli ho priateľom 🙂

Vytvorte si vlastný web alebo e-shop
Viliam
Follow me
Najnovšie články od Viliam (zobraziť všetky)
0 0 votes
Article Rating
Subscribe
Notify of
guest


0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments