Efekt dla linków w podstronach

04.01.2016


Jakiś czas temu dostałam mnóstwo pytań o to, jak zmieniłam linki w podstronie z instrukcjami blogowymi i graficznymi. Po dłuższym namyśle postanowiłam, że zrobię instrukcję na ten temat i może akurat kogoś to poratuje. Jeśli ktoś nie wie o co konkretnie chodzi, bo nigdy nie zapuścił się zbytnio w zakamarki mojego bloga to poniżej macie demo:

Skoro już wiemy jak to się wszystko prezentuje, to teraz czas na instrukcje. Od razu mówię, że nic nie będziemy musieli kombinować z kodem szablonu, a wszystko odbędzie się za pomocą kodu HTML, który wkleimy w edytor wpisu oraz kodu CSS, który wkleimy w kreator szablonu.
Musimy również pamiętać o tym, że jeśli chcemy nasze linki wyróżnić, to za każdym razem w edytorze wpisu - zakładka HTML, będziemy musieli wklejać kod, ale to o tym za chwilę.

1. Wybieramy posty lub strony, następnie wybieramy nowy post/strona lub edytujemy istniejący już post/stronę.


2. Kiedy już się znajdziemy w edytorze wpisu, wybieramy zakładkę HTML



3. Po przejściu w tryb HTML, nasza strona powinna prezentować się mniej więcej tak:



Oczywiście, jeśli będzie to nowa strona, to w zakładce HTML będzie pusto, więc proszę nie panikować, tak jak to miało miejsce przy jednej instrukcji :)

Jeśli mamy jakiś tekst lub zdjęcie w podstronie, to po < br /> wklejamy poniższy kod:
<div class="plinks">
<div style="text-align: left;">
<a href="LINK DO STRONY">TEKST LINKU</a>
<a href="LINK DO STRONY">TEKST LINKU</a>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div>

Powyższy kod daje nam możliwość umieszczenia dwóch linków. Jednak jeśli chcemy dodać ich więcej to po ostatnim </a>, a przed pierwszym </div> wstawiamy:

<a href="LINK DO STRONY">TEKST LINKU</a>

Tą część kodu <a href="LINK DO STRONY">TEKST LINKU</a> musimy wklejać za każdym razem, kiedy chcemy wstawić nowy link do danej listy. Jeśli jednak chcemy mieć listę w innym miejscu musimy znowu posłużyć się tym kodem:
<div class="plinks">
<div style="text-align: left;">
<a href="LINK DO STRONY">TEKST LINKU</a>
<a href="LINK DO STRONY">TEKST LINKU</a>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div>

I kolejne linki dodajemy tak samo jak powyżej to opisałam. Jeśli chcemy mieć tylko jeden link wyróżniony, no to oczywiście musimy usunąć z powyższego kodu jedną linijkę kodu. Tą linijką kodu do usunięcia jest:

<a href="LINK DO STRONY">TEKST LINKU</a>

Na koniec nasze linki po przejściu do zakładki nowy post, będą prezentować się tak:



Tak to ma wyglądać, nasze linki dopiero nabiorą wyglądu po dodaniu kodu CSS, jednak w edytorze wpisu wyglądają cały czas tak jak na powyższym zdjęciu.

4. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS


W arkuszu CSS wklejamy poniższy kod:

.plinks a:link, .tutlink a:visited { color:#fff; display:block; margin-bottom:2px; background:#f4cccc; font-size:14px; text-transform:uppercase; font-family:Open Sans; padding:5px; padding-left:14px; letter-spacing:0px; border-left: 8px solid #e06666; border-right: 8px solid #e06666; }
.plinks a:hover {background:#e06666; color: #fff; border-left: 8px solid #f4cccc; border-right: 8px solid #f4cccc;}

Wszystkie pogrubione i kolorowe wartości są zmienne. Analiza kodu:

Kolor czcionki 
Kolor tła
Wielkość czcionki 
Styl tekstu 
Rodzaj czcionki 
Marginesy wewnętrzne 
Odległość miedzy literami 
Lewe obramowanie
Prawe obramowanie
Kolor tła po najechaniu myszą
Kolor czcionki po najechaniu myszą 
Kolor lewego obramowania po najechaniu myszą 
Kolor prawego obramowania po najechaniu myszą

Linki z tym kodem CSS będą prezentować się tak:


Dostałam parę wiadomości, aby dokładniej wszystko wyjaśniać w instrukcjach, bo nie raz macie problem/obawy przed usunięciem danego elementu, tak aby dostosować go pod siebie/"panikujecie", że coś jest nie tak, jak na zrzutach ekranu umieszczonych w instrukcji. W tej starałam się jak mogłam i naprawdę nie wiem jak prościej mogę Wam to wytłumaczyć. Pamiętajcie, że jeśli macie w czymś problem to możecie śmiało napisać, a ja Wam pomogę - zawsze to lepiej napisać do kogoś indywidualnie, rozpisać się w mailu niż rozwiązywać wszystkie problemy w jednym wpisie, gdzie tylko np. może to pomóc 3 osobom. Ja nie gryzę i odpowiadam na wszystkie maile, no chyba, że jakiś mi nie dojdzie, ale jeśli nie odpiszę w ciągu 1 dnia to wyślijcie maila jeszcze raz :) 

7 komentarzy:

  1. Kurcze, to nie takie trudne jak się wydaje! :)

    A ja jeszcze raz dziękuję za ten link :) Zawalczyłam i zwyciężyłam! Mam menu z obrazkami :)

    OdpowiedzUsuń
  2. Nie ma za co ;) Super! Cieszę się, że wszystko się udało ;)

    OdpowiedzUsuń
  3. Super pomysł na linki, a wszystko przejrzyście wyjaśnione, więc nie masz się o co martwić - na pewno wiele osób zrozumie :)

    OdpowiedzUsuń
  4. Instrukcja bardzo przejrzysta. Na pewno skorzystam, bo już jakiś czas temu próbowałam zrobić podobne linki, ale mi nie wychodziło.

    OdpowiedzUsuń
  5. Super efekt! Fajnie, że pomagasz w tej kwestii innym :)

    OdpowiedzUsuń
  6. MEGA! Bardzo przydatny wpis! :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona