sobota, 19 marca 2016

DBzP#5 Jak znaleźć id gadżetu?


Heii!

To już (a może dopiero) piąty post z serii DBzP. Tym razem pokażę Wam jak w kodzie HTML bloga znaleźć id gadżetu, który jest potrzebny do np. kodu CSS na rozwijany gadżet. Może brzmi to skomplikowanie, ale w rzeczywistości jest bardzo proste.


1.Wchodzimy w 'Szablon', a następnie naciskamy 'Edytuj kod HTML'.


 2. Następnie w kodzie wyszukaj id (szukaj ich przy tych czarnych strzałkach). Moja rada: gadżet, którego id chcesz znaleźć, wstaw na sam dół w 'Układzie' bloga. Dzięki temu szybciej znajdziesz id - wystarczy zjechać suwakiem na sam dół i poszukać odpowiedniej linijki. Id znajdziesz po nazwie gadżetu. Mój ma nazwę 'Popularne posty', a jego id to PopularPosts1 :)



Skoro już wiecie jak znaleźć id, pokażę Wam kod CSS na rozwijany widżet, który będzieice musieli uzupełnić własnymi 'danymi'. 

#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*/

}

W miejscu id wpiszcie odpowiednią nazwę. Cała reszta jest gotowa, ale oczywiście wartości możecie zmieniać :)
(Jeżeli ktoś z Was nie wie, gdzie wkleić gotowy kod - zapraszam tu).

