duminică, 28 iulie 2013

Cum punem un banner pe blog

Banner, 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:


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:


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!

12 comentarii:

  1. Phoi, ce simplu! Hai c-am inteles tot, ma duc sa urmez protocolul pas cu pas dar s-ar putea sa activez acceleratorul de particule de la Geneva! Sau sa starpesc gandacul de Colorado...Orice, numai ce trebuie n-o sa iasa!:))

    RăspundețiȘtergere
    Răspunsuri
    1. Pfuai, ce te alinţi! Să vezi cât mi-a trebuit mie pân' i-am dat de capăt... Am luat-o pas cu pas şi mi-a ieşit pe blogul de şah şi pe celălalt. Aici n-am mai pus ca să nu ziceţi că fac cultul personalităţii. Da' poate tot pun... odată... ;) :))

      La tine e oricum mai simplu, faci la fel ca în cazul bannerului de la Firma lu' Copilu', îţi mai rămâne partea a doua, unde modifici chestiile scrise cu albastru şi aia cu roşu. SIMPLU :))))) Ai văzut!

      Ștergere
  2. E foarte utilă postarea ta, Centurion Invictus. Poate mă gândesc şi eu şi-mi fac un banner, atunci când voi avea mai mult timp pentru blogging, deocamdată am un program foarte încărcat şi nu prea reuşesc să le fac pe toate. Şi vreau să ştii că am să apelez la tine, dacă nu mă voi descurca. Sunt convinsă că mă vei ajuta.
    O seară minunată îţi doresc, Centurion Invictus, şi-o nouă săptămână excelentă! :)

    RăspundețiȘtergere
    Răspunsuri
    1. Cu siguranţă, Ştefania. Te ajut cu cea mai mare plăcere. Dacă nu se poate altfel îţi trimit totul pe e-mail, doar să-mi trimiti poza pentru banner.

      Lasă că vin şi vremuri mai liniştite, tuturor ni se mai întâmplă să nu mai ştim cum să facem rost de câteva minute pentru blog, însă în cele din urmă iese şi soarele.

      O seară minunată şi o săptămână la fel (cu mult mai mult timp pentru destindere) :)

      Ștergere
  3. Eu m-am descurcat cu ajutorul Goagal :D Nu am stiut, dar am cautat pe google si m-am descurcat. Tot asa cu un tutorial scris de cineva.

    RăspundețiȘtergere
    Răspunsuri
    1. Tot aşa am procedat şi eu, cum altfel poţi afla ceva decât apelând la "sfântu' G" ;))
      Nah, şi cum sunt altruist din fire, împart cunoştinţele cu voi :)

      Ștergere
  4. De câteva zile mi-am propus să-mi încropesc cu banner. Intru la tine pe blog şi ce-mi e dat să văd: un articol mură-n gură despre aşa ceva...Ce mai pot spune, mulţam fain de ajutor, azi, dacă am timp, o să încerc.

    RăspundețiȘtergere
    Răspunsuri
    1. Pentru puţin! De fapt este şi meritul tău, mi-a venit ideea atunci când discutam despre cum se pun comentarii şmechere (cu bold şi italic).

      Ștergere
  5. Răspunsuri
    1. Cu plăcere, mă bucur că ţi-a fost de folos :)

      Ștergere