17 lipca 2015

Poradnik dla początkujących

Hej! Miałam w planach napisać wczoraj całkowicie inny post, niestety nie wyszło ze zdjęciami. Nie mam zamiaru zasypywać Was kolejnymi zdjęciami z wiejskiego podwórka, więc przygotowałam mały poradnik o kodach css. Więcej takich poradników możecie znaleźć w nowej zakładce w górnym menu pt. "Design DIY". Wszystko jest krok po kroku wytłumaczone i co chwilę dodaję nowości. Jeśli jednak byłyby jakieś pytania, piszcie na maila!
Kodami css i html zajęłam się ponad rok temu, kiedy przyłożyłam się do blogowania. Chciałam samodzielnie poprawić wygląd bloga, więc zaczęłam przeszukiwać internet za jakimiś poradnikami. W międzyczasie dużo się nauczyłam, a zarazem świetnie się bawiłam (choć zdarzały się takie dni, że miałam ochotę rzucić laptopem, ale ciii, haha). A żeby ułatwić początkującym, postanowiłam wszystkie poradniki skupić u siebie w jednym miejscu. Także życzę udanej zabawy z kodami i powodzenia! :)

Na początek otwieramy miejsce na arkusz css. Jak to zrobić? więcej tutaj→klik
szablon → dostosuj → zaawansowane → dodaj arkusz css
Nie zapomnij po wklejeniu kodu nacisnąć Enter!

Wyśrodkowanie nagłówka:
#header-inner {text-align: center;}
#header-inner img {margin: 0 auto; }

