Jak přidat ikony soc. sítí (FB a Instagram) do horní části na webu ve Webnode?

autor: Led 19 2019 Scripty Sociální sítě Všechny návody Widgety 4 Komentáře(ů)

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

Hledáte způsob jak na webové stránky u Webnode vložíte ikonky soc. sítí do horní části webu?

 

V návodech Jak propojit Facebook s webem? a Jak propojit www stránky se sociální sítí Instagram? jsme si ukázali jak Váš web můžete různými způsoby propojit se soc. sítěmi Facebook a Instagram.

V tomto návodu si ukážeme další velmi jednoduché řešení pro soc.siete FB / Instagram a to přidání ikonek soc. sítí do horní části Vašeho webu (vlevo/nahoru).

Viz. online ukázka (demo)

#1. První krok je úprava URL adres pro Vaše sociální sítě v kódu nižšie.

 

Na řádku č. 23 v kódu upravte hodnotu URL-ADRESA-PRE-INSTAGRAM pro Instagram.

Přepište hodnotu URL-ADRESA-PRE-INSTAGRAM na URL adresu Vašeho Instagramu. (Např. URL adresa pro můj Instagram je: https://www.instagram.com/iamwilliam5/ )

Na řádku č. 28 v kóde upravte hodnotu URL-ADRESA-PRE-FACEBOOK pro Facebook.

Přepište hodnotu URL-ADRESA-PRE-INSTAGRAM na URL adresu Vašeho Facebooku. (Např. URL adresa pre moju firmu na Facebook je: https://www.facebook.com/webgrowcz/  )

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

V horní liště editoru klikněte na  a zvolte např. „Úvodní stránku“ a pokračujte možností „SEO Nastavení stránky“ a upravený kód vložte do sekce „HTML kód v hlavičce„.

Kód vložte do hlavičky na všechny stránky na kterých to chcete mít 🙂

 

Potřebný 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

TIP: Vložte si na web online chat pro rychlejší komunikaci s návštěvníky Vašeho webu. Doporučuji službu, která je zdarma – Smartsupp

Další návody

Líbil se ti tento návod? Pošli ho přátelům 🙂

Vytvořit web zdarma
Viliam
Follow me
Latest posts by Viliam (see all)
0 0 hlasy
Article Rating
Odebírat
Upozornit na
guest


4 Comments
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře
Jirka P
Jirka P
4 let před

Dobrý den,

díky za návod. Ale spíš by se mi hodilo vložit ikony na konec stránky do patičky, nebo před ní. Můžete mi prosím poradit? Díky Jirka

0
Odpovědět
Viliam
Autor
Viliam
4 let před
Odpovědět na  Jirka P

Zdravím Jirka,

ďakujem za zastavenie na mojom webe.

Inšpirovali ste ma k napísaniu nového návodu: Jak na web ve Webnode přidat ikonky soc. sítí do DOLNÍ části webu?

Čo myslíte? Bola by táto možnosť pre Vás vyhovujúca?

S pozdravom
Viliam

0
Odpovědět
Petr Hodonský
Petr Hodonský
4 let před

Dobrý den, existuje nějaká varianta, že byste sem mohl hodit návod, jak widgety umístit pod sebou na levou stranu webové stránky a ne na horní lištu?

Našel jsem si stránky typu ShareThis, kde tuto možnost nabízí, nicméně není tam zahrnuta varianta instagramu, stejně jako tomu je u AddThis.

Děkuji a přeji hezký den 🙂

Petr

0
Odpovědět
Viliam
Autor
Viliam
4 let před
Odpovědět na  Petr Hodonský

Dobrý deň,

ďakujem za komentár.

Pridal som nový návod pre pridanie ikoniek soc. sietí Addthis.com, ktorá umožňuje pridať ikonku Instagram/fb do pravej dolnej časti webu.
Viď. návod: Ako na web vo Webnode pridať ikonky soc. sietí do DOLNEJ časti webu?

Čo myslíte? Pomohlo by Vám to?

Do ľavej časti to bohužiaľ cez túto službu Addthis asi nepôjde.

S pozdravom
Viliam

0
Odpovědět