Jak zmienić wygląd "Popularnych Postów"?

Jak byłam w Koninie ktoś mnie pytał o to jak zrobić, żeby "Popularne Posty" wyglądały jak u mnie. Postanowiłam się z Wami podzielić kodem.

Jak zmienić wygląd "Popularnych Postów"?

Na początku skorzystałam z kodu znalezionego na tej stronie. Dzięki zastosowaniu tego kodu osiągniemy mniej więcej taki efekt jak na zdjęciu poniżej:
wygląd popularnych postów

Jednak to kolorowe tło nie za bardzo pasowało mi do szablonu, więc postanowiłam ten kod nieco zmodyfikować - usunęłam kolory, a szerokości poszczególnych linijek wyrównałam....

jak zmienić wygląd popularnych postów
Kod wygląda następująco:

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 18px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: #000;

}
.sidebar .PopularPosts .widget-content ul{margin-left:px;padding:0px;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:1.0;
}
.sidebar .PopularPosts .widget-content ul li:hover {margin-left:10px;opacity:0.8}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ffffff;width:90%;}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li +li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li +li +li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li +li:after{content:"9"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li +li +li +li{background:#fff;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li +li+ li:after{content:"10"}

.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li:after

{position:absolute;top:15px;right:-5px;;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:5px;margin-top:-10px;margin-left:-5px;background:transparent;;padding-right:26px;width:50px;height:70px}
.sidebar .PopularPosts .widget-content ul li a{font-size:16px;font-weight:normal;color:#555;text-decoration:none;
;padding-right:5px;}
.sidebar .PopularPosts .widget-content ul li a:hover{color:#000;text-decoration:none;}

------

Jak go dodać?
To bardzo proste.

Wejdź w panel bloga - Układ - Projektant Szablonów

jak dodać kod CSS

Następnie wybierz: Zaawansowane - Dodaj arkusz CSS i w tym biały polu wklej podany kod:

jak dodać kod CSS

Na koniec naciśnij Enter i wybierz "Zastosuj do bloga"

Gotowe!

------

W najbliższym czasie chcę dodać jeden darmowy szablon do pobrania? Myślicie, że to dobry pomysł?

Serdecznie dziękuję za wszystkie komentarze - to one najbardziej motywują mnie do pisania.
Jeśli dołączyłaś do obserwatorów daj mi o tym znać, z chęcią odwiedzę Twojego bloga ❤


19 komentarzy:

  1. Zastosowalam podoba mi się:)

    OdpowiedzUsuń
  2. Niestety u mnie nic się nie pojawiło :(
    Zaraz zerknę na tą ankietę.

    OdpowiedzUsuń
  3. wow może i ja u siebie zastosuje:))

    OdpowiedzUsuń
  4. jesteś niesamowita :) dziękuję :)

    jeśli chodzi o szablon to jestem ZA :)

    OdpowiedzUsuń
  5. Oo ja nie mam tego gadżetu, może sobie dodam, a takie ponumerowane popularne posty faktycznie świetnie wyglądają. W ankiecie już kiedyś wzięłam udział, a z darmowego szablonu z pewnością ktoś skorzysta, bo robisz naprawdę świetne szablony :)

    OdpowiedzUsuń
  6. o chyba sobie dodam:D tylko żebym nie zepsuła zaś czegoś:D

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ma możliwości żeby cos popsuc .. ale zawsze na wszelki wypadek można sobie zrobić kopie zapasowa :-)

      Usuń
  7. Nie używam tego gadżetu ,ale fakt wygląda super ! :D
    Ja z chęcią czytam takie wpisy, a i z szablonu nowego bym skorzystała :D

    OdpowiedzUsuń
  8. Co my byśmy bez Ciebie zrobiły? Jesteś nieoceniona! :*

    OdpowiedzUsuń
  9. Jak ja uwielbiam takie posty ! Dziękuję, że uczysz nas udoskonalać swoje blogi :-)

    OdpowiedzUsuń
  10. Bardzo lubię takie blogowe porady, dożo można się nauczyć dzięki kogoś wskazówkom :)

    OdpowiedzUsuń

Jestem wdzięczna za każdy pozostawiony komentarz - to niezwykle motywuje do dalszego pisania!