AdSense - style i wyłączanie adv killerów

Dziś nieco o AdSense - gadżecie, a nie o systemie :) poniżej jego kod HTML: aby go zlokalizować w szablonie szukamy b:widget id='AdSense lub <data:adcode>

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>

<data:adCode/>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Jak już widać po kodzie nie ma tutaj nagłówka tytułu - niektórym psuje to strasznie wygląd bloga, zatem poprawmy ten kod...
Przy okazji dłubania w tym kawałku kodu dołożymy stosowny styl oraz opcje dla blokujących wyświetlanie reklam przy pomocy AdBlock Plus i podobnych pomocnych narzędzi.
Kod stylu /czerwony/ oczywiście można pominąć, lub edytować o czym nieco niżej... Poniżej prze-edytowana wersja kodu.

<b:widget id='AdSense1' locked='false' title='AdSense 160x600' type='AdSense'>
<b:includable id='main'>
<h2 class='title'>AddCode - lub inny tytuł naszego gadżetu</h2>

<center><div class='widget-content'>
<div class='adCode160x600' id='adCode160x600' onClick='alert("Nie bądź pijawką internetową... \n \n Dodaj naszą stronę do wyjątków i kliknij od czasu do czasu w reklamę");'>

<data:adCode/>

</div> 
</div></center>

</b:includable>
</b:widget>

doklejamy nasz kod CSS lub dodajemy go z pomocą projektanta szablonów

.adCode {
height:600px;
float: center;
background: url('http://link do grafiki tła') no-repeat center center;
cursor: pointer;
cursor: hand;
width:160px;
}

Kilka istotnych kwestii w powyższym kodzie. Wysokość i szerokość określamy na podstawie użytej wysokości wyświetlanej jednostki reklam. W tym przypadku był to blok reklamowy 160 x 600px. Grafika jaką podajemy w tle powinna być o takich samych rozmiarach lub mniejsza.W przeciwnym wypadku podane tło wyświetli się z pod jednostki adSense - co może niezbyt estetycznie wyglądać.

O grafice tła słów kilka - będzie ona widoczna tylko w przypadku gdy nasz przeglądający ma zablokowane wyświetlanie reklam więc można użyć bannera zaprzyjaźnionego bloga lub strony lub innego dowolnego obrazka. Osobiście zamieszczam kolekcje z informacją o zablokowanych reklamach :) przykładowe moje grafiki widzisz na końcu posta.

Wróćmy teraz do kwestii onClick w kodzie powyżej. Bardziej zaawansowani w internetowe robaczki już wiedzą że to nic innego jak wiadomość po kliknięciu na grafikę. Można ją edytować wg własnego uznania \n to znacznik nowej linii. Za pomocą funkcji onClick możemy wywołać jeszcze inne zachowania np. otworzyć dowolną stronę internetową lub blog

onClick='window.open("http://dowolny.adres.www");' w nowym oknie
onClick='window.open("http://nasz.adres.bloga","_top");' w tym samym oknie

wywołać dowolną funkcje JavaScriptu -

onClick='javascript:nasza_funkcja();'

itd... więcej przykładów do wyszukania w google...

Jeśli w naszym blogu mamy kilka rożnych bloków reklamowych, a przeważnie tak jest,  to każdemu z nich nadajemy unikalną nazwę arkusza np .adCode160x600 lub .adCode728x90 itd... pamiętając o stosownych zmianach we wszystkich fragmentach edytowanego kodu.

Grafik zemnie żaden, więc jeśli się nie podobają możesz wykreować własne lub poszukać czegoś w Google ;) działanie ww kodów można zobaczyć poniżej na przykładowym adCodzie

Jeśli jedna grafika tła i jeden odsyłacz to za mało - zapewne pokusilibyście się o własny rotator bannerów.

Jak podpiąć taki rotator do ww kodów, bardzo prosto... Zauważcie w pierwszej części kodu zaraz za klasą pojawia się znacznik ID. Właśnie tym unikatowym id posłużymy się w naszym rotatorze teł

Kod rotatora jest poniżej po wcześniejszej edycji linków grafik i odsyłaczy wklejamy go tuż nad znacznikiem </body> 

<script type="text/javascript">

var bgSrc = new Array ()
bgSrc[0]="http://adres.do.pierwszego.linka.grafiki.jpg"
bgSrc[1]="http://adres.do.drugiego.linka.grafiki.jpg"
bgSrc[2]="http://adres.do.trzeciego.linka.grafiki.jpg"
bgSrc[3]="http://adres.do.czwartego.linka.grafiki.jpg"
bgSrc[4]="http://adres.do.piątego.linka.grafiki.jpg"
bgSrc[5]="http://adres.do.szustego.linka.grafiki.jpg"

var bgUrl = new Array ()
bgUrl[0]="http://adres.do.pierwszego.linka.odsyłacza.html"
bgUrl[1]="http://adres.do.drugiego.linka.odsyłacza.html"
bgUrl[2]="http://adres.do.trzeciego.linka.odsyłacza.html"
bgUrl[3]="http://adres.do.czwartego.linka.odsyłacza.html"
bgUrl[4]="http://adres.do.piątego.linka.odsyłacza.html"
bgUrl[5]="http://adres.do.szustego.linka.odsyłacza.html"

var r= Math.floor(Math.random() * (bgSrc.length))
var bgImg = bgSrc[r]
var clUrl = bgUrl[r]
function rBgImg(){
document.getElementById("adCode160x600").style.backgroundImage = "url('"+bgImg+"')";
}

function klik(){ window.open(clUrl); }
rBgImg();
</script>

Kolejne elementy rotatora dodajemy dopisując następne linie rotatora nadając następną cyfrę w nawiasach []

bgSrc[6]="http://adres.do.siudmego.linka.grafiki.jpg"

...

bgUrl[6]="http://adres.do.siudmego.linka.odsyłacza.html

itd...

Aby nasz rotator zamiast wyświetlać informacje przekierowywał nas po kliknięciu na grafikę do wybranej strony zmienimy parametr onClick na naszą funkcję klik(); tak więc cod naszego gadzetu wygląda teraz mniej więcej tak:

<b:widget id='AdSense1' locked='false' title='AdSense 160x600' type='AdSense'>
<b:includable id='main'>
<h2 class='title'>AddCode - lub inny tytuł naszego gadżetu</h2>

<center><div class='widget-content'>
<div class='adCode160x600' id='adCode160x600' onClick='javascript:klik();'>

<data:adCode/>

</div> 
</div></center>

</b:includable>
</b:widget>

Przykład działania kodu rotatora znajdziesz tutaj.


 

Moje przykładowe tła do wybranych bloków reklamowych
160 x 600	250 x 250		300 x 250	120 x 600
728 x 90		468 x 60

PS 9-04-2011 - no i masz jakiś inteligent dodał opcje do edytora poprawiające kod i jak mam teraz pisać... uff pozostaje czysty HTML - to tak na marginesie... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110