Jak wykonać aktywny przycisk czytaj więcej + odpowiedzi na pytania

16.12.2014

Tak naprawdę jest to bardzo proste do zrobienia i wielkiej filozofii w tym nie ma. Taki aktywny buton "czytaj więcej" możemy wykonać za pomocą kodów CSS. Pokażę wam dwa kody i różne opcje jak taki buton można dostosować do własnych potrzeb.
Pierwsze co należy zrobić aby taki buton posiadać to oczywiście zastosować na swoim blogu zwijanie tekstu. Taką możliwość mamy podczas tworzenia postu. Opcja ta znajduje się obok ikonki,która umożliwia nam wstawianie filmów.



Trzeba pamiętać aby kliknąć w tą ikonkę po fragmencie tekstu,który ma się wyświetlać jako nasz wstęp,oczywiście można tą opcje zastosować po głównym zdjęciu,które wstawiliśmy na początku wtedy pojawiać nam się będzie tylko pierwsze zdjęcie i buton,który zaprowadzi nas do wpisu.

Jak widać po wybraniu opcji zwijania tekstu pojawia nam się szara kreska,która pokazuje nam,w którym miejscu oddzieliliśmy nasz tekst i która jego część będzie widniała na stronie głównej.
Nasz buton obecnie jest mały i słabo widoczny,ale dzięki temu tutorialowi zmienimy to. Zaczynamy.

Jeśli nie chcesz posiadać aktywnego butony (który się zmienia po najechaniu myszką) omiń punkt II.

I. Najpierw zajmiemy się kodem,który odpowiada za wygląd "czytaj więcej" przed najechaniem na niego myszką.

1. Nasz buton znajduje się obecnie po lewej stronie,ale co zrobić aby znajdował się po środku lub po prawej stronie? Należy wpisać ten kod:

.jump-link a, #blog-pager-post a {text-align: center; } lub .jump-link a, #blog-pager-post a {text-align: right; }

Nasz odnośnik do wpisu został ustawiony.

2. W tym punkcie zmienimy wielkość i rodzaj czcionki "czytaj więcej" za pomocą tego kodu:

.jump-link a, #blog-pager-post a {font: normal 30px Times New Roman;} 

 pogrubienie to są wartości zmienne,pierwsza to wielkość czcionki,a druga to rodzaj,można się tu pobawić i dopasować wedle uznania.

3. Teraz dodajmy "efekty specjalne" takie jak: tło,marginesy,zaokrąglenia,ramka,kolor linku.

A. Kod odpowiadający za tło naszego butonu: (pamiętamy o tym,że wartości pogrubione to wartości zmienne)

.jump-link a, #blog-pager-post a {background-color: #f8ecf3;} 
lub
.jump-link a, #blog-pager-post a {background-image: url(adres do obrazka);}

B. Marginesy:

.jump-link a, #blog-pager-post a {margin: 0px 265px 0px 265px;}

Pierwsza wartość to margines górny,odpowiada on za odległość między tekstem/zdjęciem,a buttonem.
Druga wartość to margines prawy,dzięki niemu możemy ustawić długość naszego butonu.
Trzecia wartość to margines dolny,odpowiada za odległość między tym co znajduje się pod butonem.
Czwarta wartość to margines lewy i ma takie samo zastosowanie jak margines prawy

C. Zaokrąglenia:

.jump-link a, #blog-pager-post a {border-radius: 10px 10px 10px 10px;}

Pierwsza wartość odpowiada za górny lewy róg
Druga wartość odpowiada za górny prawy róg
Trzecia wartość odpowiada za dolny prawy róg
Czwarta wartość odpowiada za dolny lewy róg

D. Ramka:
Rodzaje ramek: solid - linia ciągła, double - linia podwójna, dashed- linia kreskowana, dotted - linia kropkowana 

.jump-link a, #blog-pager-post a {border-style: solid;}

Grubość ramki:

.jump-link a, #blog-pager-post a {border-width: 1px;}

Kolor ramki:

.jump-link a, #blog-pager-post a {border-color: #cccccc;}

E. Kolor linku:
Aby kolor linku zmieniał nam się po najechaniu wystarczy w projektancie szablonów wejść w zakładkę linki.


Ważne jest aby kolor linku był inny od koloru linku po wskazaniu kursorem.

II. Aktywna części butonu.

Kody wyglądają tak samo jedyne co musimy dodać przed .jump-link, #blog-pager-post a to :hover,czyli ma to wyglądać tak:

.jump-link a:hover, #blog-pager-post a:hover

Po tym możemy wpisywać wszystkie te opcje co podane w punkcie 3. Pamiętaj jednak,że aby efekt był zamierzony to musisz pozmieniać niektóre wartości,aby różniły się wyglądem od butonu przed najechaniem na niego myszką.
Co możesz zmieniać? kolor tła,ramki,kolor ramek i ich grubość oraz zaokrąglenia.


Teraz nadszedł czas pytań i odpowiedzi. 
Monika z bloga classic&red nominowała mnie do  Liebster Blog Award 2014 i moim zadaniem jest odpowiedzieć publicznie na zadane przez nią pytania,które umieściła na swoim blogu i nominować kolejne osoby. Nominować nikogo nie będę,bo zupełnie nie mam pomysłu na pytania. 

1. W jaki sposób najchętniej wypoczywasz? 
- Najchętniej wypoczywam w stajni,spędzam tam każdą wolną chwilę.
2. Wymarzone miejsce na wakacje? 
- Raczej trzymam się zasady,że nie ważne gdzie,ważne z kim. Jak ma się odpowiednie osoby wokół siebie to każde miejsce staje się tym wymarzonym. 
3. Ulubiony deser? 
- Koktajl owocowy 
4. Jak według Ciebie powinna wyglądać idealna randka?
- Spacer po parku
5. Ufasz bardziej lekom z apteki,czy naturalnym środkom z Twojej kuchni? Weź pod uwagę działanie i ewentualne skutki uboczne.
- Zdecydowanie lekom. Jestem alergikiem i naturalne środki mogłyby mi zaszkodzi niż pomóc. 
6. Jaka jest dla Ciebie najważniejsza cecha u mężczyzn? 
- Cierpliwość 
7. Kot czy pies? 
- Pies 
8. Jaki film mi polecasz? 
- Na pewno być może 
9. Najzabawniejsza sytuacja,która Cię spotkała? 
- Pozostawię to dla siebie :) 
10. Ulubiona piosenka? 
- Nie mam ulubionej piosenki. 
11. Jaki jest twój kosmetyczny ulubieniec? 
- Oliwkowy balsam do ust z Ziaji 

Aktualizacja 11.02.2015

9 komentarzy:

  1. Super pomysł na post , przydatne info :-)
    Obserwuje i licze na to samo:

    http://nataliazarzycka.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli zaobserwowałaś bloga tylko po to bo liczysz na obserwacje z mojej strony to niestety muszę Cię zmartwić. Nie bawię się w żadne obs za obs.

      Usuń
  2. Ja mam taki przycisk ale niestety ustawiany przez HTLM i teraz mam problem jak go usunąć :/
    blog ->klik

    OdpowiedzUsuń
    Odpowiedzi
    1. Powiem szczerze,że nigdzie w kodzie go nie widzę,więc ciężko mi jest cokolwiek poradzić

      Usuń
  3. znów interesujący post, może zostaniesz informatykiem?:) odpowiedzi też fajne, również lubię firmę ziaja, ale tego balsamu nie próbowałam, zwrócę na niego uwagę:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie,nie,nie informatyka to jednak nie dla mnie :)

      Usuń
  4. Bardzo fajny pomysł ,nie wiem działam jak to się robi ,ale teraz już wiem .
    Dziękuję ;*
    http://rakonaopisuje.blogspot.com/

    OdpowiedzUsuń
  5. oo, dziękuje za instrukcję, moze mi sie kiedys przyda:) A co do poprzedniego wpisu:
    Fajnie przeczytać coś od takiej osoby jak Ty, z Twojego, świeżego punktu widzenia. Przede mną właśnie stoi ta nieszczęsna decyzja o szkole ponadgimnazjalnej. W sumie to musze przyznać, że cały czas miałam jakieś takie dziwne przekonanie, że pójscie do technikum to pojscie na łatwizne i,tak jak wspomniałaś, że liceum ma wiecej prestiżu. Jakby nie bylo- nie mam zadnych znajomych w technikum a cała ta opinia jest bardziej zdaniem otoczenia niż moim.. :) Teraz trochę inaczej na to patrze. Ja jednak prawdopodobnie pójde do upatrzonego liceum,poniewaz jest w nim wysoki poziom i jestem bardzo zdeterminowana aby dalej sie uczyc. W sumie to lubie nauke Czasem wchodzi z oporem, ale chciałabym w życiu osiagnac wyzsze wykształcenie. Mniej wiecej wiem w którym kierunku powinnam iść- lubie przedmioty takie jak j. angielski, j. polski, wos, geografia, poniewaz jestem typowym umyslem humanistycznym. Aczkolwiek przyniosłaś mi zupełnie inny sposób patrzenia na technikum i skłania mnie to do poczytania trochę o nim w internecie.
    Pozdrowienia, trzymaj się :)
    http://no-more-pressure.blogspot.com

    OdpowiedzUsuń
  6. Nigdzie wcześniej nie spotkałam się z takim pomysłem, także bardzo ciekawie :)
    Też lubię spacery, więc kiedy tylko mogę wyciągam swojego mężczyznę. Filmu nie widziałam i wpisałam już na listę "do obejrzenia" :)

    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

Copyright © Szablon wykonany przez Blonparia