• Zwiększenie sprzedaży dzięki marketingowi w wyszukiwarkach
• połączenie e-marketingu z działaniami w serwisach społecznościowych
• czy Google jest nadal siecią kontekstową?
• wykorzystanie działań SEO/PPC jako narzędzia wspierającego
• projektowanie serwisu pod wyszukiwarki
• budowanie popularności serwisu
• optymalizacja serwisu pod urządzenia mobilne

Podczas warszawskiej konferencji zabiorą głos między innymi: Piotr Marzec (Google Polska), Gillian Muessig (president and Co-founder), Łukasz Duda (Adkontekst.pl), Sławek Graczyk (Adv.pl), Michał Herok (SEOgroup), Marcin Kordowski (K2Search), Zbigniew Nowicki (Bluerank), Tomasz Piątkowski (Outrider), Robert Rydz-Mościcki (Performance Media), Miłosz Woźniak (Cube Group) oraz Dominik Wałęga (NEXT).

Termin: 31 marca – 1 kwietnia 2011 r.
Miejsce: Warszawa, ul. Trakt Lubelski 40a

Prywatne adresy e-mailowe zakładane są zazwyczaj w serwisach, które oferują taką usługę bezpłatnie (Wirtualna Polska, Gmail, Onet, Interia, Gazeta i inne). Dlatego też prywatny adres jest bardzo charakterystyczny i zawsze przybiera znaną postać: nazwa@wp.pl, nazwa@onet.pl, nazwa@gmail.pl, nazwa@o2.pl, nazwa@gazeta.pl itp.

Możemy sobie wyobrazić, że adres typu terminator5000@wp.pl wygląda zupełnie zwyczajnie jeżeli korzystamy z niego w celach prywatnych, jednak umieszczenie takiego adresu na firmowej stronie internetowej wygląda co najmniej niepoważnie. Wcale nie jest to uwaga na wyrost, ponieważ prywatny adres e-mailowy może sugerować naszym klientom, że ma do czynienia z firmą działającą dorywczo i nieprofesjonalnie. Zapewne będą też tacy użytkownicy, którzy zrezygnują z kontaktu w obawie przed oszustwem ze strony mało wiarygodnej firmy. Oczywiście profesjonalny adres firmowy może założyć także każdy oszust, jednak mówimy tutaj o efekcie psychologicznym, który przekłada się na realne działania klienta na naszej stronie. Jeżeli prywatny adres e-mailowy wpływa na mniejsze zainteresowanie naszą ofertą, to zdecydowanie warto zastąpić go adresem bardziej oficjalnym i prezentującym się w pełni profesjonalnie.

Oczywiście zdecydowanie lepiej wygląda adres w postaci: jan.kowalski@wp.pl, kowalski-automoto@wp.pl lub kontakt-automoto@wp.pl. Jednak w tym przypadku nadal korzystamy z darmowego adresu, niezwiązanego z naszą firmową domeną. Wprawne oko internauty szybko wyłapie konstrukcję adresu i w zdecydowanej większości przypadków nadal będzie postrzegać go jako niefirmowy. A przecież nie o to nam chodziło kiedy uruchamialiśmy profesjonalną stronę internetową, prezentującą usługi naszej firmy w Internecie.

Dlatego warto dopilnować tematu i zapewnić sobie w pełni profesjonalny, oficjalny adres internetowy w postaci: kontakt@automoto.pl, jan.kowalski@automoto.pl lub biuro@automoto.pl. Tym bardziej, że nic nas to nie kosztuje. Założenie adresu jest bezpłatne w ramach domeny, której jesteśmy abonentem (w naszym przykładzie jest to domena www.automoto.pl). Co więcej, w ramach jednej domeny możemy stworzyć dowolną ilość adresów e-mailowych dla swoich pracowników lub poszczególnych działów w firmie. Adres e-mailowy zakładamy w panelu domeny lub panelu serwera. Jeżeli nie potrafimy zrobić tego samodzielnie, możemy poprosić o pomoc pracownika firmy informatycznej, która obsługuje naszą domenę lub serwer.

Niektóre osoby wychodzą z założenia, że aby uchronić się przed przykrymi konsekwencjami związanymi z nadużyciem praw autorskich, wystarczy wyszukiwać zdjęcia na odpowiednio „odległych” stronach. Najlepiej takich, które nie są związane tematycznie oraz ze względu na lokalizację geograficzną nigdy nie zostaną powiązane z naszą stroną. Jednak takie podejście, chociaż znacząco zmniejsza ryzyko wykrycia nielegalnej kopii, w żadnym stopniu nie rozwiązuje problemu legalności, ani też nie zapewnia nam bezpieczeństwa. Warto wiedzieć, że niektóre zdjęcia są specjalnie zabezpieczane przez autorów, a oznaczenia te nie są widoczne gołym okiem.

Skąd więc pobierać zdjęcia, aby mieć pewność, że ich publikacja na stronie internetowej jest w pełni legalna?

Oczywiście istnieją specjalne banki zdjęć, które posiadają profesjonalne obrazy w wysokiej jakości, jednak za każde takie zdjęcie należy zapłacić określoną cenę. Dla przykładu, serwis iStockPhoto udostępnia wiele ciekawych grafik, które w zależności od rodzaju licencji kosztują od kilkunastu do kilkudziesięciu, a w niektórych przypadkach nawet kilkuset złotych. Tego rodzaju zdjęcie, dzięki wysokiej rozdzielczości, może zostać użyte nie tylko na stronie internetowej, ale także wydrukowane w gazecie, na firmowej ulotce lub billboardzie.

Jednak nie zawsze potrzebujemy zdjęć w wysokiej rozdzielczości i nie zawsze chcemy płacić za zwykłe obrazy na stronę WWW. W takiej sytuacji korzystamy z wyszukiwarki zdjęć Google i klikamy na odnośnik „Szukanie zaawansowane”, który znajduje się pod okienkiem wyszukiwania. Na samym dole znajduje się pole „Prawa użytkownika”. Wybierając jedną z dostępnych opcji, zobaczymy tylko takie zdjęcia, z których możemy legalnie korzystać prywatnie oraz komercyjnie. Poniżej znajduje się szczegółowe omówienie każdej z wybranych form licencji.

Z dowolną licencją – wszystkie zdjęcia (zarówno takie, które możemy wykorzystać, jak i zdjęcia chronione prawem autorskim)
Oznaczone do ponownego wykorzystania – zdjęcia, z których możemy bezpiecznie korzystać, ale tylko prywatnie (na swoim blogu, na forum, w prywatnej aukcji internetowej itp.)
Oznaczone do ponownego wykorzystania w celach komercyjnych – zdjęcia, które możemy wykorzystać zarówno prywatnie, jak i w celach komercyjnych (firmowa strona internetowa, aukcja wystawiona przez firmę, wydruk ulotki lub plakatu, inne…)
Oznaczone do ponownego wykorzystania z modyfikacją – zdjęcia, które możemy bezpiecznie wykorzystać prywatnie oraz edytować w programie graficznym (możemy dodać tekst, skleić kilka zdjęć razem, dorysować dany element lub przetworzyć w każdy inny sposób)
Oznaczone do ponownego wykorzystania w celach komercyjnych z modyfikacją – ta opcja wyświetla zdjęcia, które możemy edytować i wykorzystać zarówno prywatnie jak i komercyjnie

Powyższym sposobem możemy wyszukiwać nie tylko zdjęcia, ale także inne motywy graficzne. Wiele ciekawych grafik, które mogą okazać się przydatne na naszej stronie internetowej, uzyskamy zaznaczając opcję „ikony” lub „obiekt clip art”.

Warszawa po raz kolejny będzie miejscem dla konferencji adStandard, która odbędzie się w dniach 3-4 marca 2011r. Tematyka warszawskiej konferencji to przede wszystkim:

• Serwis Facebook, jego dynamiczny rozwój i wzrost popularności w Polsce
• Zagadnienia kampanii reklamowych przeprowadzanych w serwisach społecznościowych
• Tematyka marketingu internetowego
• Nowe możliwości w Internecie, takie jak usługi mobilne na telefony komórkowe oraz geolokalizacja

Warszawską konferencję szczególnie polecamy wszystkim osobom, które pragną zaktualizować oraz pogłębić swoją wiedzę z zakresu marketingu, e-marketingu oraz ogólnie nowości internetowych. W spotkaniu udział wezmą dyrektorzy działów marketingu, product managerowie, przedstawiciele agencji reklamowych, domów mediowych i sieci reklamowych, plannerzy i analitycy rynku.

Warszawa adStandard 2011 – Warszawa, 3-4 marca 2011r.

