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

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-ADRESA-PRE-INSTAGRAM" target="_blank"  rel="noopener ">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2019/01/instagram-wpromotions.png" alt=Instagram">
                    </a>
                </li>
                <li>
                    <a href="URL-ADRESA-PRE-FACEBOOK" target="_blank" rel="noopener ">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2019/01/facebook-wpromotions.png" alt="Facebook">
                    </a>
                </li>
            </ul>
        </div>

<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>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

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

Jak skrýt nákupní košík v e-shopu Webnode?

od Viliam | Říj 13, 2019 | Scripty, Všechny návody, Webnode E-shop

Jak skrýt nákupní košík v e-shopu Webnode?Máte u společnosti Webnode vytvořený e-shop a chtěli byste skrýt nákupní košík v menu a tlačítko "Přidat do košíku", abyste mohli využívat e-shopové prvky jako např. přidávání produktů, avšak nechcete využívat e-shop jako...

Jak zvýšit prodej v e-shopu o 7-18%?

od Viliam | Říj 9, 2019 | Všechny návody, Webnode E-shop

Chcete zvýšit prodej na Vašem e-shopu? Máte návštěvníků, avšak jen málo lidí si něco koupí? V tomto návodu Vám ukážu skvělý způsob jak zvýšit prodeje v e-shopu. Jsou to notifikace. Ano - obyčejné, pro někoho možná otravné, notifikace. Online nástroj Notifikuj.cz se mi...

Jak na web ve Webnode vložit anketu?

od Viliam | Srp 16, 2019 | Všechny návody, Widgety

Chcete na webové stránky ve Webnode vložit anketu?Online dotazník zdarma (anketa na web) je jeden z nejčastějších způsobů jak dostat od návštěvníků webu zpětnou vazbu. Bez zpětné vazby je obtížné posoudit, zda na své zákazníky působíte správné a zda má vůbec Vaše...

Jak přidat obrázek GIF ve Webnode?

od Viliam | Srp 16, 2019 | Všechny návody, Základné

Chcete na web ve Webnode vložit GIF obrázek? Systém Webnode nepovoluje gify, když je vložíte jako obrázek. Z tohoto důvodu musíte nejprve požadovaný .GIF obrázek nahrát na externí stránku a získat tak URL adresu obrázku. Získanou URL adresu vložíte do kódu a HTML kód...

Online rezervační systém na web? Recenze systému, který se přizpůsobí každému podnikání

od Viliam | Čvc 7, 2019 | Všechny návody, Widgety, Zdroje zdarma

Chcete na Váš web přidat spolehlivý a jednoduchý online rezervační systém? Reservanto je nejlepší rezervační systém, který nabízí verzi Zdarma bezplatně a to dožitovne. Jedním z cílů Vašeho webu může být například vytvoření rezervace. Nejčastěji tuto formu využívají...

Jak propojit Facebook Messenger s webem u Webnode?

od Viliam | Kvě 23, 2019 | Všechny návody, Widgety, Zdroje zdarma

Chcete propojit Facebook Messenger s webem u Webnodea získat tak "online chat" na webu zcela zdarma? Jednoduchý návod na propojení webu u Webnode s Facebook Messenger Facebook Messenger je skvělou volbou pro komunikaci s návštěvníkem Vašeho webu. Po kliknutí na...

Jak si vytvořit web stránku jednoduše a zdarma (Webnode návod)

od Viliam | Kvě 3, 2019 | Všechny návody, Základné, Zdroje zdarma

Chtěli jste si někdy vytvořit vlastní webovou stránku úplně od začátku? Chcete si vytvořit web nebo e-shop a zviditelnit se na Internetu? Začněte právě teď a naučte se jak si jednoduše vytvoříte svůj první vlastní web. Vytvoření webu s Webnode je...

Jak Nastavit Emailový Marketing ve Webnode přes MailChimp?

od Viliam | Kvě 3, 2019 | Všechny návody

Hledáte jednoduché řešení pro e-mailový marketing ve Webnode? Chcete na Váš web vložit vyskakovací okno (pop-up) pro sběr e-mailů? Posílejte svým odběratelům novinky skrz automatizovaný systém MailChimp. Je to zdarma do 2 000 odběratelů a 12 000 e-mailů...

Jak na web přidat remarketing kód ve Webnode?

od Viliam | Bře 25, 2019 | PPC, Všechny návody

Jak nastavit remarketing ve Webnode? a Kam vložit remarketing kód? V návode Jak přidat konverzní kód ve Webnode? jsem Vám ukázal jednoduchý postup pro vložení konverzního kódu pro sledování konverzí. Pojďme se nyní společně podívat na další PPC metodu tzv....

« Starší příspěvky

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

Vytvořit web zdarma

About
Latest Posts

Viliam

Jednatel at Webgrow s.r.o.

Baví mě Internet a zvlášť redakční systémy jako Webnode nebo WordPress s Divi šablónou. Vytvořil jsem pro Vás portál Wpromotions.eu, abych Vám pomohl s tvorbou Vaší webové stránky nebo e-shopu. V případě potřeby mě neváhejte kontaktovat, rád Vám poradím.

Latest posts by Viliam (see all)

Jak skrýt nákupní košík v e-shopu Webnode? - 13.10.2019
Jak zvýšit prodej v e-shopu o 7-18%? - 9.10.2019
Jak na web ve Webnode vložit anketu? - 16.8.2019

Trackbacky/pingbacky

Jak propojit Facebook s webem?| elegantně a jednoduše | Wiliam Promotions - […] návode Jak přidat ikony soc. sítí (FB a Instagram) do horní části na webu ve Webnode? jsem vám ukázal velmi…
Jak propojit www stránky se sociální sítí Instagram? | Wiliam Promotions - […] TIP: Přidejte si do pravého horního rohu ikony sociálních sítí FB a Instagram. Více v návodu Jak přidat ikony…
Script pro CZ / SK svátek a aktualní den | Wiliam Promotions - […] TIP: Přidejte si do pravého horního rohu ikony sociálních sítí FB a Instagram. Více v návodu Jak přidat ikony…
Jak si stáhnout fakturu ve Webnode? | Wiliam Promotions - […] TIP: Přidejte si do pravého horního rohu ikony sociálních sítí FB a Instagram. Více v návodu Jak přidat ikony…
Jak Vytvořit Web nebo E-shop | Jednoduše a Zdarma | Wiliam Promotions - […] Jak přidat ikony soc. sítí (FB a Instagram) do horní části na webu ve Webnode? […]
Jak zobrazit a skrýt text po kliknutí na tlačítko "Více textu"? | Wiliam Promotions - […] Jak přidat ikony soc. sítí (FB a Instagram) do horní části na webu ve Webnode? […]

Zanechat komentář Zrušit odpověď na komentář

This site uses Akismet to reduce spam. Learn how your comment data is processed.