sobota, 28 listopada 2015

Poradnik Designu #3 Jak zrobić rozwijany gadżet/archiwum?

Hej!
W dzisiejszym poście pokażę wam jak zrobić rozwijane archiwum lub po prostu gadżet. Zapraszam :)

Zacznijmy od stworzenia grafiki. Ja jak zwykle użyję pic monkey ;) Piszemy na niej co chcemy, w moim przypadku rok.
Następnie w gadżecie tekst lub HTML wypisujemy nazwy miesięcy, albo w kolumnie, albo obok siebie. Musimy je podlinkować. Zaznaczamy dany miesiąc dodajemy taki link:

http://stylizacje-moda-uroda.blogspot.com/2014_01_01_archive.html

W miejscu niebieskiego wklejamy adres naszego bloga, w miejsce zielonego wpisujemy rok, a w miejscu czerwonego wybieramy numer odpowiadający miesiącowi.

W ten sposób uzupełniamy każdy miesiąc.

Następnie wchodzimy w pisanie posta. Wgrywamy zdjęcie i przenosimy się w HTML. Kopiujemy cały link i dodajemy go na górze naszego gadżetu. 

Następnie wchodzimy w szablon>Edytuj kod HTML wyszukujemy (Ctrl + F) następujący fragment:

<b:widget id=


Dokładnie przeszukujemy. Najlepiej jak swój gadżet jakoś nazwiemy, wtedy łatwiej będzie nam go znaleźć. Jeśli to już zrobimy kopiujemy lub zapamiętujemy początek tzn. HTML1 (2, 3...) lub Tekst1 (2, 3...) Wychodzimy z kodu. Teraz wchodzimy w szablon>dostosuj>zaawansowane>dodaj arkusz CSS. 

#id .widget-content
{
height: 0px; /*schowanie widżetu*/
overflow: hidden;
transition: height .7s ease; /*animacja*/
-webkit-transition: height .7s ease;
-moz-transition: height .7s ease;
-o-transition: height .7s ease;
-ms-transition: height .7s ease;
}
#id:hover .widget-content
{
height: 50px; /*wysokość docelowa widżetu*/





Powyższy kod wklejamy w nasze pole. Na czerwono zaznaczone jest miejsce które zamieniamy naszym kodem. Na niebiesko jest zaznaczony czas wysuwania im mniejszy tym szybciej będzie się wysuwał.  Na różowo zaznaczony jest styl. Można go zmienić na takie:
  • linear - szybkość rozwijania jest stała;
  • ease - widżet wystartuje powoli, potem przyspieszy, a na końcu zwolni;
  • ease-in - powolny start
  • ease-out - hamowanie na końcu;
  • ease-in-out - powolne hamowanie i start.
Wszystkie liczny możemy dostosować. Dłuższa część jest stała, a ta krótsza wysuwana.

Można też zamiast tekstu lub HTML wgrać zdjęcie jako obraz, a miesiące dodać do podpisu ;)

Mam nadzieję, że zrozumieliście ;) Jeśli macie jakieś pytania z chęcią odpowiem w komentarzach. Na kolejny post zapraszam już w piątek, tymczasem zapraszam was do komentowania i obserwowania przez kliknięcie TU :) Do następnego!

11 komentarzy:

  1. Beautiful photos and I love love love your style of writing! Keep it up!

    PS: Follow for follow? I always follow back! Just let me know!

    OsydneysleekO

    OdpowiedzUsuń
  2. przeczytałam ten post kilka razy i nadal nic nie rozumiem :)
    jestem-wredna-i-dobrze-mi-z tym.blogspot.com

    OdpowiedzUsuń
  3. Mam takie archiwum u siebie, ale robione inaczej :)
    http://paulan-official-blog.blogspot.com/

    OdpowiedzUsuń
  4. Kocham takie posty! Bardzo mi ułatwiają upiększania bloga :3
    Zapraszam - klik!

    OdpowiedzUsuń
  5. Raczej na razie mi sie nie przyda, ale może keidys skorzystam.
    Masz śliczny blog! *-*

    Mój blog!

    OdpowiedzUsuń
  6. To chyba bardzo dobra informacja, ale ja nic nie rozumiem :D Pokażę to mężowi, on się zajmuje tym na blogu :)

    OdpowiedzUsuń
  7. Jak zawsze świetny post. :D
    Pozdrawiam i Zapraszam. :)
    MY PINK GLASSES - klik!

    OdpowiedzUsuń
  8. świetny post, napewno wielu osobom się przyda ;* pozdrawiamy i zapraszamy do nas, będzie nam bardzo miło ;)
    dreamoutloud.f

    OdpowiedzUsuń

♥Dziękuję za każdy komentarz!♥
♥Najbardziej cieszą mnie takie po których wiem, że przeczytałaś post.♥
♥Zostawiaj wartościowe komentarze!♥
♥Nie musisz zostawiać linków, bez tego też trafię na Twój blog!♥
♥Spam i hejty są usuwane.♥