Powyższa sytuacja zdarza się bardzo często, szczególnie tym administratorom, którzy korzystają z panelu administracyjnego CMS po raz pierwszy. Warto wiedzieć, że ustalone przez programistę kroje czcionek, są traktowane drugorzędnie względem tych które wprowadza właściciel strony poprzez panel zarządzania treścią CMS. Załóżmy, że pierwotny (ustawiony przez programistę) krój czcionki to Arial, jej kolor jest szary, a wielkość wynosi 10 pikseli. Następnie administrator poprzez panel administracyjny edytuje tekst i ustawia dla niego krój Times New Roman, wielkość 12 pikseli i kolor czarny. Jak łatwo się domyślić, strona internetowa przyjmie instrukcje podane jako ostatnie w kolejności czyli te wprowadzone przez właściciela strony w panelu administracyjnym.

Zrozumienie powyższego schematu działania strony internetowej jest nam potrzebne, aby pójść o krok dalej i dowiedzieć się dlaczego teksty na stronie zmieniają się niejako samoistnie. W końcu nikt o zdrowych zmysłach nie ma zamiaru psucia wyglądu czcionek na własnej stronie WWW

Jednak łatwo zepsuć ich wygląd nieświadomie, podczas wklejania całych bloków tekstu. Kiedy wpisujemy teksty ręcznie w przeznaczonym do tego okienku, na naszej stronie internetowej nie ma prawa zmienić się żadna czcionka. Jeżeli jednak kopiujemy tekst z innej strony lub z otwartego na ekranie dokumentu, musimy pamiętać że przenosimy nie tylko tekst, ale także jego formatowanie czyli krój czcionki, jej kolor i wielkość, a także wszystkie inne oznaczenia takie jak: podkreślenia, wyboldowanie, wypunktowanie itp. W ten sposób tracimy jednolity wygląd naszej strony i wszystkie teksty zaczynają „żyć własnym życiem” co niestety nie wygląda zbyt estetycznie.

Jak temu zaradzić? Niektórzy administratorzy usuwają formatowanie tekstu ręcznie tzn. po wklejeniu do panelu administracyjnego, zaczynają zmieniać krój, kolor i wielkość. Jest to jednak zadanie bardzo niewdzięczne, bo wymagające żmudnej pracy oraz co najmniej podstawowej wiedzy dotyczącej krojów czcionek i zasad kolorystyki. Dużo szybszym i mniej zawodnym sposobem jest usunięcie formatowania podczas przenoszenia tekstu. Popularne edytory, takie jak Word, Writer i WordPad, pozwalają na usunięcie formatowania za pomocą jednego kliknięcia myszki. Wystarczy zaznaczyć cały tekst i kliknąć opcję „wyczyść formatowanie”. Wygodnym sposobem jest także wklejenie tekstu do Notatnika, który automatycznie po wklejeniu usuwa zbędne formatowanie. Następnie wystarczy ponownie skopiować tekst i tak oczyszczony wkleić w panelu administracyjnym CMS. Oczywiście takie działanie ma zastosowanie nie tylko przy dodawaniu nowych tekstów, ale także w przypadku poprawiania wyglądu strony internetowej, na której z biegiem czasu powstał bałagan w czcionkach. Kopiujemy stary tekst, usuwamy formatowanie, wklejamy z powrotem do panelu administracyjnego i zatwierdzamy. Jest to najprostszy sposób, dzięki któremu przywrócimy pierwotny, estetyczny wygląd naszej strony.

1. Dostęp na całym świecie

Informacje zawarte na naszej stronie internetowej dostępne są nie tylko w każdym mieście naszego kraju, ale także w każdym państwie i na każdym kontynencie. Nic nie stoi na przeszkodzie, aby nasza oferta dodana w Warszawie, została przeczytana przez klienta w Katowicach, Moskwie lub Nowym Yorku. Żadne inne medium nie ma tak ogromnego zasięgu jak Internet. Za pomocą jednego kliknięcia myszki możemy wysłać informację w postaci tekstu, zdjęcia, muzyki lub filmu w dowolne miejsce.

2. Prędkość działania

Aby zamieścić ogłoszenie w gazecie, wydrukować ulotki lub nadać reklamę w radio, musimy poświęcić sporo czasu oczekując na publikację. W przypadku strony internetowej, komunikat możemy wrzucić błyskawicznie i w jednej chwili staje się on dostępny dla szerokiego grona osób odwiedzających naszą stronę.

c.d.n..

