Crearea un banner pentru blog
Bannerul e un element grafic cu caracter publicitar,fiind în același timp și hiperlink spre pagina cu conținutul,pe care o reclamează.Mărimea lui e regulabilă și de obicei este amplasat pe Blogger în bara laterală.
Bannerul care vi-l propun este creat în baza stilului CSS,fiind folosită tehnica de suprapunere CSS.Structura lui o puteți vedea în imaginea de mai jos.
Cum vedeți,este compus din patru elemente:
- primul strat,principal,cu pozition:relative,asupra lui se suprapune restul,din el vizibil rămâine doar bordura pe perimetrul ariei cu lărgimea de 2px;
- al doilea strat,cu pozition:absolute,care în realitate e imaginea selectată de utilizator,avînd dimensiunile mai mici în perimetru față de primul cu 2px;
- al treilea strat,compus din două elemente amplasate în partea de sus și de jos al viitorului banner,fiind semi-transparente și conțin unele date,cum ar fi denumirea blogului și adresa URL.
Cele spuse mai sus le demonstrez prin codul CSS
<style type="text/css">Fiecărui din acești trei componenți îi creăm un div class,în care vo-r fi incluse proprietățile și valorile lor HTML
.principal {
background-color: #003899;
height: 200px;
width: 245px;
position: relative;
font-weight: bold;
}
.secundar {
background-color: #FFF;
height: 196px;
width: 241px;
position: absolute;
left: 2px;
top: 2px;
text-align: center;
}
.superior {
background-color: #FFF;
height: 16px;
width: 241px;
position: absolute;
left: 2px;
top: 2px;
text-align: center;
font-size: 100%;
filter:alpha(opacity=50);
opacity:0.50;
}
.inferior {
background-color: #FFF;
height: 16px;
width: 241px;
position: absolute;
right:2px;
top: 182px;
text-align: center;
font-size: 100%;
filter:alpha(opacity=50);
opacity:0.50;
}
</style>
<div class="principal">În linkul <a href=.....</a> puneți URL -adresa blogului și adresa imaginii păstrată în albumul de fotografii Picasa.
<div class="secundar">
<a href="adresa blogului tău.blogspot.com/"target="_blank"><img src=".. adresa imaginii.." width="241" height="196" alt="nume de blog"/></a>
</div>
<div class="superior">
<div style="font-family:Monotype Corsiva;color: #FF0000">Blogul meu</div>
</div>
<div class="inferior">
<div style="font-family:Monotype Corsiva;color: #FF0000">http://XXXXXXXXX.blogspot.com</div>
</div>
Dacă doriți în continuare să oferiți codul bannerului cititorilor blogului vostru,mai sus de ultimul </div> (în roșu) adăugați următorul cod pentru a crea și o ferestruică pentru el
<br>Copiați acest cod pentru blogul Dumneavoastră!Pentru a amplasa bannerul în bara laterală a blogului,din Design→Adăugați un obiect gadget alegeți opțiunea HTML-Javascript.În ferestiuca gadgetului copiați stilui CSS , codul HTML și codul pentru ferestruica de cod și Salvați gadgetul.
<br><textarea rows="2" cols="26"><a href="adresa blogului tău.blogspot.com/"target="_blank"><img
src="... adresa imaginii.." width="241"
height="196" alt="nume de blog"/></a></textarea>
Sursa
2012-02-03 21:14:00