Incep acest articol cu presupunerea ca stiti deja ce e ala html si css si cu ce se mananca astea doua(se mananca una cu alta, si eventual cu garnitura js, php si mysql).

Multi aveti un blog pe cms wordpress, si totodata o tema care, poate are si o optiune de a adauga/schimba un logo direct din wp-admin. In caz contrar, ati fost si sunteti nevoiti sa va bagati nasul prin fisierele temei(mai exact header.php, si eventual style.css).

Majoritatea se multumesc doar prin a scrie niste linii de cod in header.php , imediat dupa linia

<div id=”header”>

Si probabil ca adaugati ceva de genul:

1)

<a href=”http://blogul.meu” title=”Blogul lui Gigi” ><img src=”http://blogul.meu/calea catre fisierul meu/logo.png” border=”0″></a>

Nu?

Si asta pentru ca ati auzit voi de la X ca asa se face, si ca trebuie sa-i dai un title si sa specifici border=”0″, ca altfel apare nu stiu ce chenar in jurul lui.

Si asta este…corect. O mica precizare as mai avea la modalitatea mai sus mentionata: pe langa border=”0″, adaugati si un

alt=”imagine logo”

unde “logo” poate fi inlocuit cu orice text care sa te duca cu gandul ca acolo este imaginea logo-ului. Acest lucru se face pentru ca se poate intampla, din felurite motive, ca browserul tau sa nu reuseasca sa incarce imaginea in timp util. Astfel, anunti vizitatorul ca acolo este o “imagine logo”. Daca acel text alternativ ar lipsi, iar imaginea nu s-ar incarca, utilizatorul nu va vedea decat un chenar urat cu un x in el….pe unele browsere. Cred ca nu exista internaut care sa nu fi vazut in viata lui acel chenar cu x la care ma refer.

2) …ca nu am terminat.

Ne folosim atat de html cat si de css, adica cream un id(#logo) sau o clasa(.logo) in css, pe care  o folosim intr-un tag de tip ancora (<a></a>) in html.

In fisierul css avem:

#logo {

background: url(“http://blogul.meu/calea catre fisierul meu/logo.png”) no-repeat ;
height: 123px;/*Asta ca sa setati inaltimea logo-ului*/
margin: 90px 0px 0px 20px;/*Poate vreti sa-l pozitionati nu prea sus, nu prea in stanga etc*/
width: 460px;/*Asta ca sa setati latimea logo-ului*/

}

Iar in fisierul html avem:

<a  id=”logo” href=”http://blogul.meu” title=”Blogul lui Gigi” ></a>

Totusi, pentru a avea control mai bun asupra elementelor, se recomanda folosirea unui <div> pe post de wrapper al logo-ului, setand pentru acesta, din css, reguli privind pozitia, modul de afisare(daca mai vrem sau nu alte elemente pe aceeasi linie cu logo-ul etc) . Tot din css vom specifica faptul ca ancora care se afla in div-ul cu pricina va contine imaginea de logo setata ca background.

Asadar, in fisierul css vom avea:

#logo {

display:inline-block;/*Acest lucru inseamna ca pe linia cu elementul caruia i se aplica regula, mai pot fi si alte elemente….. de exemplu niste butoane de facebook, twitter etc */
margin: 90px 0px 0px 20px;/*Poate vreti sa-l pozitionati nu prea sus, nu prea in stanga etc*/
/*Aici mai pot fi setati multi parametri, insa asta este deja alta poveste*/
}

/*Ce este mai jos se traduce astfel: fiecarei ancore gasita in elementul ce are id-ul logo, i se va aplica regulile dintre {}*/

#logo a {

background:url(“http://blogul.meu/calea catre fisierul meu/logo.png”) no-repeat;

width:460px;

height:123px;

}

Fisierul html va contine:

<div id=”logo”>

<a  href=”http://blogul.meu” title=”Blogul lui Gigi” ></a>

</div>

Lipseste ceva?

3) Da. Un pic de SEO.

Cum se spune, continutul este inima unui site. La fel gandeste si google, adica in termeni de limbaj markup, css-ul fiind dat deoparte.

Deci, avem un site cu un logo pe care scrie GoldMidas. Logo-ul find imagine, Google nu il poate indexa sub forma de text, lucru foarte rau dpdv SEO, cu atat mai mult cu cat este vorba chiar de titlul siteului.

Ca si intr-un editor text, titlurile sunt impartite in headings(h1, h2, h3 etc) in functie de importanta lor. Prin urmare, un titlu de site s-ar traduce printr-un h1.

Revenind in codul nostru html, putem adauga un tag h1 pentru text, exact in interiorul ancorei(<a></a>) .

<div id=”logo”>

<a  href=”http://blogul.meu” title=”Blogul lui Gigi” ><h1>Blogul lui Gigi</h1></a>

</div>

Observam ca avem o problema destul de urata. Logo-ul nostru va arata astfel:

Ca sa evitam aceasta situatie, vom crea o clasa special pentru <h1>

Va trebui sa trisam putin pentru a scapa de textul afisat peste imagine.

Un adin solutii este aceasta :

In fisierul css adaugam

.offscreen-title {

position: absolute;

left: -9999px;

top: -9999px;

}

Ce am scris mai sus va duce textul la 9999px in stanga ecranului si la alti 9999px deasupra . Si asa scapam definitiv de textul de titlu din campul vizual iar restul elementelor din site nu vor fi deloc afectate.

Un alt trick folosit este de a seta indentarea textului la un numar negativ mare, efectul fiind cam acelasi(textul mutat in dreapta la 99999 px, neafectand restul elementelor din site) .

.offscreen-title {

text-indent:-99999px;

}

Inchei prin a va arata si modificarea in html , dar si cu speranta ca v-a folosit la ceva cele scrise.

<div id=”logo”>

<a  href=”http://blog.goldmidas.eu/” title=”GoldMidas Blog” ><h1 class=”offscreen-title”>Goldmidas</h1></a>

</div>