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

poniedziałek, 28 lipca 2014

Tytuły linków

Dzisiaj będzie o tytułach linków, czyli o rzeczy bardzo prostej, o której jednak wcześniej nic pisane nie było. Ostatnio coś mi się o uszy obiło i postanowiłam, że pomysł jest ciekawy i można się tym nieco pobawić. Ale dzisiaj tylko teoria, praktyka w kolejnym poście. 

Jak wygląda link każdy wie, ale dla przypomnienia:
<a class="nav" href="http://graphical-thoughts.blogspot.com/">Link 1</a>
Elementy:
  • czerwone to klasa linku. O tym już było przy okazji tworzenia bardzo prostego menu. Jest to po prostu pewien "coś", który definiuje nam wygląd linku;
  • zielone to adres url, do którego przenosi nas link;
  • niebieskie to nazwa linku, które nie należy mylić z tytułem.
A więc gdzie w tym wszystkim tytuł? A no tu:
<a title="przenieś" class="nav" href="http://graphical-thoughts.blogspot.com/">Link 1</a>
Link 1 Link 2 Link 3 Link 4
Powyżej podgląd live naszego małego dzieła.
Ten atrybut sprawi, że po najechaniu na link pojawi się tytuł, który wcześniej wpisaliśmy, czyli tutaj "przenieś". Proste? No ba, że proste!

***
To teraz wersja nieco trudniejsza, ale taka, która pozwoli nam na modyfikowanie wyglądu "boxu" ( albo raczej tytułu ), który wyskakuje. Pomysł i wykonanie znalezione tutaj.

A więc zacznijmy podobnie jak w przypadku dwulinijkowego menu:
<a href="#" class="tip">Link 1<span>Jestem taki magiczny!</span></a>
Tutaj naszym tytułem będzie "Jestem taki magiczny", który jest między elementami span.

