Jak dodać rozwijany gadżet na bloga?



Wspominałam już o tym nie raz, ale przypomnę gdzie wklejamy kody CSS.
Szablon >> Dostosuj >> Zaawansowane >> Dodaj arkusz CSS  



Jak zrobić rozwijany gadżet?

Jeśli mam już dodany gadżet wystarczy wkleić dosłownie dwa kody do arkuszu CSS.

#IDgadżetu .widget-content { 
height: 0px; overflow: hidden; 
transition: height .7s ease; 
-webkit-transition: height .7s ease; 
-moz-transition: height .7s ease; 
-o-transition: height .7s ease; 
-ms-transition: height .7s ease; }

ID gadżetu - znajdziesz je wchodząc w Układ, następnie przy danym gadżecie wybieramy opcję Edytuj i w linku gadżetu znajdujemy: widgetId=. To co znajduje się po znaku równości to właśnie ID gadżetu. W moim przypadku było to #HTML1.
0px - wysokość tego, co jest widoczne 

Teraz wklejamy drugi kod:

 #IDgadżetu:hover .widget-content { 
height: 50px; }


50px - wysokość całego gadżetu po rozsunięciu


Prawda, że łatwe? :)


Przypominam o konkursie, w którym wygrywa aż 6 osób!


Kliknij, aby zaobserwować bloga!

PODPIS

26 komentarzy:

  1. ciekawa instrukxja

    Zapraszam do mnie : <a href="http://eskucinska.tumblr.com/>Klik Klik Klik</a>

    OdpowiedzUsuń
  2. przyda się ;-) http://nieidealnaaa4.blogspot.com

    OdpowiedzUsuń
  3. Bardzo przydatny post! Kiedyś skorzystam!

    OdpowiedzUsuń
  4. Przydatny post ;)
    Przyda mi się :*

    Pozdrawiam
    emkablogerka.blogspot.com

    OdpowiedzUsuń
  5. O, bardzo przydatny post! Może kiedyś będę robił modernizację bloga, to wtedy skorzystam :D

    OdpowiedzUsuń
  6. Bardzo przydatny blog! Nie miałam pojęcia jak takie coś zrobić :) Z chęcią zostanę tu dłużej:)

    Pozdrawiamy, double-dreamers :)

    OdpowiedzUsuń
  7. SPADŁAŚ MI Z NIEBA !
    www.mala-sue.blogspot.com

    OdpowiedzUsuń
  8. Dziękuję za ten poradnik!
    Dobrej Nocy!
    http://fridayp.blogspot.com/

    OdpowiedzUsuń
  9. Masz śliczny wygląd bloga, i piszesz posty, które są bardzo przydatne. Oby tak dalej!

    OdpowiedzUsuń
  10. Ta instrukcja na pewno się komuś przyda!
    http://friendly-unicorn.blogspot.com/

    OdpowiedzUsuń
  11. Mam zamiar zrobić na swoim blogu takie archiwum :D

    adgam.blogspot.com

    OdpowiedzUsuń
  12. bardzo dziękuje za porade !bardzo masz ładny wygląd bloga !
    Może wspólna obserwacja ? Daj znać u mnie justperfectfashion.blogspot.com

    OdpowiedzUsuń
  13. Bardzo fajny post! <3
    Zapraszam do mnie i mojej koleżanki dopiero zaczynamy!
    martiandroxi.blogspot.com

    OdpowiedzUsuń
  14. Bardzo przydatne :D http://0hopeinmylife.blogspot.com/

    OdpowiedzUsuń
  15. Bardzo przydatny post. W wolnym czasie spróbuję tego :). Masz super design *.*

    http://girl-with-dreeams.blogspot.com/

    OdpowiedzUsuń
  16. Bardzo przydatny post! Fajny blog i śliczny design :)


    Zapraszam do siebie :)

    Poklikasz ? Bardzo proszę do dla mnie ważne a dal ciebie to tylko kilka kliknięć :*

    http://moda-naszym-swiatem.blogspot.com/2015/10/wspopraca-z-choies-probny-post.html

    OdpowiedzUsuń
  17. Przydatna instrukcja, gdyż ja nie mam pojęcia o co chodzi w tych kodach xD
    obserwuję, liczę na rewanż :>

    www.zakazanyx.blogspot.com

    OdpowiedzUsuń
  18. świetny przydatny post :) sama skorzystam..... evelciovelove.blogspot.com

    OdpowiedzUsuń
  19. To jes widget do "czytaj dalej"? :)
    http://marmurka-blog.blogspot.com/

    OdpowiedzUsuń
  20. Bardzo przydatny post :))

    http://milkamikam.blogspot.com/

    OdpowiedzUsuń
  21. uwielbiam takie poradniki, są bardzo przydatne! :)
    http://paaullina-blog.blogspot.com

    OdpowiedzUsuń

Nie reklamuj się na moim blogu.
Wysil się trochę i napisz coś więcej niż 'Fajny blog'.
Jeśli spodobał ci się mój blog - zaobserwuj.