Cum punem un banner pe blog

Aceia care intraţi mai des pe acest blog vă aduceţi aminte că, în urmă cu ceva vreme am promis că scriu despre cum se face un banner şi cum se poate pune codul acestuia pe blog pentru a putea fi copiat pe un alt blog. M-a luat însă valul călătoriilor virtuale şi am tot amânat postarea materialului. Bine, o metodă simplă este disponibilă pe Toate Blogurile, dar dacă vreţi să aveţi satisfacţia lucrului “self made” nu-i deloc dificil. Acum, să nu vă faceţi impresia
că am inventat eu roata, chestiile astea sunt ştiute de multă lume, se găsesc relativ uşor căutând pe google, aşa am descoperit şi eu “apa caldă”.

Aşadar, vreţi un banner care să vă reprezinte blogul, iar pentru codul acestuia să existe posibilitatea de copiere pe un alt blog care doreşte să vă promoveze. Cam asta este tema, acum să-i desluşim rezolvarea.

În primul rând aveţi nevoie de imaginea, poza sau cum vreţi să-i spuneţi, care să apară grafic pe blog. De fapt ăsta ar fi bannerul. Metoda cea mai simplă este să utilizaţi un fişier imagine (bmp, jpg, png) existent pe propriul calculator sau copiat de pe internet (aveţi de unde alege ceva care vă place) sau să vă creaţi singuri (dacă aveţi talent şi răbdare) o imagine într-un editor grafic (Paint, Corel, PhotoShop). Eu, fiind adeptul principiului alegerii drumului cel mai scurt dintre A şi B, am optat pentru varianta utilizării unei imagini existente.

Dacă vă chinuie talentul, există mai multe siteuri care permit crearea propriului banner. Dintre acestea cele mai căutate par să fie următoarele:

bannersketch

mybannermaker

bannercreator

banner-maker

animationonline

N-am prea aprofundat modul de utilizare, însă am observat că oferă posibilitatea alegerii dimensiunilor, culorilor, fonturilor etc. Din punctul meu de vedere sunt funcţionale, dar nu merită să vă complicaţi.

Acum, după ce am rezolvat problema bannerului, urmează partea frumoasă, afisarea acestuia pe blog, dar şi a codului aferent, dând astfel posibilitatea binevoitorului să-l copieze şi apoi să-l lipească pe propriul blog, evident pentru a face reclamă blogului vostru. Să vedem ce şi cum facem pentru a ajunge la rezultatul dorit.

Întâi de toate, bannerul (poza) trebuie încărcată (uploadată) pe un server de "image-hosting", eventual dacă platforma blogului permite se poate încărca imaginea chiar pe blog. Iată câteva adrese unde vă puteţi încărca bannerul:

tinypic

freeimagehosting

imageshack

imgur.com

Eu am folosit http://tinypic.com/, şi o poză 400x400 (nu vă preocupaţi de mărime, se scalează, ideea este să fie patrată, pentru estetică, nu de alta). După încărcare va fi afişată „calea” (path-ul) către poza voastră, (de fapt sunt 4 una sub alta, alegeţi-o pe ultima, copiaţi cu click şi Ctrl+C), de pildă: http://i50.tinypic.com/pozamea.png (o să-i zicem CaleaBannerului). De chestia asta aveţi nevoie ca să afişaţi bannerul pe blog folosind următorul cod:

<a href="AdresaBloguluiVostru – http://blogulmeuminunat.blogspot.com/" target="_blank"><img src="CaleaBannerului – aceea salvată/copiată, de ex.: http://i50.tinypic.com/pozamea.png" alt="" border="0" weight="125" height="125" /></a>

unde: weight="125" şi height="125" definesc lăţimea şi înălţimea, la fel de bine se poate înlocui 125 cu 100 sau 80, cum vă place.

Codul de mai sus îl scrieţi într-un widget HTML nou definit din sidebar şi gata, acum apare pe blog imaginea bannerului, iar dacă daţi click pe aceasta se va deschide blogul. Însă chestia asta nu vă este de prea mare folos (cel mult vede omu’ ce fain banner aveţi) dacă nu afişaţi în sidebar codul de afişare pentru baner, astfel încât cei doritori să-l poată copia şi pune la ei pe blog.

Pentru a face codul HTML vizibil intr-o fereastra derulantă din sidebar de unde să se poată copia trebuie să scrieţi într-un alt widget următoarea linie de cod:

<textarea readonly="readonly" name="code" rows="5" style="width:80%;">COD BANNER </textarea>

unde: rows = 5 înseamnă că se scrie pe 6 (0-5) linii; with:80% reprezintă lăţimea ferestrei 100% fiind lăţimea totală a barei laterale (vă puteţi juca cu aceste două cifre).

COD BANNER îl scrieţi după modelul:

&lt;a href="http://Adresa blogului vostru – blogulmeuminunat.blogspot.com" title="Viziteaza blogul meu; scrieţi ce vreţi să apară la trecerea mouse-ului peste banner" target="_blank" rel="follow"&gt;&lt;img src="CaleaBannerului – aceea salvată/copiată, de ex.: http://i50.tinypic.com/pozamea.png" alt="" weight="125" height="125" border="0" /&gt;&lt;/a&gt;

Codul final devine:

<textarea readonly="readonly" name="code" rows="5" style="width:80%;">&lt;a href="http://Adresa blogului vostru – blogulmeuminunat.blogspot.com" title="Viziteaza blogul meu; scrieţi ce vreţi să apară la trecerea mouse-ului peste banner" target="_blank" rel="follow"&gt;&lt;img src="CaleaBannerului – aceea salvată/copiată, de ex.: http://i50.tinypic.com/pozamea.png" alt="" weight="125" height="125" border="0" /&gt;&lt;/a&gt;</textarea>

Observaţii:

1. puteţi face linkul "nofollow" înlocuind în cu acest atribut directiva rel="follow";
2. weight şi height definesc mărimea de bannerului (în cazul acesta 125 x 125), vă puteţi juca cu aceste cifre;
3. grupul de caractere "&lt;" înlocuieşte caracterul "<", iar "&gt; înlocuieşte caracterul ">", altfel ar apărea în fereastra derulantă bannerul şi nu codul acestuia cum ne dorim.

Cam asta este tot. SUCCES!