Cum se realizeaza un scroll pentru blog

La rugamintea unui prieten care a vazut pe o pagina web un cod pentru scrolls dar care functiona numai in limbajul php, un cod ce nu poate fi folosit in sablonul blogger, azi voi prezenta cateva coduri html folosind <marquee> si care se adapteaza perfec in blogger si functioneaza bine in majoritatea browusere-lor.

Derulare text de la dreapta spre stanga
Pentru Webmasters

Copieaza codul urmator si adaugal pe blog:

<marquee>aici vine textul</marquee>

Daca vrei sa schimbi sensul foloseste urmatorul cod:

<marquee direction="right">Pentru Webmasters</marquee>

Pentru Webmasters

Scroll orizontal cu imagine in loc de text:


- codul este urmatorul:

<marquee><img src="URL_IMAGINE" width="64" height="60" class="imgizqda" /></marquee>

Acelasi scroll cu sens schimbat:


SI CODUL:

<marquee direction="right"><img src="URL_IMAGINE" width="64" height="60" class="imgizqda" /></marquee>

Scroll imagine + text;
Pentru Webmasters

si codul:

<marquee><img src="url_imagine" width="16" height="16" class="imgizqda" />aici vine textul</marquee>

Scroll text pe verticala:
Pentru Webmasters

<marquee direction="up" height="50">Pentru Webmasters</marquee>

Pentru Webmasters

<marquee direction="down" height="50">Pentru Webmasters</marquee>

Statie universala de incarcare 4 + 2 USB

Incarcatorul universal poate incarca pana la 6 dispozitive simultan. 4 sloturi interschimbabile pot fi echipate cu adaptoarele incluse pe panoul special de incarcare. In plus, dispozitivul este prevazut cu 2 porturi USB pe partea laterala, unde pot incarcate orice tipuri de dispozitive cu interfata USB. Datorita designului elegant si a culorii negru-pian, incarcatorul se integreaza perfect atat la birou cat si acasa.

<marquee behavior="scroll" scrollamount=1 direction="up" height="140">TITLU</p>
<p>Spatiu pentru descriere</p>
<p><a href="url_link" target="_blank"><img src="url_imagine" alt="logo señal" width="167" height="142" class="imgcen" /></a></marquee>

Read More

Deplasare de text (MARQUEE)

Cu ajutorul etichetei <MARQUEE> </MARQUEE> se obtine un marquee unde continutul se deplaseaza. Ocupa toata latimea ecranului,are o inaltime fixa si textul de deplaseaza de la dreapta la stanga.
Acesta este un exemplu de textx ce se deplaseaza de la Dreapta la Stanga

---

Atributele WIDHT si HEIGHT permite controlar latimea si inaltimea etichetei marquee exprimate în pixeli sau procente. Atributul ALIGN permite alinierea textului folosind valorile: top (sus), middle (centru), bottom (jos).

<marquee width="50%" height="60" align="bottom">
... aici textul ...
</marquee>

exemplu de marque cu text aliniat jos

... aici textul ...

---

O marquee se poate controla in timpul ce se executa? Da cu ajutorul unor pseudo-butoane cu ajutorul lor reusind sa schimbam directia unui text de los in sus si viceversa.
codul html este urmatorul:

<marquee id="ejemplo" direction="up">
... contenido ...
</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
In Jos
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
In Sus
</a>

rezultatul este urmatorul:

Acasa
Prezentare
Parteneri
Continut Personal
Top Parteneri
Companii-premii + oferte
Distractie/Recreere
Livrare la domiciliu
Amenajare locuinte
Birotica/Papetarie
Instalatii termice
TV-Audio-Video
Servicii medicale
Organizare evenimente


In Jos In Sus

Read More

jQUERY efect deplasare link sau imagine

Cei care folosesc jQuery în blog-uri, pot da un aspect diferit pentru link-uri sau imagini cu Nudging.js efect de miscare subtilă cand trece cursorul pe este ele.

Pentru a folosi acest efect mergem la sablonul de editare HTML si inainte de linia </head> se adauga urmatorul script:

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '45px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '1px' }, 400);
});
});
//]]>
</script>

Daca nu ai folosit pana acum jQuery si doresti sa instalezi acest efect pe blog-ul tau ai nevoie de urmatorul cod pe care il adaugi exact deasupra celui de mai sus:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Salveaza modificarile si acum intr-o postare noua sau intr-un nou gadget html/javascript poti creea un linck sau o imagine cu efect deplasare.

Pentru link text folosim:

<a class="nudge" href="url-enlace">AICI VEZI EFECTUL</a>

Si rezultatul.
AICI VEZI EFECTUL
Acum sa vedem acelas efect cu o imagine, se foloseste urmatoarea linie.

<a href="#"class="nudge"><img src="Url-imagine" /></a>

Si rezultatul:

Se inlocuieste Url-imagine cu url-ul imagini tale.

Read More

Text in miscare

Daca vrei ca blogul tau sa fie mai special si in care doresti sa apara un titlu sau un anunt in miscare poti alege din urmatoarele coduri:

Un titlu pentru bara laterala de blog

<marquee>Un titlu pentru bara latrala de blog</marquee>

Daca doresti sa adaugi si culoare foloseste urmatorul cod;

Rezultatul este acesta

<marquee bgcolor="#EFF707">Rezultatul este acesta</marquee>

Daca vrem sa se opreasca textul cand trecem mausul peste el:

Se opreste textul

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50" behavior="alternate" bgcolor="#4cc417">Se opreste textul</marquee>

Daca dorim sa adaugam si link-uri este posibil folosind urmatorul cod:

Bani pe net Bijuteri din aur si argint Investitii rentabile

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

In final poti personaliza fiecare cod dupa imaginatia ta. Sper sa iti placa.

Read More