Tutorial - Analog Clock Personalizabil

Scris de **Zeus** Sam Mar 19, 2011 11:01 pm

Tutorial - Analog Clock Personalizabil

Multi dintre voi cred ca doriti sa va decorati forumul cu aplicand un ceas pe paginile acestuia,insa toate ceasurile pe care le gasim pe net contin reclame si alte elemente neplacute.
Navigand pe internet in cautare de ceva nou,am descoperit cum poti crea si personaliza un astfel de ceas si m-am gandit sa va arat si voua printr-un tutorial mult mai simplu.
Am creat pentru voi o serie ce imagini pentru aspectul ceasului,ca sin acestea sa o alegeti pe cea care se potriveste cu designul forumului vostru
Previzualizare:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Instalare:
-Putem introduce acest script pe pagina de start: PA => Afisare => Pagina de Start => Generalitati => Mesaj pe pagina de Start (Scriptul-ul va fi afisat DOAR pe pagina de start)
-Sau puteti introduce scriptul intr-un Widget: PA => Module => Portal & Widget-uri => Gestionarea Widget-urilor Forumului => Creati un widget personalizat (scriptul va fi afisat pe toate paginile unde apar Widget-urile)

***Introduceti urmatorul cod in una din locatiile prezentate mai sus:
Cod:
<script type="text/javascript" src="http://designart-public.bravehost.com/150_clock_jQuery%201.2.6.js"></script> <script type="text/javascript" src="http://designart-public.bravehost.com/150_clock.js"></script> <link href="http://designart-public.bravehost.com/150_clock_style.css" rel="stylesheet" type="text/css" media="screen,projection" />
***Pentru ca ceasul sa functioneze,acest cod trebuie sa ramana intact !

Acum pentru a putea alege culoarea ceasului introduceti urmatorul cod in continuarea celui de mai sus:
Cod:
<style> #clock { background: url(http://designart-public.bravehost.com/Clock-Black.png); } </style>

***In acest cod modificati doar link-ul (adresa) imaginii de background cu una din cele postate in Spoilerul de mai jos:
Spoiler:

Dupa ce am ales imaginea care se potriveste design-ului nostru vom introduce urmatorul cod in continuarea celor de mai sus:
Cod:
<ul id="clock"> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> </ul>

Pentru ca acest script sa functioneze corect,NU modificati nimic in afara de ceea ce am specificat mai sus !

Spor la treaba !

***Acest tutorial apartine forumului DesignART !
Reproducerea sau modificarea acestuia nu sunt permise fara acordul nostru !***

- Pentru orice nelamurire legata de acest tutorial va rugam sa postati
in sectiunea [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Tutorial realizat de BODO | DesignART

***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !