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 Způsob stažení souboru: otevřít v prohlížeči.

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