wtorek, października 27, 2015

Jak zrobić rozwijane archiwum?

     Już od jakiegoś czasu w wiadomościach, jakie dostaję przeważa pytanie: Jak zrobić rozwijane archiwum? Coś takiego jak ma Łucja na swoim blogu. Cały proces nie jest skomplikowany, ale ciągłe odpisywanie i tłumaczenie każdemu z osobna może stać się męczące. Dlatego też postanowiłam napisać dokładną instrukcję, by każdy miał łatwy dostęp do tego. Myślę, że paru osobom na pewno się przyda.
Jak zrobić rozwijane archiwum, blogger, blogspot, instrukcja, archiwum


Przygotowanie obrazków i dodanie ich

      Pierwsze od czego zaczynamy to przygotowanie sobie grafiki z rokiem, która będzie widoczna, a po najechaniu na nią rozwinie nam się pozostała część. Wykonać należy tyle obrazków, ile będzie lat w archiwum i zapisać każdy osobno. Ja swoje obrazki wykonuję zawsze w Gimpie. Jeśli nie potraficie z niego korzystać to może to też być darmowy program PhotoScape, bądź jakikolwiek edytor online dostępny w Internecie (np PicMonkey).
     Gdy wszystkie grafiki są gotowe, przechodzimy do Układu i dodajemy je w gadżetach Obraz. Ustawiamy by były po kolei i zapisujemy rozmieszczenie. Należy pamiętać by każdy rok był dodany osobno - inaczej archiwum nie będzie się poprawnie rozwijać. By uniknąć podawania tytułów, w pole za to odpowiedzialne wpiszcie po prostu: </>.

Przygotowanie linków 

      Kolejny krok to przygotowanie podlinkowanych miesięcy. W tym celu przechodzimy do gadżetu Tekst i tak samo jak w przypadku innego archiwum rozpisujemy sobie miesiące, a następnie zamieniamy je w linki. Najlepiej jest robić każdy rok osobno. Gdy miesiące są gotowe przechodzimy do trybu HTML. W prawym górnym rogu klikamy na napis Edytuj kod HTML i kopiujemy wszystko co tam jest.

Gotowe archiwum

      Gdy skopiowaliśmy miesiące przechodzimy do gadżetu Obraz z odpowiednim rokiem, edytujemy i w miejsce Podpis wklejamy. Zapisujemy i powtarzamy ten krok, do momentu aż wszystkie lata będą dodane. Na koniec sprawdzamy czy wszystko się dobrze prezentuje. Jeśli jest ok, to przechodzimy do ostatniego już punktu.

Rozsuwanie/rozwijanie archiwum

      Ostatni krok to ustawienie efektu rozwijania. Korzystać tu będziemy z kodu, który znalazłam kiedyś na Tajemniczym Ogrodzie i nigdy się nie zawiodłam. Na sam początek musimy poznać ID naszych gadżetów z obrazkami i zapamiętać/zapisać je sobie. {Jak poznać ID gadżetów? - klik
Kiedy ID jest znane, przechodzimy do Arkusza CSS {Szablon  → Dostosuj  → Zaawansowane  → Dodaj arkusz CSS} i wklejamy poniższy kod:

#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*/
}
     Zamiast id w obu miejscach wpisujemy nasze ID gadżetu. Do tego ustawiamy sobie obie wysokości. Pierwsza to wysokość tego co będzie widoczne, czyli w naszym wypadku to sam obrazek z rokiem. Natomiast druga jest już wysokością całego gadżetu, czyli obrazek z rokiem + podlinkowane miesiące. Metodą prób i błędów ustawcie sobie wysokości i powtórzcie ten krok do każdego obrazka osobno.

Inne zastosowania rozwijania

     Sposób ten nie musi być wykorzystywany jedynie do archiwum w takiej postaci. Możecie kombinować jak tylko chcecie. Dla przykładu:
- przy ostatnim szablonie stworzyłam archiwum - bez obrazków, te inne z wypisaniem miesięcy i lat. Skróciłam sobie lata, tak że został jedynie bieżący rok, a reszta pojawiała się po rozwinięciu.
- przy jednym ze starszych szablonów na Borenium korzystałam z tego kodu, by skrócić listę linków z pomocą blogową.
- fajnym pomysłem może okazać się ukrycie części opisu pod zdjęciem w kolumnie bocznej czy też ikonek społecznościowych.

     Zwijać możecie w zasadzie każdy gadżet - etykiety, opisy, listy linków, ulubionych blogów, popularnych postów etc. Jedyny czynnik, jaki Was ogranicza, to Wasza kreatywność.


