25 marca 2015

Szablonowe porady: Kody CSS + jak stworzyć dobry nagłówek?

Dzisiaj przychodzę do was z kodami CSS i robieniem od podstaw nagłówku. Jak wiadomo nie każdy łapie się w tych wszystkich kodach i niekiedy nie jest w stanie zrobić własnego wyglądu, który przykuwałby uwagę, a w oczy jako pierwsze rzuca się wygląd, od czego niekiedy zależy czy dana osoba, która weszła na bloga, dalej tam pozostanie i coś przeczyta, czy po prostu zamknie kartę i wróci do swoich czynności.
 Legenda:
pozycja: center - wyśrodkowanie; justify - wyjustowanie; right - do prawej; left - do lewej.
strona: left - lewa; right - prawa; center - środkowa.
#ffffff - kolor, który można wybrać z palety RGB

 .header { height: 450px;} - ustalenie wysokości nagłówka
.tabs-outer {background-color: #FFFFFF;} - kolor tła kart
.tabs-outer .widget li a {margin: 5px;} - odstępy pomiędzy linkami kart
h3.post-title, .comments h4 {text-align: pozycja;} - pozycja nagłówka postu
h2.date-header {text-align: pozycja;} - pozycja daty
.column-strona-inner {text-align: pozycja; } - pozycja gadżetów w danej kolumnie
a:hover { letter-spacing: 3px; } - rozsunięcie się linku po najechaniu kursorem
.sidebar .widget {
margin: -9px 0px 0px 0px ; } - zmniejszenie odstępów pomiędzy gadżetami
.column-strona-inner { margin-strona: -12px; } - zmniejszenie odstępu pomiędzy paskiem bocznym a postami
Jak wiadomo blog to nasza wizytówka, a więc należy zadbać o przejrzysty wygląd, czytelny i ładnie się prezentujący, dzisiaj pokażę wam kilka pomysłów na nagłówek. Pomysłów na nagłówek jest wiele, możesz wymyślić swój własny, unikatowy, jeżeli chodzi o dokładne robienie nagłówka krok po kroku to należy zacząć od samego białego tła, wymiary pobierzmy z bloga (szerokość) i stwórzmy nowy obraz w paincie.

 Krok 1:

Pamiętajmy o tym by obraz zapisać w PNG, inaczej tło nagłówka może stać się szare.
Krok 2:

Gdy już zrobimy naszą podstawę przenosimy się w moim przypadku do Photoscape, którego można spokojnie pobrać z internetu. W tym oto programie wpisujemy swoją nazwę bloga, dodajemy elementy graficzne, czyli jednym słowem przelewamy w program to co chcemy mieć na blogu za nagłówek. Czcionki można pobrać z dafont, a obrazki z grafiki google bądź strony weheartit. Oto to co mi powstało:
Krok 3:

Na końcu wstawiamy nasz nagłówek do układu bloga i cieszymy się odświeżonym wyglądem :)


Przykład 1:


Przykład 2:


Przykład 3:

Co sądzicie o takich poradnikach? Przydatne?

