Uporządkuj swojego bloga

09.03.2015


Żeby mieć ładnego bloga wcale nie trzeba znać nie wiadomo ile kodów CSS, nie trzeba męczyć się godzinami aby nasz szablon stał się przejrzysty. Wystarczy poświęcić trochę czasu na porządki blogowe, które wcale nie muszą trwać tak długo. Wiadomo, nasze wymagania co do szablonów rosną, ale na początek to co przedstawię wam w dzisiejszym wpisie powinno wystarczyć.
Pod względem szablonów jestem pedantką, pozbywam się najwięcej rzeczy aby tylko szablon wyglądał jak należy. Był taki okres, że pozbyłam się wszystkiego z kolumny bocznej, a w stopce bloga było tylko archiwum, prawa autorskie i gadżet obserwatorzy. Odwiedzam blogi osób, którzy mi komentują - każdy bez wyjątku, ale nie raz po wejściu na bloga aż mi się odechciewa przejrzeć treść - wygląd bloga odrzuca. Na szczęście rzadko się taki "rodzynek" trafia. Zauważyłam, że spora część osób zaczęła bardziej interesować się wyglądem swojego bloga. Bardzo często do mnie piszecie, żebym wam pomogła z szablonem, nagłówkiem, menu czy jeszcze z czymś innym. Sytuacje są różne, czasem się to opiera na samych mailach, czasem robię szablon od podstaw. Ostatnio jednak dostałam bardzo ciekawego maila, z prośbą o poprawienie wyglądu bloga. Dziewczyna pisała, że kombinuje z szablonem, ale jakoś jej to nie wychodzi. Wielkich wymagań nie miała, prosiła tylko o przejrzysty szablon. Wszystko oparło się na wymianie ok. 20 maili. Jej szablon wyglądał mniej więcej tak:




Od czego teraz zacząć?

1.Czcionki - Pozbywamy się fantazyjnych nieczytelnych czcionek, które jakby tego było mało nie zawierają polskich znaków. Przyjmuje się, że powinno się używać 1 - 2 czcionek, które są do siebie podobne. Osobiście ograniczam się do jednej czcionki stosując pogrubienia od czasu do czasu, jeśli chcę wyróżnić link.


Czcionka, którą tu zastosowałam to Times New Roman. Niektóre elementy mają zastosowane pogrubienie oraz inną wielkość. Inną czcionkę stosuje w nagłówku aby go wyróżnić.

2. Tło - Bijące po oczach pstrokate tło, które bardziej na nas skupia uwagę niż cokolwiek innego - usuwamy. Jeśli już bardzo chcemy mieć tło w naszym szablonie, postarajmy się o to aby było stonowane. Tło nie może skupiać uwagi, to treść ma być na pierwszym planie. W tym wypadku postawiłam na jasno szary pattern, jednak można usunąć tło i wchodząc w zakładkę strona wybrać kolor tła np. #ccc, albo zastosować biel.


3. Kolory - pozbywamy się neonowych kolorów, które dają nieźle po oczach. Kolorystyka również potrafi rozproszyć czytelnika - nawet jeśli te neony znajdują się tylko w linku, lub tak jak na razie w naszym szablonie na tle kart. Nie wiem jak inni, ale ja jestem na to uczulona, ciężko mi się patrzy na takie neonowe linki. Zły dobór kolorów bardzo szkodzi naszemu szablonowi. Dlatego, tak samo jak w przypadku tła, starajmy się postawić na stonowane kolory, opierajmy się na jednej barwie. Przyjmuje się, że powinno się używać od 1 do 3 kolorów maksymalnie. Osobiście ograniczam się do dwóch kolorów. W tym szablonie zastosowałam odcienie fioletu.



4. Zdjęcia - Przy wpisie czytelny wpis na bloga wspomniałam, że zdjęcia powinny być odpowiednio dopasowane do szerokości akapitu. Nie zapomniałam o osobach, które nie mają takiej możliwości i napisałam, że zdjęcia w takim wypadku powinny być jednakowej wielkości. Zdecydowanie lepiej to wygląda. Zdjęcia, które mają różną wielkość we wpisie tworzą bałagan, przez co nasz post będzie wyglądał niekorzystnie. W tym szablonie usunęłam ramki i ustawiłam wielkość zdjęć na oryginalną.



