0 Kč bez DPH

Kde se vzala reklama na blogu?

Bystří návštěvníci našeho blogu si jistě všimli, že je od tohoto týdne umístěn na pravé straně stránek reklamní banner. Protože je náš blog poháněn systémem inPage, možná Vás napadla otázka, jak jsme toho dosáhli a jak lze toto udělat i na vlastních stránkách.

Čáry se styly

Umístění reklamy zcela mimo stránky je poměrně jednoduché a stačí k tomu základní znalost HTML a CSS. Takže pokud se nebojíte, můžete si to vyzkoušet také.
Je potřeba říci, že příklad který zde uvádím platí pouze pro šablonu číslo 3.

Nastavení umístění reklamy

Pro nastavení pozice reklamního banneru nebo jakéhokoliv prvku mimo stránky je potřeba vytvořit nový STYL a vložit ho v administraci inPage do vlastních stylů: MENU Vzhled - Vlastní CSS styl.

Styl pro umístění banneru Skyscraper do šablony MEDIA:

#skyscraper {
position: absolute;
top: 186px; right: -130px;
width: 120px; height: 600px;
}

Po vložení vlastního stylu nezapomeneňte zaškrtnout volbu "Nastavit aktivní", jinak by styl nefungoval.

Nastavení banneru

Pokud máme připraven banner, tzv. Scysraper o velikosti 120 x 600px, můžeme ho nahrát do administrace inPage. Bannery se dělají buď ve formátu GIF nebo FLASH. Samozřejmě může být umístěn i obrázek JPG či PNG, tyto však nemají možnost animace, takže se na obrázku nebude nic hýbat.

Pokud máme reklamu ve formátu GIF, JPG nebo PNG, vytvoříme si například fotogalerii "Reklama" a obrázky nahrajeme. Pokud máme reklamu ve formátu FLASH, nahráváme ji do sekce SOUBORY a nastavíme

Vložení banneru na stránky

Nyní již můžeme vložit obrázek na stránky. To provedeme tak, že buď do Vlastního boxu nebo Vlastní patičky vložíme následující HTML kód:

<!-- ************************************* -->
<!-- reklama mimo stránky -->
<!-- ************************************* -->
<div id="skyscraper">
<object width="120" height="600" data="/soubor/flash-skycraper-swf/?clickTHRU=http://www.inpage.cz" type="application/x-shockwave-flash">
<param name="PLAY" value="true" />
<param name="LOOP" value="true" />
<param name="QUALITY" value="high" />
<param name="src" value="/soubor/flash-skycraper-swf/?clickTHRU=http://www.inpage.cz" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
</object>
</div>

Pokud bychom vkládali obrázek, kód by byl mnohem jednodušší, například:

<!-- ************************************* -->
<!-- reklama mimo stránky -->
<!-- ************************************* -->
<div id="skyscraper"><a title="AKCE" href="http://www.inpage.cz"><img src="/obrazek/2/banner/" alt="" width="48" height="48" /></a>
</div>

HOTOVO, reklama nebo jiný obrázek by měl být umístěn mimo stránky jako na našem blogu.

Závěrem je potřeba říci, že názvy a umístění uvedených obrázků je potřeba nastavovat podle toho jak je máte nahrané v administraci. Umístění banneru si můžete také zkoušet posunout, pokud si budete hrát se stylem #skysraper a těmito hodnotami: "top: 186px; right: -130px;". Aby se banner zobrazoval z Vlastního boxu, je nutné box v administraci aktivovat. Pokud byste dávali banner do patičky, musíte ji mít také aktivní.

Protože toto je ukázka našeho řešení u šablony MEDIA, rozhodli jsme se vytvořit vzorové kódy pro všechny šalony, které budeme brzy publikovat na našem blogu.

