30.11.2014

Jak wyśrodkować tytuł posta / nagłówek daty / zawartość gadżetów / nagłówek bloga - Blogger

Witajcie!

Dziś chciałabym Wam przedstawić tutorial Jak wyśrodkować tytuł posta/nagłówek daty/zawartość gadżetów/nagłówek bloga.
W związku z tym, że jest to mój pierwszy post tutorialowy, mam nadzieję, że będzie zrozumiały i pomocny. :)
Zapraszam do czytania!

Zaczynajmy!!

Krok 1.

Wchodzimy w menu Szablon.



Krok 2.

Klikamy na klawisz Dostosuj.




Krok 3.

Pojawia nam się menu Projektant szablonów Bloggera.
Wybieramy Zaawansowane.




Krok 4.

Zjeżdżamy na sam dół listy i klikamy Dodaj arkusz CSS.























Krok 5.

W pole wklejamy nasz kod (kody podam za chwilę) i wciskamy klawisz Enter.


Uwaga! Jeśli w tym polu macie już jakiś/jakieś kod/kody CSS, już Wam pokazuję, co należy zrobić.


Przy ostatnim znaku ostatniego naszego kodu CSS stawiamy kursor i wciskamy klawisz Enter.
Następnie wklejamy nasz kod i ponownie wciskamy Enter.


Kody:

1.Wyśrodkowanie tytułu posta

.post-title {text-align:center;} 


 2. Wyśrodkowanie nagłówka daty

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


3. Wyśrodkowanie zawartości gadżetów

.widget {text-align: center;}


4. Wyśrodkowanie nagłówka

a) jeśli obraz nagłówka jest wgrany jako Zamiast tytułu i opisu:  
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

b) jeśli obraz nagłówka jest wgrany jako Za tytułem i opisem
#header-inner {background-position: center !important; width: 100% !important;}

c) wyrównanie tekstu z obrazkiem: #header-inner {text-align: center ;}

d) po prawej obrazek, po lewej tekst (tu trzeba pamiętać, by obrazek wstawiany w nagłówku miał mniejszą szerokość, niż blog):  
#header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}


Gotowe !


Jeszcze jedna wskazówka

Jeżeli chcecie nie wyśrodkować, a wyrównać do prawej/lewej któreś z powyższych elementów bloga,
usuwamy wyraz center w kodzie CSS i zastępujemy go right (jeśli chcemy wyśrodkować do prawej) lub left (jeśli chcemy wyśrodkować do lewej).
Uwaga! Nie umieszczamy żadnych spacji, znaków, usuwamy wyraz i wpisujemy inny.


Powyżej przykłady dwóch kodów (wyśrodkowanie nagłówka daty oraz tytułu posta)
 

Jak myślicie, czy podobał Wam się mój dzisiejszy post? Czy był zrozumiały? :D


Czas mnie goni, już muszę lecieć! :)
Do zobaczenia w następnym poście!

Karolina


15 komentarzy:

  1. Jezu, skad Ty to wiedziałaś :O dziękuje, pomogło!

    OdpowiedzUsuń
  2. Pomocne, dzięki :) Mam jeszcze spoooro pytań, ale mam nadzieję, że znajdę odpowiedzi :) Zapraszam na mojego bloga http://opowiadaniaanes.blogspot.com/ :)

    OdpowiedzUsuń
  3. Nie wiem dlaczego ale u mnie po wpisaniu tych kodów, nic się nie zmienia :(

    OdpowiedzUsuń
  4. Dziękuje <3 Udało się wreszcie ten nieszczęsny tytuł wyśrodkować :)

    OdpowiedzUsuń
  5. Chciałabym wyśrodkować obraz na stronie głównej (pod nagłówkiem i stronami), przy wpisaniu odpowiedniego kodu wyśrodkowuje się również cały tekst postów... Pomocy!

    OdpowiedzUsuń
  6. Cześć,
    zakładam blog na blogspocie. Zrobiłem kilka wpisów. Potem je edytowałem, m.in. zmieniając tytuły i zdjęcia. Wynik? W pasku adresowym http widnieją stare tytuły wpisów.

    Tak samo jest w rubryce "O mnie": tu też są stare tytuły wpisów, a ponadto stare zdjęcia z wpisów. Jak rozwiązać ten dwojaki problem?

    PS Nie znam się na HTML-u, więc w nim nawet nie grzebię.

    OdpowiedzUsuń
  7. Dziękuję bardzo przydatne i świetnie opisane :)

    OdpowiedzUsuń

♥ Weryfikacja obrazkowa wyłączona
♥ Za wszystkie komentarze z góry dziękuję
♥ Jeżeli w komentarzu pozostawicie link do swojego bloga, na pewno go odwiedzę!
♥ Obraźliwe komentarze będą usuwane