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!