wtorek, kwietnia 29, 2014

WIELOKOLOROWY GADŻET POPULARNE POSTY

popularne posty

Witajcie,


Chciałabym zaprosić Was dzisiaj na kolejne spotkanie z prezentowanymi przeze mnie blogowymi zmianami, które albo sama wprowadziłam albo, które wydają mi się interesujące. Dzisiejszą zmianę sama zastosowałam i możecie spojrzeć na nią w prawej kolumnie bloga. Mowa o wielokolorowym gadżecie "Popularne Posty". Gadżet Jak sama Nazwa wskazuje ma kilka kolorów co wydaje mi się może w fajny sposób rozjaśnić i ubarwić bloga. Dodatkowym interesującym efektem jest obracanie zdjęcia po najechaniu na daną miniaturkę. Rozwiązanie znalazłam na blogu darmowe dodatki na blogi i chciałbym Wam je dzisiaj przedstawić.


  1. W pierwszej kolejności koniecznym jest dodać za pośrednictwem zakładki Układ gadżet Popularne Posty.
  2. Kolejny Krok wymaga wprowadzenia odpowiedniego do sformatowania gadżetu KODU CSS.
Szablon => Dostosuj => Zaawansowane => dodaj arkusz CSS

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +
li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts1 img{-moz-border-radius: 130px;-webkit-border-radius: 130px;border-radius: 130px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;padding:4px;border:1px solid #fff !important;}#PopularPosts1 img:hover {border-radius: 0 0 0 0;-moz-transform: scale(1.2) rotate(-711deg) ;-webkit-transform: scale(1.2) rotate(-711deg) ;-o-transform: scale(1.2) rotate(-711deg) ;-ms-transform: scale(1.2) rotate(-711deg) ;transform: scale(1.2) rotate(-711deg) ;}
 3. Dalej wystarczy tylko zatwierdzić kod ENTEREM i zapisać zmianę za pomocą opcji ZAPISZ .

Nie wiem jednak dlaczego gadżet nie wybiera w niektórych przypadkach pierwszego zdjęcia w poście. Trochę mi to przeszkadza ale chyba przeżyję :)

Efekt jest następujący:



popularne posty
ŹRÓDŁO: BLOTEK
____________________________________________
POZDRAWIAM KATARZYNA

23 komentarze:

  1. Bardzo fajna opcja chociaż taka kolorowa zakładka raczej nie będzie pasować do mojego bloga :).
    Pozdrawiam i zapraszam do mnie ;).

    OdpowiedzUsuń
  2. ekstra! Tylko u Ciebie nie wyświetlają mi się miniaturki zdjęć tak jak w przykładzie. Świetny pomysł myślałam kiedyś jak zrobić takie coś, ale nie wiedziałam jak. Dzięki za tego posta :)

    OdpowiedzUsuń
  3. Bardzo fajnie to wygląda :)
    Pozdrawiam

    OdpowiedzUsuń
  4. Strasznie podoba mi się ten gadżet, jest super!

    OdpowiedzUsuń
  5. sympatyczny ten gadżet,jednak u siebie go nie widzę, nie pasuje :)

    http://lamodalena.blogspot.com/

    OdpowiedzUsuń
  6. Bardzo fajny ten gadżet :)
    Mam prośbę czy możesz mi poklikać w linki tutaj? http://daquerre.blogspot.com/2014/04/co-ubrac-na-komunie-lub-weseledoradzam.html Będę wdzięczna :)

    OdpowiedzUsuń
  7. Fajne, ale nie pasuje do mojego bloga. Może jak kiedyś zmienię szablon to sobie zrobię. :) Zapraszam do mnie.

    OdpowiedzUsuń
  8. Pieknie ! Takiego gadzetu jeszcze nie widziałam u nikogo ! ;)

    OdpowiedzUsuń
  9. Cudowny jest fakt, że są takie osoby jak Ty które dzielą się swoją niesamowitą wiedzą i ogromem informacji żeby pomóc takim beznadziejnym blogowym beztalenciom jak ja :) To co robisz jest zawsze perfekcyjnie dopracowane :)

    OdpowiedzUsuń
  10. Ciekawy pomysł, jest czysto i przejrzyście:)

    pozdrawiam ciepło
    :)

    OdpowiedzUsuń
  11. świetny gadżet jeszcze chyba czegoś takiego nie widziałam na żadnym blogu :)

    OdpowiedzUsuń
  12. trzeba mieć odpowiedni wygląd bloga do takiego gadżetu, ale fajna sprawa :)

    OdpowiedzUsuń
  13. Widziałam już ten gadżet jednak wolę pierwotną wersję :)) ta nie pasuje do mojego wyglądu bloga, za to u Cb fajnie wygląda ;))

    OdpowiedzUsuń
  14. podoba mi się :) ładnie wygląda

    OdpowiedzUsuń
  15. Myślę, że taki kolorowy akcent na minimalistycznym blogu będzie świetnie wyglądał :) Pozdrawiam

    OdpowiedzUsuń
  16. Zastosowałam sobie ten gadżet ;) Bardzo przydatny post ;) Obserwuję, bo zaciekawił mnie Twój blog! :)

    OdpowiedzUsuń
  17. http://theeniczka.blogspot.com/ Zapraszam do mojego małego świata :)

    OdpowiedzUsuń
  18. ciekawy gadżet :)

    OdpowiedzUsuń

Staram się odpowiadać na komentarze bezpośrednio pod postami ;)
Dziękuję za wszystkie komentarze :)
Będzie mi miło jeśli zaobserwujesz - daj znać a się odwdzięczę !