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

wtorek, 16 grudnia 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

Jeśli spodobał Ci się wpis, przekaż go dalej :)