50 komentarzy:

  1. Bardzo przydatny post. Dziękuję :)
    Pozdrawiam.

    OdpowiedzUsuń
  2. Świetny post wymaga wiedzy i ogarnięcia tego ;) Ja już to tyle razy studiowałam ale ja się nie nadaje informatyka tego typu to nie mój świat xddd
    Może wspólna obserwacja ?
    Zapraszam na --> Mój Blog
    Zapraszam także do polubienia mojego --> Fanpage

    OdpowiedzUsuń
  3. BARDZO przydatny post :)
    Czekam na takich więcej!
    http://nikasstyle.blogspot.com/

    OdpowiedzUsuń
  4. Bardzo mi pomogłaś, długo tego szukałam! Dzięki :D
    Pozdrawiam!
    http://wkomenda.blogspot.com/

    OdpowiedzUsuń
  5. oj dobrze że o tym napisałaś!
    dzięki za pomoc i więcej takich postów :)

    OdpowiedzUsuń
  6. Mega przydatny post ^^
    Pozdrawiam wy-stardoll.blogspot.com

    OdpowiedzUsuń
  7. świetny post dla początkujących :)
    http://suburbangirlblog.blogspot.com/

    OdpowiedzUsuń
  8. Bardzo przydatne parady!

    pelnapasji.blogspot.com

    OdpowiedzUsuń
  9. super porady
    każdemu na pewno się przydadzą
    mypinkdreams3.blogspot.com

    OdpowiedzUsuń
  10. Zawsze mam problem z szukaniem ID gadżetu! Bardzo pomocne! :)

    http://justdaaria.blogspot.com/

    OdpowiedzUsuń
  11. na pewno dziewczyna sie przyda :)

    OdpowiedzUsuń
  12. Świetny , przydatny post :)
    nowy post u mnie , zapraszam :)
    karolajn-blog.blogspot.com

    OdpowiedzUsuń
  13. Przydatny post ;D
    http://natalkapk.blogspot.com/

    OdpowiedzUsuń
  14. Fajnie wszystko opisałaś co i jak. :)
    tzanetat.blogspot.com

    OdpowiedzUsuń
  15. Super :)
    Poklikasz w linki ? Odwdzięczam się :)
    http://bedifferent-ania.blogspot.com/2016/03/sheincom.html

    OdpowiedzUsuń
  16. Przydatne pewnie dla wielu osób :)

    Pozdrawiam,Jabłuszkooo :)
    Mój blog-KLIK!

    OdpowiedzUsuń
  17. mega przydatny post i łatwo wytłumaczony!
    http://mey-meyy.blogspot.co.uk/

    OdpowiedzUsuń
  18. Przydatny post :)

    Zapraszam do mnie-----> http://truskaweczkabloguje.blogspot.com :)

    OdpowiedzUsuń
  19. Uwielbiam takie posty :)
    http://malwinabeczek.blogspot.com/

    OdpowiedzUsuń
  20. Bardzo pomocny post, super pomysł ;)
    frydrychmartyna.blogspot.com

    OdpowiedzUsuń
  21. Bardzo fajnie opisuje krok po kroku i pomagasz ! W wolnej chwili zapraszam na mego bloga : http://natikooo.blogspot.com

    OdpowiedzUsuń
  22. Zawsze wydawało mi się to bardziej skomplikowane :D

    matrelsy.blogspot.com

    OdpowiedzUsuń
  23. Przydatny post! Musze skorzystać! :)
    Zapraszam do mnie asiaknebel.blogspot.com :) Będzie mi bardzo miło jak pozostawisz po sobie ślad I zaobserwujesz ja napewno się odwdzięcze! ;)

    OdpowiedzUsuń
  24. Przydatny post! Musze skorzystać! :)
    Zapraszam do mnie asiaknebel.blogspot.com :) Będzie mi bardzo miło jak pozostawisz po sobie ślad I zaobserwujesz ja napewno się odwdzięcze! ;)

    OdpowiedzUsuń
  25. Łooo ja już się tyle naczytałam naoglądalam poradników i nadal nic mi konkretnego nie wychodzi :/
    Ale obserwuję ,bo zaciekawił mnie twój blog ,pozdrawiam i wolnej chwili zapraszam do siebie :)
    /kikawww.blogspot.com

    OdpowiedzUsuń
  26. a ja tyle sie głowiłam nad tym ;) fajny post ;) zapraszam do siebie darkraspberrystyl.blogspot.com

    OdpowiedzUsuń
  27. Lubię takie posty, zawsze mogę się czegoś dowiedzieć, a przy okazji pomagasz innym, którzy średnio znają się na kodach html. Na pewno wrócę, jak będę tego potrzebować! Fajnie, fajnie i oby więcej takich poradników! :D Trzymaj się ciepło! Arleta

    OdpowiedzUsuń
    Odpowiedzi
    1. Następny mam już gotowy i na pewno wkrótce się pojawi :)

      Usuń
  28. No po prostu kocham Cię ! Zawsze się zastanawiałam jak to zrobić ♥

    kill-em-with-kindness.blogspot.com

    OdpowiedzUsuń
  29. Zajmuję się projektowanie wyglądu od dłuższego czasu i to wiedziałam. Ale komuś na pewno się przyda :)
    http://side-of-life.blogspot.com/ - KLIK!

    OdpowiedzUsuń
  30. Na 100% przydatne :d
    http://lone-gunmens.blogspot.com

    OdpowiedzUsuń
  31. Ja chyba nie jestem najlepsza w te sprawy, nigdy mi nic nie wychodzi ;/ A może nie mam cierpliwości do tego. Tak czy siak, takie poradniki zawsze są bardzo przydatne dla innych blogerek ;D

    http://magdalens-blog.blogspot.com/

    OdpowiedzUsuń
  32. Przydatny post! Na pewno niejednej osobie się przyda :p
    mój blog, hooneyyy

    OdpowiedzUsuń
  33. Ja się pogubiłam, to chyba nie moja bajka :))
    nulaamynewblog.blogspot.com

    OdpowiedzUsuń
  34. Genialny post! Śliczne zdjęcia, zostaję na dłużej <3

    Proszę o poklikanie w najnowszym poście, jeśli zostawisz komentarz z cenami to twój blog pojawi się w następnym poście. ♥
    http://oliwia-blogg.blogspot.com/

    OdpowiedzUsuń
  35. pomocny post :)

    http://zyciepiszehistoriee.blogspot.com/

    Pozdrawiam Zuzia ;)

    OdpowiedzUsuń
  36. bardzo pomocny post:) na pewno się komuś przyda x
    Zapraszam na mój blog ♥

    OdpowiedzUsuń
  37. Super! myślę, że wielu osobom się przyda ta informacja
    i z pewnością ją wykorzystają :))

    OdpowiedzUsuń
  38. Bardzo fajny i przydatny post! :D Wesołych Świąt! Miłego dnia!

    Komentarz u mnie = Komentarz u Ciebie
    http://bieganiejestspoko.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.