5. Kolumna boczna - Pozbądź się niepotrzebnych gadżetów oraz banerów. Naprawdę nikt nie lubi, jak kolumna boczna jest dłuższa od części, w której znajdują się wpisy. Banery, przenieś np. do zakładki współpraca, niektóre gadżety przenieś do stopki bloga, a niektóre usuń. Jeśli naprawdę się uprzesz na banery na stronie głównej, to przynajmniej zadbaj o to aby były jednakowej wielkości. Zastanów się dobrze nad gadżetem statystyki, ponieważ, jeśli masz mało wyświetleń, może (ale nie musi) to odstraszyć potencjalnego czytelnika. Jak uporządkowałam kolumnę boczną na tym blogu? Przeniosłam banery do zakładki Test 2, usunęłam niepotrzebne gadżety m.in. statystyka, translate i google+ followers - ponieważ nie był on tutaj potrzebny, bo z niego nie korzystam. Gadżet etykiety, formularz kontaktowy i popularne posty (ustawiałam na wyświetlanie tylko dwóch popularnych wpisów) przeniosłam do stopki bloga.


6. Dodatki - Wszystkie spadające śnieżynki, kolorowe kursory, wyskakujące kotki, pieski, świnki czy co tam jeszcze jest - usuwamy. Wygląda to strasznie tandetnie, a jeszcze jakby tego było mało, przez takie właśnie urozmaicenia, wasz blog będzie dłużej się ładował. Osobiście strasznie mnie irytuje to jak muszę czekać prawię minute na załadowanie strony, bo ktoś nawalił na swojego bloga migających koteczków, kolorowych kursorów, które ciągnął za sobą sznur sypiących się gwiazd i jeszcze ten prószący śnieg latem, albo spadające liście wiosną. Takie dodatki bardzo przeszkadzają w czytaniu. To wcale nie jest fajne, jak czytasz jakiś tekst, a tu nagle liść przysłania ci słowa, albo kotek wyskakuje na środek ekranu. To samo tyczy się muzyki na blogu, chcesz się podzielić swoją playlistą? super, zrób o tym jakiś wpis, ale nie karz innym tego słuchać i to z automatu. Kiedy ja wchodzę na blogi (a zazwyczaj przegląd robię po godzinie 22, kiedy to już domownicy śpią) czekam aż się otworzą i słyszę jakąś muzykę, która dochodzi nie wiadomo skąd od razu w napływie paniki zamykam wszystkie karty, a potem denerwuje się, że muszę zaczynać od początku pracę. Jak już bardzo chcesz mieć tą muzykę na blogu, to chociaż zadbaj o to, aby nie włączała się automatycznie. Takim oto sposobem nasza babeczka z bloga znika.

7. Nagłówek - Lubię proste nagłówki, przeboleje nawet te ze zdjęciami pod warunkiem, że są fajnie wykonane. Jednak w tym szablonie pozbyłam się nagłówka całkowicie i jedyne co zostawiłam to nazwę bloga, która będzie pełniła rolę mojego nagłówka w tym szablonie. Po usunięciu przechodzę do projektanta szablonów i szukam zakładki "Tytuł bloga" Zmieniam czcionkę na Lobster i zmieniam na kolor czarny oraz zmieniam wielkość do 50px. Pamiętaj, że nagłówek nie może być bardzo duży.


8. Trochę kodów - Żeby to wszystko miało ręce i nogi, użyjemy trochę kodów CSS. Zaczniemy od wyśrodkowania tytułu bloga czyli naszego nagłówka, używając w tym celu kodu: #header-inner {text-align: center ;} Następnie dodajemy tło, wyrównujemy i dodajemy wyśrodkowanie do stron. Przechodzimy do Tło kart - ustawiam kolor na biały i przechodzę do arkusza CSS. Nasz pasek stron jest na całą długość bloga. Ja chce, żeby był tylko na długość wpisu i kolumny bocznej, W tym celu użyłam tego kodu: .tabs-outer {margin: 15px 160px -15px 175px;} - wszystkie wartości są zmienne. Następnie wypadłoby wyśrodkować nasze strony, do tego użyłam tego kodu:
.tabs-outer {text-align:center !important;}
.tabs-outer li {display:inline !important; float:none !important;}
Teraz przejdźmy do kolumny bocznej i wyśrodkujmy same tytuły gadżetów, bo tylko tyle akurat w tym szablonie jest mi potrzebne, kod: .sidebar .widget h2 {text-align:center;}
Przejdźmy do wpisu. Wyśrodkujemy datę, tytuł posta oraz stopkę posta. W tym celu użyłam tych kodów:
h2.date-header {text-align: center ;}
h3.post-title {text-align: center ;}
.post-footer {text-align: center ;}

