Szukaj na tym blogu

16 sty 2016

Kody Css

Dzisiaj postanowiłam zrobić dla Was post z kodami Css.



Wybieramy bloga, klikamy z prawej strony Szablon, a następnie Dostosuj.




Klikamy Zaawansowane a następnie Dodaj arkusz Css. Nasze kody będziemy wklejać w puste białe miejsce.

WAŻNE!!!
Po wklejeniu kodu naciskamy spację/enter aby kod zadziałał.
Dokładnie sprawdźcie czy skopiowaliście cały kod. Brak choćby kropki na początku sprawi, że kod nie zadziała.
Niektóre kody mogą nie zadziałać na niestandardowych szablonach pobranych z internetu. 

MOJA RADA:
Oddzielaj wszystkie kody które wkleisz 2-3 Enterami, ponieważ gdy będziesz chciał usunąć któryś z nic będzie ci go łatwiej znaleźć.



Kody:

Karty [menu]



kolor tła kart

.tabs-outer {background-color: KOLOR;} 


    margines kart (górny, prawy, dolny, lewy)
.tabs-outer {margin: 10px 20px 30px 40px;}       



rozsunięcie przycisków kart

.tabs-inner .widget li a {margin: 15px;}     
          
     Odstępy pomiędzy linkami kart

.tabs-outer .widget li a {margin: 8px;}

         

               wysokość belki z kartami               

                                                      .tabs-outer {top: 18px;}                                                         




Linki




Rozsunięcie się liter linku po najechaniu kursorem

a:hover { letter-spacing: 2px; } 


Rozsunięcie się wyrazów linku po najechaniu kursorem
a:hover { word-spacing: 4px; }
      
   Pojawienie się cienia za linkiem po najechaniu kursorem
a:hover  {text-shadow: 5px 5px 2px KOLOR; }

Litery linku stają się duże po najechaniu kursorem
a:hover {font-variant: small-caps;}  
      
Pojawienie się ramki o danym kolorze wokół linku po najechaniu kursorem
a:hover{outline-color: KOLOR;}       
     
Rodzaj ramki która pojawi się wokół linku po najechaniu kursorem
a:hover{outline-style: RAMKA;}             




Wyśrodkowanie:

Tytułu posta:
h3.post-title, .comments h4 {text-align: center;} 

Daty:
 h2.date-header {text-align: center;} 

Gadżetów w środkowej kolumnie:
.column-center-inner {text-align: center; }

Gadżetów w lewej kolumnie:
.column-left-inner {text-align: center; }

Gadżetów w prawej kolumnie:
.column-right-inner {text-align: center; } 


Komentarze:



Margines komentarza

.comment p {padding: 10px;}

   

Styl ramki wokół komentarza

.comment p {border-style: RAMKA;}



Okrągłe awatary w komentarzach

(wszystkie wartości muszą być takie same)

.avatar-image-container {
-moz-border-radius: 30px !important;
-webkit-border-radius: 30px !important;
-goog-ms-border-radius: 30px !important;
border-radius: 30px !important;
}             
Styl ramki wokół awatara.
.avatar-image-container {border-style: RAMKA;}   
       
Grubość ramki wokół awatara.
.avatar-image-container {border-width: 3px;} 





Cyfry zaznaczone kolorem niebieskim możecie zmieniać według potrzeb.
W miejsce słów zaznaczonych kolorem różowym, wklejamy:


Chcecie więcej takich postów?




10 komentarzy:

  1. bardzo fajne kody, ja korzystam z gotowego szablonu :)
    http://strawandberry-domola.blogspot.com/ zaprzaszam do siebie! :)

    OdpowiedzUsuń
  2. Bardzo przydatny post ;)
    http://ibaginska.blogspot.com/

    OdpowiedzUsuń
  3. Na pewno mi się przydadzą, dziękuję :)
    Zapraszam do mnie!

    OdpowiedzUsuń
  4. Przydatne kody ;D

    rilseee.blogspot.com

    OdpowiedzUsuń
  5. Dzięki za kody :D ja nigdy w tym dobra nie byłam. Zapraszam do siebie
    Cheery-friendly-girl.blogspot.com

    OdpowiedzUsuń
  6. Post bardzo przydatny dla osób, którzy zaczynają swoją przygodę z wyglądem swojego bloga:)
    Pozdrawiam,
    zapraszam: http://millie-milllie.blogspot.com/

    OdpowiedzUsuń
  7. Pewnym osobom na pewno się przyda :D
    http://maaddami.blogspot.com/

    OdpowiedzUsuń
  8. Jak zwykle ludzie zapominają napisać, że takie kody mogą nie działać na niestandardowych szablonach z neta. Każdy autor ma swój własny sposób zapisywania.

    Mój blog | Mój fanpage | ROZDANIE: zegarek

    OdpowiedzUsuń
    Odpowiedzi
    1. Pierwszy raz o tym słyszę. Dziękuję za informację. Dopiszę to.

      Usuń
  9. Kocham cię! Przekopałam dziesiątki szabloniarni - zarówno polskich, jak i angielskich - ale u ciebie wreszcie znalazłam to, czego tak długo szukałam. Świetny post^^
    kimyuno.blogspot.com

    OdpowiedzUsuń

♥ Nie wymieniam się obs i kom
♥ Niezalogowani użytkownicy również mogą komentować
♥ Weryfikacja obrazkowa wyłączona
♥ Przyjmuje krytykę - byle by była ona uzasadniona