Am sa va prezint un mic pont despre cum puteti adauga niste efecte de
hover (hover = cand cursorul este peste un element) asupra bannerele de
afiliere ale partenerilor vostri.
Este necsar sa urmam doar 2 pasi simpli.
Adaugarea unei noi clase in CSSPur
si simplu adaugati o noua clasa in CSS-ul vostru, puteti sa ii dati
orice denumire doriti (atata timp cat nu e luata denumirea deja de
CSS-ul de origine).
Si acum am sa va prezint cateva efecte des
intalnite la bannerele de afiliere. Codurile urmatoare se adauga toate
in in foaia voastra de stil CSS sau pe pagina intre tagul
- Cod:
-
<style></style>
Prima ar fi un simplu border de cel putin 2 pixel in jurul bannerului.
- Cod:
-
.nume a img{
margin: 2px 2px;}
.nume a img:hover{
margin: 0px 0px;
border: 2px solid #culoare;}
Demo:
Dupa cum am spus, ii puteti orice denumire asa ca inlocuiti
nume cu ce doriti (la ambele).
La #culoare inlocuiti cu orice cod de culoare pe care il doriti, coduri ca cele de aici:
http://www.computerhope.com/htmcolor.htm
Un alt efect, des folosit, in special pentru bloguri este opacitatea scazuta
- Cod:
-
.nume a img{
opacity:0.5;
filter:alpha(opacity=50);}
.nume a img:hover{
opacity:1.0;
filter:alpha(opacity=100);}
opacity - Opacitatea standard CSS3
filter:alpha - Opacitate pentru Internet explorer 8 sau mai jos
Inlocuiti din prima portiune valoarea 0.5 si respectiv 50 ca sa scadeti opacitatea imaginilor cu cat doriti.
Demo:
Aplicare clasa pe bannereDupa
ce ati ales unul din efectele de mai sus si ati adaugat codurile in
foaia de stil CSS cu denumirea aleasa, nu rame decat sa adaugati intre
bannerele partenerilor vostri:
- Cod:
-
<div class="nume">Codurile bannerelor partenerilor aici</div>
La
nume schimbati cu denumirea pe care ati ales-o pentru codurile CSS.
Si am terminat, efectul va afecta doar imagini cu link, merge garantat si pentru bannere care folosesc javascript.
Daca
doriti alte efecte, va rog sa postati aici o imagine cu efectul pe care
l-ati vazut pe site-ul x. Va rog sa nu lasati si link-uri doar imagini
(print screen-uri). Daca este necesar, va voi cere link-uri dar prin mp.
Sper ca acest tutorial va fost de folos, daca aveti intrebari, nu ezitati sa imi spuneti. Numai bine !
Tutorial realizat de
Wisdom