Kolor tła postów:
.post {background-color: #ffffff;}

Odpowiedni kolor można wybrać tutaj→klik, wystarczy w miejsce zaznaczonego na czerwono elementu kodu wpisać wybrany z tej strony. Pamiętaj o #!

Kolor tła kolumny bocznej lewej:
.column-left-inner {background-color: #ffffff;}
Kolor tła kolumny bocznej prawej:
.column-right-inner {background-color: #ffffff;}

W miejscu wyrazu POZYCJA wpisz: center (czyli wyśrodkowanie),  justify (czyli wyjustowanie), right (przesunięcie do prawej krawędzi) albo left (przesunięcie do lewej krawędzi).
W miejscu wyrazu STRONA wpisz: left (lewa), center (środkowa), right (prawa).

Pozycja gadżetów w lewej kolumnie:
.column-left-inner {text-align: POZYCJA; }
Pozycja gadżetów w prawej kolumnie:
.column-right-inner {text-align: POZYCJA; }
Pozycja gadżetów w środkowej kolumnie:
.column-center-inner {text-align: POZYCJA;}

Pozycja daty:
h2.date-header {text-align: POZYCJA;}

Pozycja tytułu postu:
h3.post-title {text-align: POZYCJA;}

Pozycja tekstu "Komentarz":
.comments h4 {text-align: POZYCJA;}

Pozycja menu z kartami:
#PageList1 ul {text-align: STRONA;}
#PageList1 ul li {float: none; display: inline;}

Usunięcie tekstu "Starszy/Nowszy post":
.blog-pager { display: none !important;}

Usunięcie tekstu "Technologia Blogger":
.Attribution {  display:none; }

Ogólnie bardzo chętnie korzystam z tych stron (klik i klik), kody są ładniej pokazane niż u mnie. :P
Wiele osób ma również problem z niechcianymi tytułami gadżetów. Wystarczy w miejsce tytułu wpisać: </> i stanie się on niewidoczny, zniknie. I voila!
Przypominam, więcej kodów w zakładce "Design DIY" w górnym menu!


52 komentarze :

  1. Dzięki, dzięki, dzięki! Na pewno będę korzystać z Twoim rad. Już zrobiłam podświetlenie zdjęć na biało. Ja to jestem jeszcze słaba w projektowaniu bloga, ale wszystko super, przejrzyście rozpisujesz, że coś mi się na pewno uda pokombinować :)

    OdpowiedzUsuń
  2. Dobry pomysł na posta :) Niedługo w poniedziałek lub wtorek ja też opublikuję część mojego zbioru.
    Pozdrawiam,
    sotiens.blogspot.com

    OdpowiedzUsuń
  3. I like your blog!
    Would you like to follow each other?
    Let me know at my page:)

    xoxo

    http://nastyadeutsch.blogspot.ru/

    OdpowiedzUsuń
  4. Świetny pomysł na poradnik dla nieobeznanych w designie :). Ja już raczej nie skorzystam chociaż poradnik z tą datą jest świetny! :)
    ♥Different Diamond♥
    Pozdrawiam :)!

    OdpowiedzUsuń
  5. przydatne info,
    http://happinessismytarget.blogspot.com/

    OdpowiedzUsuń
  6. Ja akurat już nie potrzebuje porad.
    Napewno przydadzą się początkującym

    Zapraszam do mnie
    wixiandalex.blogspot.com

    OdpowiedzUsuń
  7. Oooo, na pewno się przyda, ostatnio zdarza mi się grzebać w kodach, więc pewnie skorzystam.

    http://leonzabookowiec.blogspot.com/

    OdpowiedzUsuń
  8. Skorzystam z tych rad, na pewno! :)
    http://jullia2452.blogspot.com/

    OdpowiedzUsuń
  9. Ja w designach jestem zielona dlatego za każdym razem proszę kogoś o pomoc.
    Ale poradnik jest pomocny!
    Pozdrawiam, http://nataa-natkaa.blogspot.com/

    OdpowiedzUsuń
  10. Pamiętam swoje początki z kodami CSS i z HTML. Myślałam, że temu nie podołam, to była totalnie czarna magia :o Ale do wszystkiego można dojść powoli, wystarczą tylko chęci :) Poradnik bardzo pomocny, na pewno skorzysta z niego wiele osób.

    Buziaki,
    miniifluff

    OdpowiedzUsuń
  11. Na pewno wielu osobom te kody się przydadzą :) Ja je ogarnęłam kilka lat temu i tak do dziś ich używam. Bardzo fajna sprawa!

    Pozdrawiam,
    INNA MYŚL

    OdpowiedzUsuń
  12. Bardzo przydatne porady :)

    http://reeeeadytorun.blogspot.com

    OdpowiedzUsuń
  13. Przydatny post!
    http://stylizacje-zyciem.blogspot.com/

    OdpowiedzUsuń
  14. Ciekawy poradnik, ja bloga prowadze 3 lata a i tak sie w tym mieszam :)

    www.ilonastejbach.blogspot.com

    OdpowiedzUsuń
  15. bardzo mi pomogłaś. Dziękuje bardzo!

    zapraszam na nowy post- http://graybody.blogspot.nl/2015/07/1-ootd.html

    OdpowiedzUsuń
  16. Na pewno przyda się wielu osobom ;3
    http://sapphireblog1.blogspot.com/

    OdpowiedzUsuń
  17. Fajnie że dodajesz takie posty, może to pomóc osobom dla których kody css to czarna magia haha. Na początku też tak miałam, a teraz w wolnym czasie bawię się w szabloniarkę :D

    Zapraszam na nowy post - klik! :)

    OdpowiedzUsuń
  18. Ja do wyśrodkowania tych wszystkich rzeczy użyłam jednego kodu, ale te też są przydatne np. jakbym zdecydowała się na napis z datami po lewej :D Napisy "nowszy/starszy post" mi nie przeszkadzają, ale może pozbędę się tego tekstu na dole :)
    http://im-dollka.blogspot.com/

    OdpowiedzUsuń
  19. Bardzo przydany post, na pewno pomoże wielu osobom! :)

    olivee-blog.blogspot.com

    OdpowiedzUsuń
  20. Świetny post ! Bardzo przydatny :)

    OdpowiedzUsuń
  21. dzięki za wytłumaczenie :) postanowiłam założyć własnego bloga i bardzo się przydało ! niby prosty blog, a jednak trzeba się nakombinowac

    Zapraszam do siebie - gryffindorka.blogspot.com
    Dopiero zaczynam przygodę z blogiem :)

    OdpowiedzUsuń
  22. Ja od pewnego czasu próbuje robić desing i wgl wiec dzieki za rady! :)

    W wolnej chwili zapraszam do mnie!
    the-fight-for-a-dream.blogspot.com

    OdpowiedzUsuń
  23. Bardzo przydatny post:) Ja się kompletnie na tym nie znam haha

    zapraszam na mojego bloga, gdzie opisuje moją małą podróż po Chinach:)
    nakrancumarzen.blogspot.com

    OdpowiedzUsuń
  24. Kody na pewno się komuś przydadzą. Ja też czasem przy zmianie designu miałam ochotę rzucić laptopem!
    written-by-life.blogspot.com

    OdpowiedzUsuń
  25. świetny pomysł na posta :-*
    Takie kody na pewno przydadzą się początkującym :D
    Zapraszam!
    Gabrielle->Klik!

    OdpowiedzUsuń
  26. Przydatny poradnik! Kazdemu sie przyda szczegolnie poczatkujacym lubim takim jak ja potrzebujacym skopiowania kodu bo samodzielnie pisac ich nie umiem xd
    P.s. Mega ladne masz zdjecie w wianku po prawej stronie bloga! :*

    versjada.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. poczatkujacym ludzia*
      Nie wiem skad mi sie wzielo to "lubim" xddd

      versjada.blogspot.com

      Usuń
  27. Naprawdę bardo pożyteczny post, bardzo mi pomógł :)
    Dzięki!

    22-ffashion.blogspot.com - klik :)

    OdpowiedzUsuń
  28. Pomocny post! :)
    obserwuje i zapraszam :)
    http://gabrysia--blog.blogspot.com/

    OdpowiedzUsuń
  29. przydatne!
    http://polowcia--blog.blogspot.com //byłabym wdzięczna jakbyś poklikała w linki!

    OdpowiedzUsuń
  30. Bardzo fajny post <3
    Zapraszam do siebie !!
    www.thevogueboxx.blogspot.com

    OdpowiedzUsuń
  31. Bardzo fajny post :D Na pewno przyda się wielu początkującym blogerom :D

    OdpowiedzUsuń
  32. nie korzystam z blogspota, ale przyda sie na pewno tym ktorzy tego nie ogarniajaa :)

    olabrzeska.pl

    OdpowiedzUsuń
  33. bardzo pomocne :)

    Zapraszam na mojego bloga! Miło będzie jak skomentujesz a jak Ci się spodoba to może i zaobserwujesz? http://xaaleksandra.blogspot.com/ : )

    OdpowiedzUsuń
  34. Świetny poradnik! Na pewno każdemu się przyda! :)
    Wspólna obserwacja? Daj znać:)
    Mamy prośbę, znalazłabyś trochę wolnego czasu do poklikania w linki? [Klik]
    Z góry dziękujemy :)

    Pozdrawiamy :*
    Nasz Blog [Klik]

    OdpowiedzUsuń
  35. Przydatne porady! Trochę z nich wykorzystam ;)
    Zapraszam na nowy post ;) Byłoby mi bardzo miło gdybyś zajrzała na chwilkę ;)
    Pozdrawiam! http://gossip-girl94.blogspot.com/

    OdpowiedzUsuń
  36. przydatne :)
    bo dla mnie to dalej czarna magia :)
    a nie wiesz może jak wyśrodkować etykiety? bo wszystkie zbiły się po lewej stronie.. możesz wejść i zobaczyć, będę wdzięczna :)

    http://triviaaboutme.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. już do Ciebie napisałam na maila! :)

      Usuń
  37. Bardzo podoba mi się wystrój (nwm czy można to tak nazwać) twojego bloga :D
    A poza tym świetne rady ;)
    Zapraszam do mnie : 3natalia3fashion.blogspot.com

    OdpowiedzUsuń
  38. Bardzo podoba mi się to jak piszesz <3
    U mnie nowy post,serdecznie zapraszam ! :)
    Mój blog - KLIK ♥

    OdpowiedzUsuń
  39. Kody css są naprawdę super! Sama chętnie z nich korzystam, chociaż może nie do końca widać po moim blogu, ale co tam :D Widzę, że masz 18 lat, fajnie! Ja właśnie poszukuję blogerek w wieku 18 w zwyż do czytania :D Znasz może kogoś takiego, kogo mogłabyś mi polecić? Sama mam 20 lat i wiesz, czytanie blogów 12,13latek to tak nie bardzo :D

    Pozdrawiam i zapraszam na 6czerwca!

    OdpowiedzUsuń
    Odpowiedzi
    1. mimo że ta dziewczyna nie ma 18 lat, pisze bardzo dojrzale! :) different-view-of-the-life.pl
      jeśli jednak chciałabyś poczytać blogi kogoś starszego, to ja czytam: kinablogger.blogspot.com i polinska.blogspot.com :)

      Usuń
  40. Sama dawniej korzystałam z takich poradników, fajna sprawa dla początkujących! :)

    Nowy Post!- Klik!
    Mój post na FAMFY!- Klik!

    OdpowiedzUsuń
  41. Fajnie zamieszczone instrukcję, wszystkie zebrałas razem, co ułatwia sprawę! :)
    http://natasza-zoi.blogspot.gr/?m=1

    OdpowiedzUsuń
  42. Kody jak najbardziej przydatne, teraz poszukuję takiego, którym będę mogła sobie trochę powiększyć odległość między pojedynczymi stronami w górnym menu, ale póki co ciężko mi te poszukiwania idą..;)

    OdpowiedzUsuń
  43. ja akurat przerabiam szablon :)
    pozdrawiam i zapraszam do siebie
    Mój blog - byAjina
    KONKURS FOTO klik

    OdpowiedzUsuń
  44. Świetny poradnik! Warto z niego skorzystać :)
    Uwielbiam eksperymentować z kodami CSS ^^

    NOWY POST NA FABRYCE MIĘTY KLIK!
    KONKURS URODZINOWY KLIK! :))

    OdpowiedzUsuń
  45. super, że zamieściłaś u siebie taki poradnik :)
    blog: optymistka. | fanpage

    OdpowiedzUsuń
  46. Wszędzie tego szukałam :D Ja nie wiem, jak można pamiętać te kody :D
    Komentarz jest nagroda za zajęcie III miejsca w konkursie na najlepszy blog miesiąca! Gratuluje!
    http://nuskaaaa.blogspot.com/2015/07/mini-konkurs-z-okazji-50-czytelnikow.html

    OdpowiedzUsuń

Dziękuję za każdy szczery komentarz, sprawiasz mi ogromną radość! :)

~ Nie bawię się w tzw. "obs za obs", ani "kom za kom";
~ Można zostawiać linki do bloga;
~ Na LBA nie odpowiadam, jednak dziękuję za każdą nominację;
~ Na pytania odpowiadam tutaj, wyjątkowo u kogoś, jeśli ta osoba o to poprosi;
~ Odwiedzam tylko blogi osób, które napisały więcej niż "fajny post, blog" czy "ładne zdjęcia, zapraszam do siebie"!