Każdy administrator forum lub bloga wie jak bardzo uciążliwa jest walka z pająkami, które regularnie odwiedzają witrynę w celu dodania spamu lub wyciągnięcia z niej adresów e-mailowych. W przypadku popularnych skryptów mamy pewne gotowe rozwiązania dające doraźną pomoc w tym zakresie. Jednak cała masa innych witryn, nie posiadających bieżącego wsparcia technicznego, narażona jest na nieustanne ataki. Pewną pomocą w takich przypadkach jest wykorzystanie możliwości jakie daje nam zarządzanie dostępem do strony za pomocą pliku .htaccess.

Plik .htaccess znajduje się w katalogu głównym naszego serwera. Jeżeli go nie mamy należy go stworzyć w notatniku, nadać nazwę „.htaccess” i wgrać na serwer. Niekiedy zdarza się, że serwer nie obsługuje pliku .htaccess, ale zdarza się to niezwykle rzadko, w szczególności na darmowych serwerach z reklamami (zobaczymy wtedy na ekranie błąd „Interial Server Error”).

.htaccess może zawierać różne instrukcje, w zależności od tego jakie zostaną zaimplementowane. My jednak skupimy się na dwóch poleceniach, przydatnych w określaniu które IP mogą mieć dostęp do naszej strony oraz dla których ten dostęp będzie zamknięty. Oto przykładowa zawartość naszego pliku:

Order Allow,Deny
Allow from all
Deny from 12.148.209.196

Instrukcja „Allow from all” informuje serwer o tym, że strona jest dostępna dla każdego adresu IP. Natomiast „Deny from 12.148.209.196″ wskazuje adres IP, dla którego dostęp do strony ma być zamknięty. Korzystając z bazy adresów, które są powszechnie znane jako potencjalnie zagrażające naszej stronie, możemy zbudować plik .htaccess, który zablokuje większość niepożądanego przez nas ruchu na stronie:

Order Allow,Deny
Allow from all

Deny from 12.148.209.196
Deny from 12.175.0.35
Deny from 12.222.95.33
Deny from 128.208.4.118
Deny from 128.255.244.87
Deny from 128.84.98.173
Deny from 129.44.123.12
Deny from 137.118.240.180
Deny from 140.247.60.123
Deny from 141.156.149.234
Deny from 141.156.35.62
Deny from 146.203.20.245
Deny from 157.130.53.242
Deny from 193.95.111.138
Deny from 194.102.56.130
Deny from 195.222.1.154
Deny from 195.251.235.67
Deny from 195.9.126.226
Deny from 198.64.149.243
Deny from 200.69.248.64
Deny from 203.124.153.237
Deny from 203.199.124.111
Deny from 204.92.59.152
Deny from 205.225.207.186
Deny from 205.225.207.190
Deny from 206.145.80.235
Deny from 206.169.2.194
Deny from 207.164.34.59
Deny from 208.179.49.21
Deny from 209.120.234.
Deny from 209.152.43.249
Deny from 209.167.50.22
Deny from 209.234.157.107
Deny from 210.200.105.
Deny from 211.152.14.
Deny from 211.157.8.44
Deny from 211.99.
Deny from 213.186.38.67
Deny from 213.252.152.13
Deny from 213.42.2.
Deny from 213.56.44.118
Deny from 216.157.225.36
Deny from 216.185.57.
Deny from 216.46.79.46
Deny from 216.74.173.209
Deny from 217.162.212.174
Deny from 217.171.172.7
Deny from 217.22.62.69
Deny from 217.227.37.62
Deny from 217.37.100.141
Deny from 217.43.212.22
Deny from 217.73.165.40
Deny from 218.13.195.230
Deny from 218.30.13.176
Deny from 218.93.5.48
Deny from 218.93.6.227
Deny from 218.93.7.43
Deny from 219.129.179.
Deny from 220.73.165.76
Deny from 24.107.14.244
Deny from 24.126.19.6
Deny from 24.136.55.144
Deny from 24.153.151.50
Deny from 24.153.151.51
Deny from 24.161.201.195
Deny from 24.173.210.90
Deny from 24.173.79.238
Deny from 24.194.153.236
Deny from 24.243.39.114
Deny from 24.248.74.254
Deny from 4.43.126.10
Deny from 61.173.9.203
Deny from 61.177.
Deny from 61.177.77.168
Deny from 61.178.85.117
Deny from 62.119.133.
Deny from 62.177.137.205
Deny from 62.194.0.71
Deny from 62.194.118.54
Deny from 62.194.67.18
Deny from 62.194.7.89
Deny from 62.194.86.81
Deny from 62.252.192.11
Deny from 62.254.128.7
Deny from 63.231.82.207
Deny from 64.140.49.67
Deny from 64.140.49.68
Deny from 64.140.49.69
Deny from 64.231.195.107
Deny from 64.56.225.45
Deny from 64.81.88.11
Deny from 65.172.164.2
Deny from 65.93.130.29
Deny from 65.95.158.205
Deny from 65.95.33.209
Deny from 66.119.128.66
Deny from 66.183.223.233
Deny from 66.21.128.30
Deny from 66.214.102.7
Deny from 66.215.16.3
Deny from 66.27.146.58
Deny from 66.68.64.207
Deny from 66.96.238.245
Deny from 66.98.136.28
Deny from 67.113.198.63
Deny from 67.68.196.209
Deny from 67.84.9.127
Deny from 67.96.63.103
Deny from 67.96.63.116
Deny from 68.109.140.254
Deny from 68.192.120.178
Deny from 68.36.192.74
Deny from 68.39.132.160
Deny from 68.7.115.241
Deny from 69.15.60.42
Deny from 69.162.182.209
Deny from 69.28.130.229
Deny from 69.28.130.230
Deny from 69.28.130.231
Deny from 69.31.79.226
Deny from 69.44.60.201
Deny from 69.46.135.17
Deny from 69.48.94.231
Deny from 80.129.214.179
Deny from 80.218.77.179
Deny from 81.186.53.253
Deny from 81.199.83.26
Deny from 81.57.110.146
Deny from 82.166.132.
Deny from 82.166.132.74
Deny from 82.193.64.21
Deny from 82.195.131.177
Deny from 83.116.38.172

