poniedziałek, 4 lipca 2016

DBzP#7 Jak zrobić rozwijane archiwum?

Heii!

W tym poście pokażę Wam jak zrobić rozwijane archiwum na bloga, ale zanim do tego przejdę, chciałabym przypomnieć Wam o konkursie fotograficznym (klik), który trwa do 15 lipca :) Zapraszam do wzięcia udziału w nim.


1.Na początku wybierzmy lub stwórzmy obrazek z rokiem. Ja swój zrobiłam na zwykłym paint'cie.


Ta grafika pochodzi akurat z roku 2015 ;)

2.Wchodzimy w układ bloga i dodajemy nowy gadżet. Wybieramy 'Java Script/HTML', gdzie wpisujemy ten kod:

<img alt="PODPIS" class="centered" src="http://4.bp.blogspot.com/-h7zvM54SfYw/VkM4ejx0S9I/AAAAAAAABqc/rh_EJ_zYem8/s1600/czarny2.bmp" / /><div><a href="http://paulan-official-blog.blogspot.com/2016_01_01_archive.html">styczeń</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_02_01_archive.html">luty</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_03_01_archive.html">marzec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_04_01_archive.html">kwiecień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_05_01_archive.html">maj</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_06_01_archive.html">czerwiec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_07_01_archive.html">lipiec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_08_01_archive.html">sierpień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_09_01_archive.html">wrzesień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_10_01_archive.html">październik</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_11_01_archive.html">listopad</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_12_01_archive.html">grudzień</a></div>

Kolor zielony - w tym miejscu macie wpisać link do grafiki z rokiem
Kolor czerwony - w tym miejscu macie wpisać link do waszego bloga

3.Na blogu pojawia się nowe archiwum, ale jeszcze się nie rozwija. Aby osiągnąć ten efekt, musimy wejść w 'Szablon' ---> Ustawienia zaawansowane. Tam wybieramy arkusz CSS i wpisujemy ten kod:


#id .widget-content {
   height: 45px; /*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: 280px; /*wysokość docelowa widżetu*/

}


Kolor różowy - w tym miejscu wpisujemy id gadżetu (czyli archiwum)
W powyższym kodzie możecie też zmieniać wartości, aby pasowały do Waszego szablonu. 

Wszystko zapisujemy i gotowe. Skończone archiwum będzie wyglądać tak jak u mnie na pasku bocznym (oczywiście nasze obrazki będą się różnić).

Posty pomocne przy robieniu archiwum:
Jak znaleźć id gadżetu?

Snapchat - paulanblog
Instagram - paulanblog
Kontakt - paulan.01x@gmail.com (w razie pytań śmiało piszcie :D)

