poniedziałek, 18 stycznia 2016

KODY CSS W PIGUŁCE


Sam tytuł już zdradza mnie o tym o czym jest ten post. Mam świadomość tego, że podobne wpisy znalazły się już u wielu bloggerów, jednak mimo to tak naprawdę ciężko było znaleźć wszystko w jednym miejscu, niektórych banalnych rzeczy po prostu szukałam godzinami. Dlatego też postanowiłam zebrać kilka kodów, które mi tak były potrzebne i podzielić się nimi z Wami na moim blogu, z nadzieją, że ktoś, tak jak ja kiedyś odnajdzie tu wskazówki na bloga, których poszukuje. Będą to głównie kody CSS czy html.



mała podpowiedź, gdzie wpisujemy kody CSS, które zobaczycie poniżej.
(szablon -> dostosuj -> zaawansowane -> dodaj arkusz CSS)


Odnośnik do bloga w komentarzu:

Przeglądając komentarze o wiele wygodniej jest nam wchodzić w Wasze blogi, które są podlinkowane, niż kopiowanie tekstu i wklejanie w wyszukiwarkę. Niby niedużo pracy, ale już taka leniwa ludzka natura. :)

Do tego wystarczy nam tylko znajomość kodu html :

                                        
  <a href="ADRES.STRONY.URL">TEKST</a>

Przykładowo :
<a href="http://by-vanys.blogspot.com>KLIK</a>

UWAGA !
Należy pamiętać, że nie wolno wpisywać www, lecz http://


Rozjaśnianie zdjęcia po najechaniu na nie :


.post img { opacity: 1;
transition:opacity 0.4s ease-in-out; 
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out; 
-webkit-transition:opacity 0.4s ease-in-out; 
}
.post img:hover {
opacity: 0.70; 
transition:opacity 0.4s ease-in-out; 
-o-transition:opacity 0.4s ease-in-out; 
-moz-transition:opacity 0.4s ease-in-out; 
-webkit-transition:opacity 0.4s ease-in-out; 
}




data posta w kółku :

.date-header span {width: 60px; height: 60px; border-radius: 100% ;}


kolor daty

