ZÁSZLÓK

Bizonyosodjunk meg róla, hogy mind a két kódot kimásoljuk (HTML és CSS), ellenkező esetben nem fog működni.

        <style>
            .flags {
                position: absolute;
                top: 2px;
                right: 5px;
                z-index: 99;
            }
            .flags ul {
                display: inline;
                margin: 0;
                padding-left: 0;
            }
            .flags ul li {
                margin-left: 5px;
                list-style-type: none;
                display: inline-block;
            }
            @media screen and (max-width: 767px) {.flags {left: 5px; width:100px}}
        </style>

        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="LINK-TO-FLAG.png" alt="Norsk">
                    </a>
                </li>
                <li>
                    <a href="/en/">
                        <img src="LINK-TO-FLAG.png" alt="English">
                    </a>
                </li>
            </ul>
        </div>

<script>
if (window.innerWidth < 767) {
    var div = document.createElement("div");
    div.setAttribute("style", "text-align:right;height:32px;");
    var flags = document.querySelector(".flags");
    div.appendChild(flags);
    document.querySelector("#menu").prepend(div);
}
</script>

Telepítés instrukciók

Hogyan használjuk az első kódot?

Módosítsd a szövegrészt, aminek fehér háttér van beállítva. Csak kattints a szövegrészre és állítsd át arra, amit te szeretnél.

1. Változtasd meg az /en/ linket, arra, amilyen nyelvet te szeretnél beállítani. A fölötte lévő /home/ az alapméretezett nyelv, amit használtál, amikor elkezdted szerkeszteni weboldalad.

(Például, ha magyarul szerkesztetted az oldalad, akkor a /home/ a link a magyar nyelvre mutat)

2. Most kép linket kell hozzáadnunk a zászlókhoz.

a.) Beállíthatod a a linket a képhez, ahol azt látod, hogy LINK-TO-FLAG.png. Feltöltöttünk neked pár zászlót, amiket erre a célra használhatsz. Megtalálhatod a zászlókat a következő gombra kattintva:

Találd meg a zászlókat itt

b.) Amikor rákattintassz a gombra egy album lesz látható rengeteg zászlóval. Kattints jobb gombbal a zászlóra amit szeretnél, és másold ki a linket a zászlóhoz.

c.) Helyettesítsd a kódba azt a szövegrész, hogy LINK-TO-FLAG.png a kimásolt linkkel.

Amikor végeztél, másold ki a két kódot a kék és narancssárga dobozból.

Kész. Hova másoljam be a kódot?

Ez attól függ, hogy szeretnéd-e a zászlókat megjeleníteni az összes oldaladon vagy csak egyes oldaladon.

Minden oldalon

Beállítások -> Weboldal Beállítások -> Weboldal fejléc és lábléc HTML -> Weboldal fejlécének HTML kódja (ide másolhatod be a kék és narancssárga, HTML és CSS kódokat)

Beállítások -> Weboldal Beállítások -> Weboldal fejléc és lábléc HTML -> Weboldal láblécének HTML kódja (ide másolhatod be a citromsárga, Script kódot)

Csak egyes oldalakon

Oldalak -> Az oldal, amit szeretnél -> SEO Beállítások -> Egyedi HTML kód a fejlécbe (ide másolhatod be a kék és narancssárga, HTML és CSS kódokat)

Oldalak -> Az oldal, amit szeretnél -> SEO Beállítások -> Egyedi HTML kód a láblécbe (ide másolhatod be a citromsárga, Script kódot)

Hogyan változtassuk a zászlók helyzetét?

A kód mutatja hol helyezkedjen a zászló az értékekkel "top" és "right".

Változtathatod a "top" és "right" értékeit, attól függően, hogy mennyire szeretnél eltolni a képernyő tetejétől és jobb oldalától. Ha szeretnéd, hogy a zászlód a bal oldalon jelenjen meg változtasd meg a "right" szócskát "left"-re.

Ééés kész is! Használd egészséggel. :)