52 komentarze:

  1. Bardzo przydatne!
    Pozdrawiam!
    zubrzycanka.blogspot.com

    OdpowiedzUsuń
  2. Przydatne, niedługo spróbuję :)
    http://nikasstyle.blogspot.com/

    OdpowiedzUsuń
  3. wszystko bardzo fajnie wytłumaczone :D

    OdpowiedzUsuń
  4. Fajnie, że robisz takie posty ;)

    ♥♥♥
    Zapraszam do mnie:
    BY-KAYLA-BLOG.BLOGSPOT.COM-KLIK

    OdpowiedzUsuń
  5. przydatne :)

    by-klaudiaa.blogspot.com

    OdpowiedzUsuń
  6. świetny pomysł, dodaję do zakładek i na pewno z niego skorzystam bo zamierzam zmienić nieco wygląd bloga ;)http://karik-karik.blogspot.com/

    OdpowiedzUsuń
  7. Kurczę! Aż się chyba dzisiaj z tym pobawię, bo chcę urozmaicać w wakacje trochę bloga. Wrócę tutaj, gdy będę na swoim komputerze. :D Więcej takich postów! Arleta

    OdpowiedzUsuń
  8. Bardzo pożyteczny post :)
    ♥♥♥
    Zachęcam do komentowania i obserwowania. Dopiero zaczynam ;)
    mój blog

    OdpowiedzUsuń
  9. post leci do moich zakładek, na pewno sie przyda kiedy będę zmieniała coś w szablonie :)
    pozdrowionka, przy okazji mój snap: victoriasikora
    Mój BLOG

    OdpowiedzUsuń
  10. bardzo ładnie wszystko wytłumaczone :D
    Zapraszam do mnie (odwdzięczam się za każdą obserwację):
    http://nesiness.blogspot.com/

    OdpowiedzUsuń
  11. Przydatny trik :)

    wmymswieciewitam.blogspot.com

    OdpowiedzUsuń
  12. Bardzo fajnie, że napisałaś taki mini poradnik, dla osób, które są początkujące w wyglądach to świetna sprawa uważam!
    http://iam-wiki.blogspot.com/

    OdpowiedzUsuń
  13. Poradnik świetny, ale jak dla mnie designy zawsze zostaną czarną magią :D
    mój blog, hooneyyy

    OdpowiedzUsuń
  14. świetny poradnik:) lubię tego typu posty:p
    mój blog - klik ♥

    OdpowiedzUsuń
  15. Pożyteczny post :)
    okiemyesteny.blogspot.com

    OdpowiedzUsuń
  16. Widzę, że masz taki i wygląda naprawde obiecująco, jednak brakuje mi tego napisu "archiwum" bo przyznam szczerze, że jak głupia szuklałam tego, aż w końcu znalazłam :D
    Generalnie post mega, więc czekam na więcej przydatnych poradników :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję, szykuję już następne posty z tej serii, także na pewno coś się jeszcze pojawi :)

      Usuń
  17. Przydatny post!!
    pozdrawiam, mikrouszkodzenia.blogspot.com

    OdpowiedzUsuń
  18. ciekawy trik, nie wiedziałam o tym, może w chwili natchnienia zrobię sobie podobne archiwum :D super sprawa i bardzo przydatny post :)
    Pozdrawiam cieplutko myszko :*
    ayuna-chan.blogspot.com

    OdpowiedzUsuń
  19. ja akurat z tego nie korzystam ejdnak myślę ,że dobre porady :)
    Obserwuję

    OdpowiedzUsuń
  20. Bardzo przydatny post ^^ Kiedyś z całą pewnością z niego skorzystam ^^
    Pozdrawiam! wy-stardoll.blogspot.com

    OdpowiedzUsuń
  21. Bardzo przydatne!~
    Z chęcią wezmę udział w konkursie o którym pisałaś w poprzednim poście :)
    http://official-natalia-blog.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za zgłoszenie :)
      Wyniki pojawią się około 16 lipca.

      Usuń
  22. Bardzo przydatny post :)

    Pozdrawiam :* scobre.blogspot.com

    OdpowiedzUsuń
  23. Pamiętam jak zaczynałam blogować i wszystko mnie zadziwiało. Te wszystkie kody css, praca w html. Kody css już rozumiem i małymi kroczkami bawię się w informatyka Oliwię, który grzebie w html'u haha! Post mega przydatny!
    Littleredcherrysmile click

    OdpowiedzUsuń
  24. przydatny post :)

    serdecznie pozdrawiam i zapraszam na nowy post! :)
    MÓJ BLOG♥

    OdpowiedzUsuń
  25. Bardzo przydatna notka, pozdrawiam :)

    OdpowiedzUsuń
  26. ciekawy post ;0
    zapraszam https://www.facebook.com/Empty-promises-blog-1122866627746848/ dasz łapkę w górę, bardzo mi zależy ;)

    OdpowiedzUsuń
  27. Bardzo przydatny post. :)
    Lubię takie typ postów.

    zpasjablog.blogspot.com/?m=1

    OdpowiedzUsuń
  28. Fajny post :) Początkującym na pewno się przyda;p
    Mój blog ♥ Serdecznie zapraszam !

    OdpowiedzUsuń
  29. Na pewno post się komuś przyda! :D ♥

    Buziaki, xx zyciedlapasji¦

    OdpowiedzUsuń
  30. hmm... może to zrobię :) Fajna ta seria :D
    https://veronikakarolina.blogspot.com/

    OdpowiedzUsuń
  31. tego typu posty zawsze są potrzebne! Super
    Dyed Blonde

    OdpowiedzUsuń
    Odpowiedzi
    1. Ten komentarz został usunięty przez autora.

      Usuń
  32. Na pewno ktoś skorzysta ;).
    http://modoemi.blogspot.com/

    OdpowiedzUsuń
  33. Świetny post oby takich więcej :)

    Będę wdzięczna za kliki :)
    Mój blog, zapraszam :*
    KONKURS ZAPRASZAM

    OdpowiedzUsuń
  34. Przydany post:) Pozdrawiam,
    https://wrrabii.blogspot.com

    OdpowiedzUsuń

Dziękuję za komentarze ♥♥♥
Hejty i nieuzasadniona krytyka będą usuwane.
Zdjęcia na blogu są moją własnością i są chronione prawami autorskimi zgodnie z art. 1 ust. 2 Ustawy z dnia 4 lutego 1994 r. o prawie autorskim i prawach pokrewnych. Zabraniam kopiowania ich i używania we własnych celach bez mojej zgody.