Link jak link, nic nadzwyczajnego. W dodatku jeszcze jakiś taki nieładny i za długi, mający jakiś "ogonek". 
a.tip {
    border-bottom: 1px solid #ddd;;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
O klasach trochę już wiecie, dlatego tutaj możecie tworzyć klasy linków, jakie tylko Wam się podobają. Mniej wymyśle, bardziej wymyśle - jakie chcecie! Tutaj główine skupimy się na elemencie span tego linku.
a.tip span {display: none}
Po wpisaniu tego kodu tekst "Jestem taki magiczny" zniknie i zostanie nam sama nazwa linku, czyli:

No to dalej, bo przecież ta nasza nazwa musi jakoś wyglądać:
a.tip:hover span {    border: #c0c0c0 1px solid;    padding: 5px 20px 5px 5px;    display: block;    z-index: 100;    letter-spacing:2px;    background:#f0f0f0;    left: 0px;    margin: 10px;    width: 220px;    position: absolute;    top: 10px;    font-family:cambria;    font-style:italic;    color:#F54D70;    text-decoration: none;}
Podkreślone elementy możecie swobodnie zmieniać, nie powodując problemów z wyświetlaniem. Oczywiście możecie dodawać też inne kody, wedle Waszego upodobania! Oto mój efekt:

Pomocne źródła: Link 1, Link 2

24 komentarze:

  1. Bardzo dobrze i zrozumiale napisana instrukcja, dziękuję! Co do samego efektu, jest na prawdę ciekawy i świetnie wygląda. Może kiedyś z czegoś takiego skorzystam :>
    Pozdrowienia z wyimaginowanej poduchy,
    Kaeru

    OdpowiedzUsuń
  2. Kiedyś widziałam coś takiego na tumblrze i tak się zastanawiałam, jak to zrobić, bo wygląda to bardzo ciekawie. Instrukcja świetna, nawet jak rozumiem o co chodzi :D

    OdpowiedzUsuń
  3. A da się tak zrobić ze stronami?

    OdpowiedzUsuń
  4. Pobrałam szablon Hooked up by the fire na http://akinese.blogspot.com/ Znaczy, wcześniej miałam go już ustawionego u siebie i do niego wracam. Tak tylko mówię, by nie było, że zdobyłam go w szemrany sposób bez hasła. I mam wielką prośbę do Tyler - co mam zrobić z Popularnymi postami? ;_; Bo lubię tę zakładkę, a tutaj strasznie rozciągnęła zdjęcia. Jeszcze nic nie grzebałam, bo nawet wątpię czy coś znajdę, więc pytam - umiałabyś to naprawić?
    Pozdrawiam, Niah.

    OdpowiedzUsuń
    Odpowiedzi
    1. Btw. usunęłam .sidebar img {width:205px;margin-left:-2px;} z kodu szablonu i teraz wszystko gra i buczy, ale jeżeli Ci to przeszkadza i znasz inny sposób to pisz, a zmienię.
      Pozdrawiam, Niah.

      Usuń
  5. gumowy miś
    Pobrałam szablon Cosmic Love na bloga bleovedsibuna.blogspot.com. Prosiłabym o przekazanie mi hasła na moje gg: 44632794
    Pozdrawiam.

    OdpowiedzUsuń
  6. Pobrałam szablon THE LIFETIME OF ADVENTURE na http://besweaty.blogspot.com

    bardzo dziekuje <3 wlasnie takiego szukalam!

    OdpowiedzUsuń
  7. Pobrałam szablon http://1.bp.blogspot.com/-5M2izd-NBto/Uz7FHDJpgzI/AAAAAAAABXs/ES4tyvUz9DY/s1600/takemetotheocean.png na http://dwa-w-jednym.blogspot.com/

    OdpowiedzUsuń
  8. Pobrałam szablon http://funkyimg.com/i/Hyr8.png na bloga : http://portret-c.blogspot.com/.
    Jest to blog zamknięty, więc w razie czego proszę o kontakt na e-mail: portret.poplatanej@gmail.com

    OdpowiedzUsuń
  9. gumowy miś
    chciałabym pobrać szablon simply clever, wysyłam maila z prośbą o hasło

    OdpowiedzUsuń
  10. Pobrałem szablon na bloga http://ksiazkowy-chaos.blogspot.com/ :)

    OdpowiedzUsuń
  11. Hej! Pobrałam szablon, dokładnie ten http://graphical-thoughts.blogspot.com/2014/07/the-lifetime-of-adventure.html na swojego bloga dazzlexme.blogspot.com :)

    OdpowiedzUsuń
  12. Pobieram szablon simply clever na szelest-kartki.blogspot.com :)

    OdpowiedzUsuń
  13. Pobrałam szablon THE LIFETIME OF ADVENTURE na http://singing-a-lullaby.blogspot.com/.

    OdpowiedzUsuń
  14. Pobrałam szablon na www.sniezka-musi-umrzec.blogspot.com.

    OdpowiedzUsuń
  15. Proszę o podanie hasła szablonu Cosmic Love. e-mail: inna.samobojczyni@gmail.com
    gumowy miś

    OdpowiedzUsuń
  16. Pobieram szablon na bloga http://polowanie-na-memortka.blogspot.com, jeszcze nie wybrałam który, nazwę podam jak się tylko zdecyduję. :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Na początku pobrałam relive the memory, ale że mi nie pasował, zmieniłam na hooked up by the fire. Dziękuję! c;

      Usuń
  17. Uprowadziłam The Lifetime of adventure na bloga https://k-enjoyment.blogspot.com :)

    OdpowiedzUsuń
  18. Hej. Mam dwa pytania. Pierwsze odnośnie szarych kropek, które pojawiają się nad linkami "Nowsze/Starsze Posty" i jak je zlikwidować. Drugie, trochę bardziej skomplikowane. Mianowicie "popsuła" mi się stopka posta blogach. Nie mogę zmienić kolejności m.in. komentarzy, daty, etykiet czy oceny. Czasami nawet nie mogę usunąć któregoś z nich. Na jednym z blogów wygląda to jeszcze estetycznie, dopóki nie wrzucę "oceny" i każdy element w stopce przeskakuje do osobnej linijki. Tutaj podaj adres bloga: askingloki.blogspot.com, na którym ten problem występuje. Czy jest sposób aby to jakoś naprawić lub zresetować? Z góry dziękuję za odpowiedź i przepraszam, że komentarz nie związany z tematem.

    OdpowiedzUsuń
  19. Odpowiedzi
    1. Ciężko powiedzieć (: Obydwie zaglądamy na GT i zawsze służymy radą w miarę możliwości (przynajmniej w., czyli ja, choć jestem na urlopie). Nie wiem, jak Tyler, ale ja chwilowo mam nieco ważniejsze zobowiązania :)

      Usuń
  20. Gumowy miś, tak mi się zdaje. Proszę o hasło do Cosmic love na hijodelaluna876@gmail.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Ok, więc pobrałam Cosmic love na blogobranie.blogspot.com

      Usuń