tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

wtorek, 10 grudnia 2013

Zmiana nazwy linku po najechaniu myszką

Oj nie można być takim zgredem i silić się na powagę za każdym razem, gdy pisze się instrukcje. A więc dzisiaj spokojnie, miło, miejmy nadzieję, że ciekawie i prosto. Przede wszystkim prosto.
Co będziemy dokładnie dzisiaj robić.
Każdy wie, jak zmieniać tło, czcionkę, odległość między literami, obramowanie dla hovera linku. Ale czy ktoś kiedyś próbował zmienić tekst? Jeśli tak, to proszę mnie tu poszczuć kotami i powiedzieć, że za późno na to wpadłam. Chociaż właściwie o tej rzeczy wiem już szmat czasu, po prostu nie starczyło czasu na instrukcję ( jakże krótką instrukcję ).

Efekcik poniżej.


Zabawa, zabawą. Ale co z wykonaniem. Co trudnych nie należy. Na pewno, ale jest czasem nieco upierdliwe i niestety nie zawsze wychodzi. co jest zdecydowanie niefajne. :(

Baza do kodu wygląda tak ( umieszczamy ją tylko i wyłącznie w gadżecie HTML/JavaScript, ponieważ w gadżecie Tekst nie ruszy. ):
<a class='navi' href='http://graphical-thoughts.blogspot.com/><div style="text-align:center;"
     onmouseover="this.innerHTML = 'Eja, lżej!';"
     onmouseout="this.innerHTML = 'Dotknij mnie!';"
>
Dotknij mnie!
</div></a>
  • onmouseover to efekt po najechaniu na link;
  • onmouseout to efekt - powrót do normalności - podczas, gdy myszka nie "dotyka" już linku. 
Wcześniej jeszcze należy ustalić klasę linku. Ja użyłam tej, którą mam moje menu, czyli "navi". Jak zwykle - więcej na ten temat tu.
Ewentualnie krótka przypominajka tutaj.
Wchodzimy w Szablon > Dostosuj > Zaawansowane i dodajemy poniższy kod ( taki kod dodałam ja, możecie go swobodnie zmieniać, tak jak zwykłą klasę linku. )
a.navi:link, a.navi:active, a.navi:visited {display:inline-block; width:110px; background:#b4d4c1; color: #fff; text-align:center; margin-bottom:2px;text-transform:uppercase;
font-family:arial; font-size:7pt;  letter-spacing:0px;  padding:2px;
-webkit-transition-duration: .50s;-moz-transition-duration: .50s } 
a.navi:hover {background:#6e6180; color:#eee; -webkit-transition-duration: .50s;}

Tekst po onmouseover zamieniamy na tekst, który -logiczne- ma się pokazać po najechaniu na niego myszką. U mnie Eja, lżej A tekst niebieski za onmouseout na tekst po zjechaniu myszką ( Dotknij mnie! ). Następnie mamy jeszcze jeden tekst, który najlepiej, aby pokrywał się z onmouseout. ( Dotknij mnie! ) Jest to po prostu nazwa danego linku, nic więcej. 

No cóż spróbujcie sami! 
Tylko jak pisałam, nie zawsze wychodzi. Akurat w poście wyjść nie chciało i się dogadaliśmy. 

13 komentarzy:

  1. Właśnie trafiłam na Twojego bloga i jestem w szoku!
    Jesteś G E N I A L N A
    + dodaje do linków :))

    OdpowiedzUsuń
  2. Pobrałam szablon z notki winter. Byc może wstawię go na brama-snu.blogspot.com

    OdpowiedzUsuń
  3. Pobrałam szablon "I'm so f*cking useless" na jest-motyw.blogspot.com. Jestem jeszcze na etapie grzebania w HTMLu i tak ogólnie w proszku wszystko jest, noale. Coś też przeczuwam, iż wykorzystam również powyższą instrukcję.
    Bardzo dziękuję. c;

    OdpowiedzUsuń
  4. Cześć. Mam pytanie, czy wiesz może, czy można i jak zmienić niestandardowo wygląd napisu "czytaj więcej", gdy ucina się tekst w poście? Byłabym wdzięczna za jakiekolwiek informacje.

    OdpowiedzUsuń
  5. Cześć. Mam spory problem. Otóż pobrałam daaawno ten szablon: http://graphical-thoughts.blogspot.com/2013/08/west-coast-adventure.html

    Posłużę się obrazkiem: http://i43.tinypic.com/23r055g.png

    Mam nadzieję na twoją szybką interwencję :)
    Vero nike

    OdpowiedzUsuń
  6. No niestety, ale nie pomogło :( Zmieniłam na a.menu:hover { background:#bcdaf6;} ,ale efektów brak...

    Kurczę, już naprawdę nie wiem, co robić.
    Vero nike

    OdpowiedzUsuń
  7. Mam! Poradziłam sobie!
    Dziękuję za pomoc :)

    Pozdrawiam!

    OdpowiedzUsuń
  8. Korzystając z okazji - jak zmienić kolor komentarzy i autora przy tytule posta? Ogólnie zmiana kolorów linków.

    Przepraszam, że tak spamuję, ale to również chciałabym zmienić :)
    Vero nike

    OdpowiedzUsuń
  9. Witam:)
    Chciałabym poinformować, że pobrałam przecudny szablon Walking Travesty na http://sonyume-no-monogatari.blogspot.nl/ :)
    Jedyną zmianą jakiej dokonałam w szablonie to ustawienie koloru kursywy:)

    OdpowiedzUsuń
  10. Chciałabym skorzystać z odrobiny wolnego czasu i złożyć CI życzenia. Zdrowych, pogodnych Świąt. Miłości i ciepła rodzinnego oraz pewnej świątecznej refleksji, aury która zmienia pogląd na świat, pomyślności, wytrwałości. Niechaj promień świąt, ta iskra światła zajrzy do Twojego życia.
    Merry Christmas ;))

    Twoja JET

    OdpowiedzUsuń
  11. Pobrałam szablon "Winter" na http://strefa-kosmetyczna.blogspot.com/

    OdpowiedzUsuń