.date-header span {background-color:  #ffffff ;}  


ułożeniu tekstu w dacie

.date-header span {text-align: center ;}



 .
Komentarze

.comments h4 {text-shadow: 3px 3px 5px#FFFFFF;}
Cienie w napisie "Komentarz".
.comment p {text-shadow: 3px 3px 5px#FFFFFF; }
Cienie za tekstem w komentarzach. 
.comment p {background: rgba (255,2552550.48);}
Kolor tła w komentarzach plus przezroczystość
.avatar-image-container {border-width: 5px;}
Grubość ramki wokół awatara.
.comment p{box-shadow: 2px 2px 5px#FFFFFF;}
Cień za ramką komentarza.
.comment p{border-radius: 10px 20px 30px40px;}
Zaokrąglone rogi tła pod komentarzem. 
.comment p {padding:10px;}
Margines komentarza.
.comment p {border-width: 5px;}
Grubość ramki komentarza.
.avatar-image-container {
-moz-border-radius:20px !important;
-webkit-border-radius:20px !important;
-goog-ms-border-radius: 20px !important;
border-radius: 20px !important;
}

Okrągłe awatary w komentarzach.
.avatar-image-container { box-shadow: 5px 5px 2px#FFFFFF; }
Cień za awatarem w komentarzach





                                                     Posty

h3.post-title, .comments h4 {text-align: POZYCJA;}
Pozycja nagłówka postu.
h2.date-header {text-align: POZYCJA;}
Pozycja daty.
h3.post-title, .comments {text-shadow: 3px 3px 5px#FFFFFF;}
Cienie pod tytułem postu
h2.date-header {text-shadow: 3px 3px 5px#FFFFFF;}
Cienie pod datą.
.post {text-shadow: 2px2px 5px #FFFFFF; }
Cienie pod tekstem w poście.
.post {background-color: #FFFFFF;}
Kolor tła pod postem.
.post {border-style:RAMKA;}
Styl ramki wokół postów.
.blog-pager { display: none !important;}
Usunięcie linków "Starszy post", "Nowszy post".
.post {box-shadow: 2px2px 5px #FFFFFF;}
Cienie pod ramką tła otaczającą post.
.post {border-width:1px;}
Grubość ramki wokół postów.
.post {padding: 50px;}
Margines posta.

Gadżety

.sidebar .widget { line-height: 5px; }

Ustawienie odległości pomiędzy linijkami w widżetach.



25 komentarzy:

  1. Super, przydatny dla nas post! Zaraz będziemy testować :) Pozdrawiamy❤

    OdpowiedzUsuń
    Odpowiedzi
    1. Niestety nie działa nam ten kod na rozjaśnianie zdjęcia po najechaniu na nie :(

      Usuń
    2. moze nie skopiowalyscie csałosci ? lub wpisalyscie w złym miejscu ? spróbujcie jeszcze raz, bo to jest na pewno dobry kod :)

      Usuń
  2. Przydatny post!! Na pewno skorzystam :)
    Zapraszam:

    http://mademoisellejuliet.blogspot.com/

    OdpowiedzUsuń
  3. Świetny post! Może w przyszłości wykorzystam kody! Pozdrawiam :)

    greenskycalms.blogspot.com

    OdpowiedzUsuń
  4. Bardzo przydatny post :) Na pewno któryś kod wykorzystam ;)
    http://byalex-blog.blogspot.com/

    OdpowiedzUsuń
  5. na pewno sie przyda ;) pozdrawiam

    http://lovely-july-blog.blogspot.com

    OdpowiedzUsuń
  6. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  7. Tego mi było trzeba różnych gadżetów do mojego bloga a u was jest wszystko ładnie i przejrzyście napisane . Zapraszam na mojego bloga http://slendujula.blogspot.com/

    OdpowiedzUsuń
  8. Post bardzo przydatny dla początkujących blogerów :)
    http://paulan-official-blog.blogspot.com/

    OdpowiedzUsuń
  9. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  10. Hej super post, bardzo lubię czytać Twojego bloga, dlatego nominowałam Cię do Liebster Blog Award - wystarczy odpowiedzieć na pytania, które znajdziesz u mnie w najnowszym poście ;*
    zapraszam :*

    OdpowiedzUsuń
  11. Świetny post, bardzo przydatny :)

    Mam prośbę, mogłabyś poklikać u mnie w linki? Byłabym bardzo wdzięczna :)
    http://modishnessblog.blogspot.com/2016/01/dresslink-wishlist.html

    OdpowiedzUsuń
  12. Dziękuję! Bardzo mi pomogłaś z tymi kodami!! Ładny wygląd bloga:) ouurselves.blogspot.com

    OdpowiedzUsuń
  13. Bardzo przydają się takie kody :)


    Kochana klikniesz w linki u mnie na blogu :
    http://rzetelne-recenzje.blogspot.com/2016/01/nowosci-czyli-zamowienia-z.html
    Z góry dziękuję :)

    OdpowiedzUsuń
  14. A ja latałam po całej blogsferze za tymi kodami:D
    Mam prośbę poklikasz w linki w tym poście http://truskawkowyswiat123.blogspot.com/2016/01/wishlist-dresslink.html ?

    OdpowiedzUsuń
  15. Świetny post, przydatne informacje ;)
    Bardzo pomogłaś z tymi kodami

    Sleepy Girl

    OdpowiedzUsuń
  16. Na pewno jest to przydatny post ale podziwiam cię za to poświęcenie czasu bo czasami nie zawsze da się od razu znaleźć to czego szukamy.
    Zapraszam do siebie :) http://dominatt.blogspot.com/

    OdpowiedzUsuń
  17. <a href="http://kllaudus.blogspot.com>klik</a> obserwuje moze i ty zaobserwujesz? super post, bardzo przydatny :)

    OdpowiedzUsuń
  18. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  19. Bardzo przydatny post!Już użyłam jednego kodu do zaokrąglania avatarów w komentarzach!❤️
    MÓJ BLOG ---> KLIK

    OdpowiedzUsuń
  20. Dzięki! na pewno skorzystam z kodów na zdjęcia :)
    ZAPRASZAM DO MNIE http://hellomisskorabel.blogspot.com/

    OdpowiedzUsuń
  21. Na pewno coś się przyda, dzięki! :)

    http://ultrapaulina.blogspot.com/

    OdpowiedzUsuń

Dziękuję za każdy komentarz i obserwacja. To ogromna motywacja do dalszej pracy !