Nasz szablon po uporządkowaniu wygląda tak:


Jeśli chcecie więcej selektorów CSS lub instrukcji blogowych to zapraszam was do zakładki Tutoriale, a po selektory znajdziecie tutaj. 

Mała informacja na koniec: 

Jeśli ktoś chce szablon, nagłówek, ikony społecznościowe etc. Proszę pisać zamówienie, na adres e-mail podany w zakładce kontakt (lub po przez formularz kontaktowy) do 16.03.2015 r. Wszystkie zamówienie będę realizowane po tym terminie. Jest to ostatnia szansa na to, abym przyjęła więcej zamówień, ponieważ w późniejszych terminach będę przyjmować jedno zamówienie na miesiąc (w przypadku szablonów) jeśli chodzi o nagłówki, ikony etc. to dwa zamówienia na miesiąc. Przed wysłaniem zamówienie proszę o zapoznanie się z regulaminem. Szablony, nagłówki, ikony społecznościowe etc. wykonuje za darmo.

20 komentarzy:

  1. Świetnie, super, że pomagasz innym z wyglądem ich blogów, na pewno Twoja pomoc jest nieoceniona:)

    OdpowiedzUsuń
  2. post genialny, widać jak niewiele trzeba zrobić aby osiągnąć rewelacyjny efekt ;) http://creamshine.blogspot.com/

    OdpowiedzUsuń
  3. Bardzo ciekawy post. Chętnie zgłosiłabym się, abyś mi zrobiła wygląd bloga, tylko sama nie wiem, czy "przypadkiem" nie jest on już teraz fajny. Gdybyś miała chwilkę, mogłabyś zerknąć, czy jest ok, czy nadaje się do zmiany? Byłabym wdzięczna.
    Zapraszam: http://stella191.blogspot.com

    OdpowiedzUsuń
  4. To znaczy tak... Osobiście nie przepadam za aż takim minimalistycznym wyglądem bloga - lubię dodać jakiś kolor, nie tylko biel i szarości, ale znowu bez przesady - bez jakiś zbyt gryzących się połączeń np. różowy i zielony. Jednak u kogoś innego totalnie mi to nie przeszkadza pod warunkiem, że jest przejrzyście. Niewykluczone, że kiedyś zmienię zdanie na ten temat i zapragnę takiego bladego, prostego, acz przyjemnego szablonu, ale to jeszcze nie teraz :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Oczywiście, szablon z kolorami też jest jak najbardziej okej, tylko trzeba wiedzieć jak je zastosować :)

      Usuń
  5. Jak dla mnie ładny wygląd to podstawa, przyciąga wtedy czytelników :)
    http://przyszopceuszatych.blogspot.com/

    OdpowiedzUsuń
  6. Świetny pomysł na posta,bardzo ładnie zmieniał się ten wygląd :)
    Super,że jesteś taka pomocna innym :)
    Pozdrawiam,
    (Mój blog)- klik!

    OdpowiedzUsuń
  7. doceniam to ,że chciało ci się napisac tak długeigo posta
    zapraszam do siebie
    rokiand.blogsopot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Zawsze pisze długie wpisy, nie lubię pisać krótkich wpisów :)

      Usuń
  8. Bardzo ładny wyszedł Ci ten nowy wygląd ^^
    no i bardzo ciekawy post, jeśli będę chciała zmienić coś w swoim szablonie na pewno wrócę do tego posta :D
    pozdrawiam :D
    Mój Blog - Klik

    OdpowiedzUsuń
  9. Bardzo przydatny post :)
    Masz piękny szablon bloga :)

    OdpowiedzUsuń
  10. Wszystko zawarłaś w jednym poście.Super! Mnie zawsze odrzuca jaskrawe tło,przyciągające bardziej uwagę od tekstu !
    Pozdrawiam

    http://roxa-blog.blogspot.com/

    OdpowiedzUsuń
  11. okej to jest drugi post jaki czytam u Ciebie i... poważnie zakochałam się w Twoim 'stylu' blogowania. Masz to COŚ, że nawet ja, nie mająca pojęcia o grafice komputerowej, przeczytałam calusieńki post o niej:)

    Zapraszam do mnie
    ALQXX

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że Ci się spodobało ;)

      Usuń
  12. Tu sprawdza się zasada im więcej tym lepiej, z którą całkowicie się zgadzam. Jeśli chodzi o mnie to nie lubię gdy cokolwiek znajduje się w stopce ale to kwesta gustu, bardzo przydatny post ;)
    http://stoprocentwelny.blogspot.com/

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona