Tutorial Blogger: Cum adăugăm efecte hover?

2 comentarii
Ca și în versiunea precedentă, am continuat să folosesc anumite efecte pentru unele butoane statice. De data aceasta nu am abuzat așa de mult de aceste efecte hover. Am pus doar pentru butoanele "Concurs", "Guest Post" și "Web 2.0 BETA". Dacă și tu dorești să implementezi pe blogul tău câteva efecte hover, urmărește cu atenție pașii din tutorial, iar dacă nu te descurci, aștept întrebările tale în secțiunea de comentarii. Parcă-i mai atractiv blogul atunci când ai pe butoane anumite efecte hover, așa-i?


Ce înseamnă să aplici un efect hover? Simplu. Atunci când ajungi cu mouse-ul deasupra unui buton, el va genera automat un efect. Ca să înțelegi mai bine, ma jos aveți un buton cu efect hover. Puneți mouse-ul peste buton, iar acesta va genera automat un efect hover de tip "pop".


Cum am făcut? Foarte simplu. Am adăugat în fișierul .xml un script în care se află o bază de date cu aceste efecte hover, iar după am adăugat un atribut "class" butonului.

  • Pasul 1: Accesează panoul de control din Blogger
  • Pasul 2: Accesează fișierul .xml (Șablon -> Editează HTML)
  • Pasul 3: Între tagurile <head> și </head>, adaugă scriptul de mai jos. 
<link href='https://dl.dropboxusercontent.com/s/sio5gpl0tk4eheg/efecte-hover.css' media='all' rel='stylesheet'/>
  • Pasul 4: Alege un buton, iar după adaugă-i un atribut de tip "class". 

Link fără atribut class: 
  <li><a  href='http://gandimrational.blogspot.com/p/regulament.html' rel='dofollow'>Regulament</a></li>
Link cu atribut class: 
<li><a class='pop' href='http://gandimrational.blogspot.com/p/regulament.html' rel='dofollow'>Regulament</a></li>

Odată ce ai adăugat atributul class și tipul de hover dorit, salvează șablonul și testează efectul. În versiunea precedentă am adăugat un efect hover pentru majoritatea butoanelor din blog. 

Efecte hover

Nu trebuie neapărat să adaugi doar efectul "pop", mai jos poți accesa o bază de date cu o grămadă de efecte hover. Spre exemplu, pot alege efectul "buzz". Aleg butonul pe care doresc să adaug efectul hover și adaug atributul class urmat de numele efectului.

<li><a class='buzz' href='http://gandimrational.blogspot.com/p/regulament.html' rel='dofollow'>Regulament</a></li>

Click aici pentru a accesa baza de date cu efecte hover.

2 comentarii :

  1. Butonul de tip POP nu merge.
    Incearca cu javascript onmouseover

    RăspundețiȘtergere
    Răspunsuri
    1. Salut Claudiu,

      Încearcă pagina de home. Eu am scriptul pus și funcționează. Nu înțeleg de ce în alte pagini e cam absent.

      Ștergere