Chociaż lista wydaje się być długa, to niestety zmienia się bardzo szybko. Pamiętajmy o tym, że twórcy złośliwych pająków toczą nieustanną walkę z naszymi zabezpieczeniami i starają się możliwe najczęściej zmieniać adresy IP. Dlatego warto przeszukiwać Internet w poszukiwaniu coraz to nowszych baz spamujących pająków i często uaktualniać nasze zabezpieczenie.

Na koniec tego wpisu, mały tip dla zainteresowanych. Warto wiedzieć, że za pomocą polecenia „Deny from…” można zablokować całą grupę adresów IP bez konieczności wypisywania każdego z nich. Zamiast kilkunastu podobnych wpisów:

Deny from 81.57.110.146
Deny from 81.57.611.46
Deny from 81.57.106.16
Deny from 81.57.301.112
Deny from 81.57.276.23
…

Można użyć jednego, który zablokuje wszystkie IP z grupy „81.57….”:

Deny from 81.77.

W niektórych przypadkach zachodzi potrzeba, aby treści publikowane na stronie internetowej, były dostępne tylko z jej poziomu, bez możliwości skopiowania i umieszczenia w innym miejscu. Niestety nie zawsze wystarcza informacja o prawach autorskich, umieszczona gdzieś w stopce strony. Poniższe rozwiązanie jest bardzo proste do wdrożenia, bo wymaga modyfikacji zaledwie jednej linijki kodu naszej strony. Jednak należy pamiętać, że jest to jedno z najprostszych rozwiązań i skopiowanie tekstów przez osobę znającą się na budowie stron internetowych nie będzie trudne do wykonania. Z drugiej strony w przypadku standardowych użytkowników czyli takich, którzy najczęściej bagatelizują ostrzeżenie o prawach autroskich, takie zabezpieczenie strony może być wystarczające.

Jak to zrobić? Następująca instrukcja w tagu <BODY> powoduje zablokowanie możliwości zaznaczenia tekstu i skopiowania go do schowka:

<body onselectstart=”return false”>

A jak zablokować prawy klawisz myszki? Robimy to w następujący sposób:

<body oncontextmenu=”return false”>

Polecenia oczywiście można łączyć:

<body onselectstart=”return false” oncontextmenu=”return false”>

Na koniec przedstawię jeszcze polecenie z tej samej serii, które blokuje zapis jednego, konkretnego zdjęcia na stronie:

<img src=”obrazek.jpg”  onmousedown=”return false” oncontextmenu=”return false” onselectstart=”return false” onselect=”return false” oncopy=”return false” ondragstart=”return false” ondrag=”return false” />

W tym tutorialu dowiemy się jak stworzyć przy pomocy jQuery efektownie wyglądające animowane menu. Demo – menu strony w jQuery.