Petr Komárek
petr.komarek(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Reklama pre šablónu č.6

    3. 11. 2009 0:36:00 | Ing Robert Važan

    Mám podstatné dôvody pre používanie šablóny č.6.
    Pretože chcem uverejňovať bezplatnú reklamu príležitostí v rámci komunity telepráce, rád by som získal čo najskôr úpravu práve pre šablónu č. 6
    Môžete mi postup úpravy poslať čo najskôr ?
    www.renovital.inpage.cz
    email renovital.in@gmail.com
    Ďakujem a prajem kolektívu tvorcov veľa tvorivých nápadov. Važan

    Odpovědět

  • sablona 6

    3. 11. 2009 10:55:32 | webmaster

    Dobrý den,
    tento návod je prakticky univerzální pro všechny šablony. Jediné co si upravíte je umístění bloku podle vašeho uvážení.
    Kdyby se Vám nedařilo reklamu umístit, dejte nám vědět na admin@zoner.cz.

    Odpovědět

  • Reklama

    14. 7. 2010 20:19:39 | Du-san

    A ak chceme dať viac reklamných bannerov pod seba ako postupovať?
    postmaster@h-dcs.sk

    Odpovědět

  • RE: reklama

    15. 7. 2010 14:23:06 | admin

    postup je naprosto stejný jako s prvním bannerem, akorát v CSS musíte obě nebo více reklam rozdělit (skycraper1, skycraper2, skycraper3).
    Stejně tak to musíte opavit v HTML kodu na stránce, kam ty reklamy vkládáte.
    A nakonec si zkopírujete původní parametry z CSS, přiřadíte je ke skycraper2 a pouze změníte odsazení odvrchu.

    Odpovědět

  • Probelm s nahranim souboru GIF

    23. 1. 2011 16:20:16 | Martin

    Zdravim, chci se zeptat v cem je problem, ze mi nejde nahrat obrazek typu gif? nebo respektive jde, ale nezobrazuje se vubec spravne...diky

    Odpovědět

  • RE: problém s .GIFem

    24. 1. 2011 11:00:16 | Hana Medková

    Dobrý den, nahrajte obrázek ve formátu .gif do administrace inPage - normálně do sekce OBRÁZKY.

    Následně přejděte k editaci stránky, kam chcete obrázek (.gif) vložit. Vložení obrázku do editoru provedete tak, že kliknete na ikonu STROMU, následně vyberte obrázek ze seznamu (důležité je vybrat ten obrázek, který je označen jako - ORIGINÁL). Následně po uložení obrázku i stránky bude váš .gif obrázek fungovat.

    Odpovědět

  • Animovaný gif

    13. 5. 2011 11:51:37 | Václav Lukeš

    Dobrý den,
    po uložení animovaného gifu se však zobrazuje banner jako statický . Prosím o radu.

    Děkuji
    VL

    Odpovědět

  • RE: Animovaný gif

    14. 5. 2011 13:44:18 | Jan Ráčil

    Na podobný dotaz zde odpověděla již dříve pí. Hana Medková:
    "Vložení obrázku do editoru provedete tak, že kliknete na ikonu STROMU, následně vyberte obrázek ze seznamu (důležité je vybrat ten obrázek, který je označen jako - ORIGINÁL). Následně po uložení obrázku i stránky bude váš .gif obrázek fungovat.".

    Odpovědět

  • vypnutý levý sloupec Zara

    9. 4. 2012 11:44:28 | Martin

    dobrý den,
    předpokládám, že to uložení do boxu nefunguje, pokud mám vypnutý levý sloupec (konkrétně u šablony Zara). nebo to jde nějak obejít?
    díky

    Odpovědět

  • RE: vypnutý levý sloupce

    10. 4. 2012 9:14:27 | Hana Medková

    Dobrý den, pokud máte vypnutý levý sloupce a roztažen obsah po celé šířce šablony, dá se to vložení reklamy obejít tak, že ji umístíte do vlastní patičky stránek. Vytvoříte si nový článek, nazvěte jej vlastní patička, umístěte si do něj obsah reklamy a následně tento článek nastavte jako tzv. vlastní patičku přes sekci NASTAVENÍ - PRVKY STRÁNEK - PATIČKA STRÁNEK

    Odpovědět

  • Šablona 1 Pluto

    21. 5. 2012 18:08:51 | Petr V.

    Dobrý den, používám šablonu číslo 1 Pluto a při volbě position: absolute; se mi reklama upíná na pravou část prohlížeče. Nedaří se mi reklamu "ukotvit" ke stránce, jako to máte vy. Jak na to?

    Díky za radu

    Odpovědět

  • RE: Šablona 1 Pluto

    22. 5. 2012 13:23:33 | Hana Medkova

    Dobrý den pane Vondruš, rádi vám poradíme jak problém s umístěním reklamy vyřešit, jen bychom potřebovali, abyste si tu reklamu na webu dočasně zapnul, abychom to pozicování mohli vyzkoušet přímo.

    Odpovědět

  • Banner

    24. 11. 2012 20:51:58 | Vladimír Jalč

    Zdravím,podle Vašeho návodu mi to nrfunguje,píše mi to v okně kde má být flash " Xml Load error" co mám špatně? Děkuji

    Odpovědět

  • RE: banner

    26. 11. 2012 10:47:31 | Hana Medková

    Dobrý den, uvedte o jakou doménu se jedná, nebo kontaktujte technickou podporu admin(zav)zoner.cz a s nastavením toho banneru Vám blíže poradíme.

    Odpovědět