tutoriale

sIFR 3 pe WordPress

Dupa ce v-ati descarcat sIFR 3 alpha (vezi sfarsitul articolului) despachetati continutul arhivei. Veti avea 4 directoare: “css”, “demo”, “flash” si “js”. Va sfatuiesc sa va alegeti un font pe care apoi sa-l instalati. Deschideti directorul “flash” in care cu ajutorul lui Macromedia Flash 8 veti deschide fisierul “sifr.fla”.

Acum dati dublu click pe “zona alba” si veti observa ca a aparut textul “Bold Itallic Normal”. Va alegeti fontul instalat mai devreme dupa care File->Export->Export Movie sau Ctrl+Alt+Shift+S.

Deschideti directorul “js” unde cu ajutorul unui editor de cod deschideti “sifr.js” Navigati pana la sfarsitul fisierului unde veti adaugat codul urmator:

sIFR.prefetch({
 
src: 'sifr/verd.swf',
 
highsrc: 'sifr/verd.swf'
 
});sIFR.compatMode = true;
 
sIFR.activate();
 
sIFR.replace({
 
selector: 'h1′,
 
src: 'sifr/verd.swf',
 
highsrc: 'sifr/verd.swf',
 
css: {
 
'.sIFR-root' : { 'color': '#650500′ , 'font-weight': 'bold' },
 
'a': { 'text-decoration': 'none' },
 
'a:link': { 'color': '#650500′ },
 
'a:hover': { 'color': '#4F4F4F' }
 
},
 
paddingTop: 20
 
});
 
sIFR.replace({
 
selector: 'h2′,
 
src: 'sifr/verd.swf',
 
highsrc: 'sifr/verd.swf',
 
css: {
 
'.sIFR-root' : { 'color': '#650500′ },
 
'a': { 'text-decoration': 'underline' , 'font-style': 'italic'},
 
'a:link': { 'color': '#650500′ },
 
'a:hover': { 'color': '#4F4F4F' }
 
},
 
paddingTop: 0
 
});

Daca v-ati ales un font pe care doriti sa-l folositi (ati facut “manevra” cu Flash 8 ) nu uitati sa modificati codul

src: 'sifr/verd.swf',
 
highsrc: 'sifr/verd.swf'

inlocuind “verd.swf” cu numele fisierului creat adineaori.

Dupa cum probabil v-ati dat seama selector: ‘h1′ se refera la clasa css care va folosi sIFR.

In directorul “css” veti gasi fisierul “screen.css” pe care va invit sa-l deschideti si sa-l personalizati. Spre deosebire de versiunile anterioare sIFR 3 suporta si formatare css.

Cu ajutorul unui client FTP va incarcati in directorul root (public_html) directoarele “css”, “js” si va veti crea un director numit “sifr” in care veti copia fisierul SWF creat ori cel default.

Navigati pana la directorul temei folosite si in fisierul “header.php” inainte de </head> adaugati liniile urmatoare:

 <script src="http://www.numeblog.com/js/sifr.js" type="text/javascript"></script>
<link href="http://www.numeblog.com/css/screen.css" type="text/css" media="screen" rel="stylesheet" />

Acum va invit sa editati si fisierul “footer.php” si inainte de </body> adaugati codul:

 <script type="text/javascript">sIFR.initialize();</script>

Ultima versiune este sIFR 3 beta 2 insa eu nu am incercat sa vad cum se comporta fiindca versiunea alpha face tot de ce am eu nevoie. In principiu tutorialul acesta scurt ofera o cantitate minima de informatii necesara implementarii corecte a scriptului sIFR. Nu va fie frica sa experimentati si daca intalniti probleme nu ezitati sa lasati un comentariu pentru a gasi o rezolvare.

Descarca sIFR 3 alpha

Pentru a vedea rezultatul obtinut puteti arunca o privire pe pagina demo