W wybranym miejscu strony wstawiamy nasze menu:

<ul id=”topnav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>O Nas</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Cennik</a></li>
<li><a href=”#”>Projekty</a></li>
<li><a href=”#”>Kontakt</a></li>
</ul>

Wcześniej definiujemy arkusz stylów:

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #555;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}

Oraz jQuery:

<script type=”text/javascript”>
$(document).ready(function() {
$(„#topnav li”).prepend(„<span></span>”);
$(„#topnav li”).each(function() {
var linkText = $(this).find(„a”).html();
$(this).find(„span”).show().html(linkText);
});
$(„#topnav li”).hover(function() { //On hover…
$(this).find(„span”).stop().animate({
marginTop: „-40″ //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out…
$(this).find(„span”).stop().animate({
marginTop: „0″
}, 250);
});
});
</script>

Pamiętaj, że powyższy fragment kodu to jedynie tutorial, przeznaczony dla osób zaznajomionych z podstawami programowania czyli takich, które wiedzą co z nim zrobić  Nie jest to gotowy skrypt, który po wstawieniu na stronę wyświetli identyczne menu jak to, które prezentujemy w naszym demo. Jeżeli jesteś początkujący i nie wiesz jak sobie z tym poradzić, zacznij od sprawdzenia czy uruchomiłeś wywołanie biblioteki jQuery

Wywołanie powinno się znaleźć pomiędzy tagami <HEAD> Twojej strony:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>

Następnie musisz odpalić program graficzny lub wyciągnąć gotowe obrazki buttonów w naszego demo. Miłego eskperymentowania!

Najbardziej popularnym sposobem publikacji reklam na stronie są banery reklamowe oraz okna typu pop-up. Reklama tego typu doskonale sprawdza się we wszystkich przypadkach, w których informacja powinna znaleźć się na pierwszym planie i mocno absorbować użytkownika. Jednak w niektórych sytuacjach potrzebujemy czegoś bardziej dyskretnego,  jednocześnie estetycznego i zachęcającego do zwrócenia uwagi. Idealnym rozwiązaniem jest animowana reklama umieszczona w rogu strony, która rozwija się dopiero po najechaniu lub klinknięciu myszką – Expand Corner.

Zobacz demo Expand Corner

Jak to wykonać?

W kodzie HTML osadzasz kontener dla twojej reklamy Expand Corner oraz definiujesz w nim obraz, który jest widoczny przed zdarzeniem onMouse (czyli przed najechaniem myszki na rozwijany rożek). Obrazek jest w formacie PNG, ponieważ używamy w nim przezroczystości tych miejsc, które zostają odsłonięte po rozwinięciu reklamy.

<div id=”pageflip”>
<a href=”#”>
<img src=”demo.png” alt=”" />
<span>Subskrybuj RSS</span>
</a>
</div>

CSS zawiera informację na temat pliku graficznego, który pojawia się podczas zdarzenia onMouse (tzn. w chwili kiedy najeżdżasz myszką na reklamę). Obrazek ma rozszerzenie JPG, ponieważ tutaj nie potrzebujemy przezroczystości. Jednak równie dobrze może być to PNG, GIF, BMP lub każde inne rozszerzenie pliku przyjmowane przez przeglądarkę.

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(demo2.jpg) no-repeat right top;
text-indent: -9999px;
}

Instrukcje dla jQuery umieszczamy w tagu <HEAD> naszej strony:

<script type=”text/javascript” src=”jquery-1.5.min.js”></script>
<script type=”text/javascript”>
$(„#pageflip”).hover(function() { //On hover…
$(„#pageflip img , .msg_block”).stop()
.animate({ //Animacja i otwarcie zakładki
width: ’307px’,
height: ’319px’
}, 500);
} , function() {
$(„#pageflip img”).stop() //Po odjechaniu powrót do wielkości 50×52
.animate({
width: ’50px’,
height: ’52px’
}, 220);
$(„.msg_block”).stop() //Po odjechaniu powrót do wielkości 50×50
.animate({
width: ’50px’,
height: ’50px’
}, 200); //Zwróć uwagę na tempo rozwijania (przydatne dla problemów z IE)
});
</script>

Zwróć uwagę, że w pierwszej linii powyższego kodu wywołujemy bibliotekę jQuery, która jest konieczna dla działania skryptu. Na serwerze musi znajdować się plik jquery.js (w naszym przykładzie jest to jquery-1.5.min.js czyli aktualnie najnowsza wersja biblioteki).