41 komentarzy:

  1. Bardzo fajny poradnik!
    Śliczne przykłady nagłówków!
    Pozdrawiam cieplutko :*

    ✿by Sylwia - klik✿

    OdpowiedzUsuń
  2. Naprawdę świetny poradnik, super pomysły na nagłówki :)

    22-ffashion.blogspot.com - klik :)

    OdpowiedzUsuń
  3. Fajny poradnik dla początkujących osób, choć według mnie nagłówek to kwestia kreatywności i każdy powinien stworzyć go według swoich umiejętności, ale zawsze można mieć jakieś wzorce :)

    OdpowiedzUsuń
  4. Świetna notka, bardzo podoba mi się 1 przykład nagłówka :)

    http://weraweronika.blogspot.com/

    OdpowiedzUsuń
  5. Myślę, że ten poradnik może okazać się bardzo przydatny. Ja mam już wprawę w robieniu nagłówków, ale jakieś pół roku temu z pewnością bym skorzystała. To miłe, że robisz takie poradniki.

    natty-and-natty.blogspot.com

    OdpowiedzUsuń
  6. Bardzo przydatne, jeśli będe mieć jakiś problem z kodami, będę pamiętać o tym poście! :))
    pozdrawiam,

    ANN--BLOG

    OdpowiedzUsuń
  7. Na pewno wrócę na ten post, jak będę tworzyć nowy wygląd :))
    http://alices--blog.blogspot.com

    OdpowiedzUsuń
  8. bardzo pomocna rada, ja właśnie przymierzam się do zmiany nagłówka
    pozdrawiam :)
    Mój Blog - Klik

    OdpowiedzUsuń
  9. Śliczne nagłówki!:*

    talliablog.blogspot.com

    OdpowiedzUsuń
  10. Przydatny post, bardzo podobw mi się drugi nagłówek.
    xo aleksandraq.blogspot.com

    OdpowiedzUsuń
  11. Takie posty są bardzo przydatne dla początkujących blogowiczów a także jako ciekawostka dla tych starszych blogowiczów :) Na pewno skorzystam z któryś z tych pomysłów !
    Pozdrawiam !

    http://kamii-foto.blogspot.com/

    OdpowiedzUsuń
  12. Super, że na Twoim blogu pojawiają się takie porady, na pewno wiele osób z nich skorzysta :) WWW.POLINSKA.BLOGSPOT.COM

    OdpowiedzUsuń
  13. Przydatny post! :) Ja w tych sprawach jestem "zielona" :P.
    Nagłówki cudowne <3

    Zapraszam do nas :)
    http://alia-and-tesa-blog.blogspot.com/

    OdpowiedzUsuń
  14. Świetnie wszystko opisałaś! Proszę o więcej takich poradników. Dzięki nim można się doskonalić :D
    kingas1blog.blogspot.com
    Byłabym wdzięczna za kliki w poście, dzięki ♥

    OdpowiedzUsuń
  15. Świetny pomysł na posta i bardzo przydatne kody dla początkujących. :)
    Śliczne nagłówki *.*
    meryy-blog.blogspot.com - KLIK

    OdpowiedzUsuń
  16. Uwiebiam takie notki, są bardzo przydatne :)
    http://agataweranika.blogspot.com/

    OdpowiedzUsuń
  17. Super ! Na moim blogu nagłówek jest ' prowizoryczny ', ale skorzystam z tej notki w wolnej chwili ;) super ! :)

    OdpowiedzUsuń
  18. Bardzo przydatny poradnik
    http://gab4ysia.blogspot.com/?m=1

    OdpowiedzUsuń
  19. piękne te nagłówki.. ja jednak wole nie tykać tych kodów, jeszcze coś popsuje jak to ja xD
    zapraszam ♥
    http://madeline-girl.blogspot.com/

    OdpowiedzUsuń
  20. Przydatny post. Ja rowniez ostatnio odswiezylam wyglad bloga :)

    OdpowiedzUsuń
  21. Świetna rada :)
    Mam prośbe, mogłabyś poklikać u mnie w linki na blogu? Byłabym wdzięczna :*
    http://photo-kinga.blogspot.com/

    OdpowiedzUsuń
  22. dobre rady :)

    ewamaliszewskaoff.blogspot.com

    OdpowiedzUsuń
  23. dobre rady :)

    ewamaliszewskaoff.blogspot.com

    OdpowiedzUsuń
  24. Niby o tym wszystkim wiem ale post bardzo przydatny :*
    http://onlydreams8.blogspot.com/

    OdpowiedzUsuń
  25. Masz ciekawy blog, troszkę inny od wszystkich ;) Bardzo miło tu i chętnie będę Cię odwiedzała :) Życzę sukcesów i wytrwałości w dalszym blogowaniu ;)

    http://mjrm-madeline.blogspot.com/2015/03/uwielbiam-cay-swiat.html zapraszam serdecznie na mój blog. Proszę o klikanie w banery po prawej stronie bloga, to dla mnie bardzo ważne. Każdy komentarz i obserwowanie jest odwzajemniane.

    OdpowiedzUsuń
  26. Są te rady dla początkujących, więc niestety już nie skorzystam, ale jeśli ktoś dopiero zagłębia się w tajniki grafiki, html i css to fajna sprawa:)

    { Miłego dnia!
    chanelier.blogspot.com }

    OdpowiedzUsuń
  27. Porady jak najbardziej przydatne :) Ja np jeszcze 2 miesiace temu nie mialam pojecia o tak dużym dzialaniu kodow css. Dzis juz zapoznałam sie z niektorymi i blog wyglada o wiele lepiej. :)
    Pozdrawiam i zaspraszam na dawke fotografii :)
    Jesli chodzi juz o design bloga, moglabys mi dac wskazowki co moglabym zmienic, albo z czego zrezygnowac? Bo ostatnio strasznie duzo kombinuje i sama nie wiem czy nie nawaliłam za duzo zbednych rzeczy :D

    http://obiektyw-mym-okiem.blogspot.com

    OdpowiedzUsuń
  28. Bardzo przydany post. Dziękuję <3

    rilseee.blogspot.com

    OdpowiedzUsuń
  29. Dziękuję za post. Na pewno kiedyś mi się przyda. :)

    OdpowiedzUsuń
  30. Bardzo przydatny post:)

    http://helloitsjoann.blogspot.com/

    -JoAnn

    OdpowiedzUsuń
  31. wykorzystam je :) świetne są!

    http://nikoladrozdzi.blogspot.com/

    OdpowiedzUsuń
  32. Poradniki blogowe zawsze są przydatne, każdy zawsze może z nich skorzystać! ;)

    Mój blog- ultradefenceless

    OdpowiedzUsuń
  33. Thanks for sharing

    http://www.angelnx.com/

    http://www.angelnx.com/Salwar-Kameez

    OdpowiedzUsuń