Podsumowując: Mam nadzieję, że instrukcja przyda się komuś. Jeżeli nie pomysł na archiwum to może wymyśli coś nowego i fajnego. Jeśli wpis się przydał to dajcie znać, a nawet pochwalcie się efektem. W razie problemów zawsze możecie pisać, a postaram się szybko pomóc.

Powodzenia i do kolejnego wpisu!


Ten i inne posty techniczne znajdziesz w specjalnej zakładce Blogerowa Pomoc.  




16 komentarzy:

  1. Post na pewno bardzo przydatny i może jak znajdę chwile czasu to go wykorzystam
    Pozdrawiam,Madda
    blog ->klik

    OdpowiedzUsuń
  2. Z pewnością w przyszłości skorzystam z tej instrukcji :) Bardzo fajna sprawa.

    INNA MYŚL [blog] | MÓJ KANAŁ NA YOUTUBE

    OdpowiedzUsuń
  3. Post mi się na pewno przyda. Niedługo właśnie mam zamiar zrobić takie archiwum :)

    all-pastel-world.blogspot.com ••kliknij••

    OdpowiedzUsuń
  4. przydatny post :)
    możliwe, że jak będę chciała coś zmienić w blogu to skorzystam ;)

    OdpowiedzUsuń
  5. nie rozumiem mamy wszystko skopiować z html ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Cały kod HTML z gadżetu, gdzie linkowałaś sobie miesiące. Czy o to chodzi?

      Usuń
    2. Ach już rozumiem :) a co wpisać w pierwszym id a w drugim ?
      Bo na razie mam wpisane w pierwszym id kod id zdjęcia styczeń a w drugim kod id zdjęcia roku 2014

      Usuń
    3. takie coś pisze i nic mi nie wychodzi
      uwaga te w nawiasach nie są napisane naprawdę w kodzie tylko dla lepszego zrozumienia o co mi chodzi.
      I to mój kod
      #Image9 (styczeń).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;
      }

      #Image8(zdj z rokiem) :hover .widget-content {
      height: 70px; /*wysokość docelowa widżetu*/
      }

      #Image10(zdjęcie ,,luty'') .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;
      }

      #Image8(zdjęcie z rokiem) :hover .widget-content {
      height: 70px; /*wysokość docelowa widżetu*/
      }






      itd.
      I jak już chce zobaczyć czy już jest hiper fajnie on się nie rozwija jest tylko
      rok a miesiące są w środku ale nie chcą się rozwinąć pomóż kochana!






      Usuń
  6. Nie, nie. ID gadżetu to ID do obrazka z rokiem. Wpisujesz w oba miejsca to samo. Czyli i w jednym i w drugim będzie ID do gadżetu np z rokiem 2014. Jak zrobisz już 2014 to z kolejnym rokiem robisz to samo. To dotyczy archiwum na zasadzie: obrazek z rokiem, a potem wypisane miesiące. Jak chcesz by i miesiące były obrazkami to troszkę innym sposobem należy to zrobić :)

    OdpowiedzUsuń
  7. Dziękuję za instrukcję, skorzystałem.
    PS Nie wiesz przypadkiem, co trzeba zrobić, żeby post-labels było w tej samej linii (w stopce postu) co post-author i post-timestamp?

    Zapraszam do siebie.

    OdpowiedzUsuń
    Odpowiedzi
    1. Spróbuj w Układzie edytować gadżet Post i na samym dole poustawiać tak jak chcesz. Powinno się udać :)

      Usuń
  8. jak zrobić te linki, zeby wszystkie posty byly w jednym miesiacu.

    (np. jak jest , marzec ' to zeby byl w nim taki link, zeby miescil tam wszystkie posty z marca)

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak jak wspominałam w poście, należy utworzyć sobie link tak jak przy tworzeniu innego archiwum -> klik do instrukcji

      Usuń
  9. Świetna kompozycja z graficznego kreatora scen. Bardzo mi się podoba :)

    OdpowiedzUsuń
  10. bardzo bardzo dziękuję za ten wpis ♥ w końcu mam moje wymarzone archiwum, jesteś wspaniała :*

    OdpowiedzUsuń
  11. Hej : ) Genialna instrukcja, tylko coś mi nie wychodzi :< Zrobiłam wszystko tak jak pisze... a przynajmniej tak sądzę, i gdy najeżdżam na obrazek z rokiem to widać jak ikonka do edycji gadżetów się przesuwa, ale linki nie są schowane pod obrazkiem. Jest coś takiego : http://walentynki11.blogspot.ie
    Wiesz może o co chodzi ?:>

    OdpowiedzUsuń

Komentować może każdy. | Brak weryfikacji obrazkowej.
Komentarze, gdzie będzie przeważał spam będą usuwane.