niedziela, 10 maja 2015

Jak upiększyć swój szablon?



Wiosna, lato - czas na zmiany :) Dlatego dzisiaj przygotowałam dla Was bardziej techniczny post, o tym jak w prosty sposób pomajsterkować przy wyglądzie bloga. W niniejszym poście opowiem między innymi: jak dzięki prostym html'owskim sztuczkom i kilku kodom CSS'a samodzielnie upiększyć szablon, podam linki przydatne w kreowaniu strony i prawdziwe kopalnie przecudnych szablonów. Gotowi? No to zapraszam :)

Bardzo lubię przerabiać blogspotowe szablony i się nimi bawić. Jestem też przeciwna korzystaniu z gotowych szablonów, które narzucają wygląd i sieją spustoszenie w grafice, gdy tylko próbuję coś zmienić. Często też wyglądają koszmarnie w wersji mobilnej - a to tutaj najczęściej przeglądam blogi i zależy mi, by strona była czytelna, nie odchudzając drastycznie komentarzy, jak to jest w przypadku niektórych blogów. Szablon, który widzisz na moim blogu zmodernizowałam sama według własnego widzimisię. Jestem w pełni zadowolona z efektu, który uzyskałam i teraz jedyne co będę w nim zmieniała to pewnie tylko tło i nagłówek, ewentualnie kolory gadżetów :) Co zmieniłam? Dośrodkowałam tytuły postów i ich daty, dośrodkowałam gadżety, zaokrągliłam rogi zdjęć w postach i dodałam cień, zmieniłam kolory linków i wygląd czcionki. Najwięcej czasu poświęciłam jednak wyglądowi komentarzy, który w pełni mnie zadowala :) Tutaj zmieniłam wielkość awatarów, bawiłam się cieniem, który zza nich pada, dodałam też ramkę wypowiedzi. Uważam, że jest ładnie i czytelnie. Jestem pewna, że skoro ja potrafiłam się tego nauczyć i nic nie zepsułam - to Ty także to potrafisz. Grunt to wiedzieć czego się chce i wiedzieć z jakich kodów skorzystać ;)

Oczywiście, jak wiadomo "ładny" nie oznacza tego samego dla wszystkich. Jednak jest kilka reguł oraz sztuczek, które mogą pomóc. Hasłem przewodnim dzisiejszego wpisu niech będzie: "elegancja tkwi w prostocie" lub inaczej "mniej - znaczy lepiej".

Przejdźmy do meritum. O tym, że pstrokacizna w szablonie to zło i powinno się tego unikać pisałam w tym poście. Pisałam w nim też, że nadmierna ilość gadżetów ogłusza czytelnika, a muzyka w tle to grzech najcięższy. Jeżeli nie czytałeś - to odsyłam Cię do tego postu byś nadrobił zaległości. Nadrobiłeś? No to przejdźmy dalej.


1. Układ bloga 

W Bloggerze dostępne są 3 podstawowe układy bloga:
  • jednokolumnowy bez bocznych paneli, 
  • dwukolumnowy (szpalta główna plus panel boczny) 
  • trzykolumnowy (szpalta główna plus dwa panele boczne w różnych układach).

Zasady główne:
  1. Najlepiej by na główną szeroką szpaltę, na której będą pojawiać się publikowane kolejne wpisy przeznaczyć przynajmniej 60% całej szerokości bloga. Dzięki temu będzie on czytelny i bardziej przyjazny dla odbiorcy.
  2. Jeden panel boczny, najlepiej z prawej strony. Dlaczego z prawej? Czytamy od lewej do prawej, prawda? Jeśli więc po lewej stronie od głównego tekstu będzie jeszcze coś, np. zatłoczony panel boczny - nasz wzrok będzie mimowolnie zahaczał o to miejsce i rozpraszał się niepotrzebnie. Nieważne więc, ile na blogu jest kolumn - dobrze, jeśli główna szpalta jest pierwsza od lewej.
  3. Ważne by tekst nie był dośrodkowany, tylko wyrównany do lewej. W przypadku tytułów, nagłówków, stopek czy gadżetów nie ma to znaczenia, ale tekst czyta się łatwiej, gdy początki linijek są tam, gdzie się ich spodziewamy ;) O tym jak ważne jest formatowanie pisałam więcej w poście o podstawach, tutaj.



2. Porządek w panelach


Panel boczny to zbiór informacji o nas. Dobrze, by było gdyby był równy, a jego zawartość nieprzesadzona i pogrupowana. Jego wygląd powinien sprawiać, że blog będzie wyglądał na bardziej uporządkowany, dlatego koniecznie trzeba zrobić w nim porządek!
  • Te wszystkie banery konkursów i rozdawajek można wrzucić na osobną stronę, by niepotrzebne nie zaśmiecały bloga. Jeżeli jednak tego nie chcesz - zgrupuj je ze sobą tematycznie i zadbaj o jednakowy rozmiar. Staraj się też nie umieszczać ich zbyt wiele żeby nie zaśmiecić bloga i nie zrobić z niego tablicy ogłoszeń. 
  • Jeśli korzystasz z blogrollu, czyli gadżetu o ostatnich wpisach z ulubionych blogów - postaraj się ograniczyć ilość pokazywanych linków. Niekończąca się litania z blogami rozprasza. Poza tym, każdy potrafi kliknąć w "Pokaż więcej" :)
  • Postaraj się, by w panelach pozostało wyłącznie to, co najważniejsze, czyli to na co czytelnik powinien zwrócić uwagę, a nie od czego dostanie oczopląsu! Na przykład, jeżeli zależy Ci, by czytelnik polubił fanpejdża strony - umieść LikeBox w widocznym miejscu. O tym jak dodać LikeBox na bloga pisałam tutaj
  • O tym jak ważna jest obecność archiwum i etykiet w szablonie - również już wspominałam w poście o podstawach. Przypominam, że  brak archiwum + brak etykiet = organizacyjna katastrofa. Nie chcesz archiwum? Skorzystaj przynajmniej z etykiet. Jednak pamiętaj, by uporządkować je tematycznie. Nie ma chyba nic gorszego niż niekończąca się chmura tagów, w których nic nie można znaleźć
  • Dodaj na bloga gadżet "Obserwatorzy", by ułatwić odbiorcy dodanie Cię do ulubionych




3. Kolory szablonu


Ważne, by kolorów w szablonie nie było zbyt wiele - maksymalnie od 3 do 5. Najlepsze będzie jasne tło i ciemny tekst (czarny lub ciemnoszary). Schemat kolorystyczny dla strony można łatwo wykreować za pomocą stron, które pomagają dobierać odcienie. Jedną z takich stron jest Design Seeds® które podpowiada jakie kolory się lubią, a jakie się nie lubią ;) Znajdziecie tu wiele bardzo udanych palet kolorystycznych tworzonych na podstawie przepięknych zdjęć. Proponuję tam zajrzeć w poszukiwaniu inspiracji :)

DesignSeeds



4. Nagłówek

O tym jak można łatwo i bez płatnych narzędzi (typu Photoshop, który jest dość skomplikowany) zrobić własny nagłówek na blog - taki dodający szyku Twojemu  miejscu w sieci... postaram się napisać już niebawem ;)






Linki pomocne w tworzeniu wymarzonego szablonu


Hafija's Blogger Design 
Ta strona to moja kopalnia blogowego złota. Nie jestem w stanie zliczyć ile razy korzystałam z wskazówek tu opublikowanych. 

U Hafiji dowiecie się m.in:


Tajemniczy ogród 
Tajemniczy ogród Margot to kolejne moje blogowe źródło wskazówek i pomocnych kodów. 

U Margot dowiecie się m.in:


Blokotek
To moje najnowsze odkrycie, na którym dowiecie się:



Piękne gotowe i darmowe tła na bloga znajdziecie na:



Gotowe szablony

A jeżeli nie chcesz grzebać w kodach i samodzielnie bawić się w modernizację, skorzystaj z gotowego szablonu, poniżej linki z kopalniami darmowych szablonowych piękności:

W przypadku korzystania z gotowego szablonu pamiętaj o dwóch zasadach:
  • Zawsze zeskanuj pobrane pliki programem antywirusowym.
  • Przed instalacją nowego szablonu - zrób kopię zapasową poprzedniego. O tym jak to zrobić przeczytasz tutaj



cdn.




PS: W bliższej lub dalszej przyszłości zamierzam zabrać Was w podróż po ładnych blogach blogosfery w poszukiwaniu inspiracji i… motywacji oraz przede wszystkim uświadomienia sobie tego, czego tak na prawdę chcemy i jaki ma być ten nasz wymarzony blog :) 






INNE ARTYKUŁY Z CYKLU:


43 komentarze:

  1. Jak zwykle świetny i bardzo przydatny wpis. Korzystam z większości stron, o których piszesz, i bardzo je sobie cenię. Sama myślę, że muszę jeszcze zająć się komentarzami i rozwijalnym menu - wtedy będzie perfekcyjnie. No i pomyśleć jeszcze o nagłówku... :)

    OdpowiedzUsuń
  2. Ostatnio właśnie skorzystałam z szablonu od Blokotka. Czuć powiew świeżości na moim blogu i jest po prostu czyściej :)

    OdpowiedzUsuń
  3. Sporo dobrych i potrzebnych porad. Bardzo przydatny wpis.

    OdpowiedzUsuń
  4. Już jakiś czas temu chciałam zrobić własny wygląd bloga, dopasowany do moich preferencji. Odkładałam to jednak i nadal nie zrobiłam czegoś swojego. Zainspirowałaś mnie do tego i w końcu zaczęłam coś kombinować. Dzięki! Czekam z niecierpliwością na posta o grafice, bo z tym mam największe problemy!

    OdpowiedzUsuń
  5. Jak zwykle bardzo przydatny post! :D
    love-ksiazki.blogspot.com

    OdpowiedzUsuń
  6. Świetny post.Masz rację ,gotowe szablony strasznie ograniczają... ;-)

    OdpowiedzUsuń
  7. Czekałam na to, aż ktoś wreszcie mi powie, jak pokombinować nieco z szablonami. Chociaż ja swój znalazłam na jakimś blogu i po prostu gotowy nieco przerobiłam (za zgodą autorki oczywiście) to brakowało mi w nim właśnie takich detali jak ramka wokół zdjęcia lub zmienienie wyglądu cytatu w poście. Jak tylko znajdę wolną chwilkę to pokombinuję, może coś uda mi się stworzyć :)

    Twoja seria z poradami dotyczącymi bloga i życia w sieci jest naprawdę fantastyczna, nie mogę się doczekać kolejnego takiego postu!

    OdpowiedzUsuń
  8. Bardzo ciekawy post, na pewno skorzystam ze porad. Pozdrawiam :)

    OdpowiedzUsuń
  9. Przydatne, przydatne. Sama korzystam z tych kodów i przyznam, że blog od razu lepiej się prezentuje. ;)

    OdpowiedzUsuń
  10. Ja akurat teraz mam gotowy szablon, bo WordPress a) ma ich więcej b) nie miałam czasu siąść nad własnym xD

    OdpowiedzUsuń
  11. Tak, mamo, wiem, że muszę doogarnąć szablon ;) I nie mogę doczekać się kolejnego posta, bo już od jakiegoś czasu przykładam się do jakiegoś ładnego nagłówka, a sama nie umiem i nie znam nikogo takiego (+ musi to jakoś wyglądać) ;)

    OdpowiedzUsuń
  12. Akurat jestem na etapie zmiany szablonu ;) Dziękuję. Blokotek fajna strona też z niej korzystam :)

    OdpowiedzUsuń
  13. Świetne rady - jak zawsze :) Wygląd Twojego bloga jest naprawdę wspaniały. Ja korzystam tylko ze strony profilki.pl.

    Pozdrawiam
    Isabel Czyta - mój blog :)

    OdpowiedzUsuń
  14. Ami, jak zwykle genialny post! Ja mam niestety kolumnę z gadżetami po lewej stronie i raczej tego nie zmienię, choć spróbuję zobaczyć, jak będzie to wyglądało.

    OdpowiedzUsuń
  15. Nie rozumiem o co chodzi tymi "stronami" to sie samo tworzy w zakaldce bezposta? bo by mi sie cos takiego przydalo ale nie do konca rozumiem :D
    Planuje zmiany na blogu ale to dopiero jak skoncza mi sie glowne obowiazki wiec zapewne do tego postu wroce ze zdwojona sila myslenia hehe
    Mam ogromne problemu html i tak dalej bo nie rozumiem teg odo konca hcociaz chcialabym zmienic to i owo. Poki co kiepsko mi to idzie. Mnie to by sie przydala cala nauka tego hehe Dlatego sei ciesze z wieeeeeeeeelu linkow do takich osob co wspomoga.
    Ami jestes Wielka!! :*

    OdpowiedzUsuń
  16. Ciekawy i bardzo przydatny post. Ja osobiście też lubię się pobawić szablonami jednak ja robię to raczej amatorsko i nie zawsze wychodzi mi to tak jak tego chcę. Pewnie nie jeden i nie dwa razy skorzystam z twoich pomocnych rad :)

    OdpowiedzUsuń
  17. No muszę przyznać że rady bardzo ciekawe będę musiał przejrzeć jeszcze mojego bloga i coś zmienić :) ale co do tekstu to nie wyrównany do lewej tylko wyjustowany czyli na całej szerokości linii lepiej wygląda :) a zamiast Photoshopa polecam jego darmowy odpowiednik Gimp :) ma te same funkcje a jest za darmo :) szkoda że nie znałem Design Seeds® kiedyś przydałaby mi się w pierwszych projektach bloga :) na szczęście wygląd mam za sobą i zbyt szybko go nie zmienię :)

    OdpowiedzUsuń
  18. My mamy dwa panele boczne i trochę się boję, że jest tego trochę za dużo, chociaż bardzo mi się podobają. Może na wakacjach zabierzemy się zmiany na blogu.

    OdpowiedzUsuń
  19. A co zrobić jeśli mi od jakiegoś roku w ogóle blogger nie pozwala wejść w opcję szablony? Pojawia się takie "e" połamane i BŁĄD:( ????

    OdpowiedzUsuń
    Odpowiedzi
    1. Próbowałaś innej przeglądarki?

      Usuń
  20. Bardzo przydatny wpis, podziwiam Cię za odwagę do majstowania w kodzie, mi tam zawsze wychodzi jakaś katastrofa. Pobrałam gotowy szablon i przy pomocy wielu osób dostosowałam go do swoich potrzeb, ale teraz czuję się szcześliwsza. I sama chętniej wchodzę na własną stronę główną ;)
    Kto wie, może skorzystam kiedyś z Twoich rad, jak znów zapragnę zmian.

    OdpowiedzUsuń
  21. Naprawdę przydatny post ^^.Czekam z niecierpliwością na post o nagłówku!
    Ja to sobie nie mogę poradzić z gadżetami na pasku bocznym.Chyba część przeniosę na strony, ale to nie teraz, bo na razie mam urwanie głowy w szkole.
    Z teł na pewno kiedyś skorzystam, a w szablonach poszukam inspiracji.
    http://cityofdreamingbooks.blogspot.com/

    OdpowiedzUsuń
  22. Za niedługo planuję wdrożyć parę zmian u siebie, gdyż mój wygląd już sporo czasu temu mi się znudził, a lubię nowości. Niesamowita jesteś z tym wyczuciem czasu, bo ze swoim postem spadłaś mi jak z nieba! ;)
    Rady naprawdę pomocne, dla takiego laika jak ja są po prostu na wagę złota. Linków, które zamieściłaś nie znałam, ale zaraz się zabieram do przeglądnięcia, dziękuję! :)

    OdpowiedzUsuń
  23. Niezwykle ciekawy wpis. Właśnie dzisiaj dopracowałam nowy szablon na blogu, więc tematycznie moja wielka zmiana z twoim postem pasuje. Pozdrawiam!

    OdpowiedzUsuń
  24. Jesteś kopalnią wiedzy o blogach:) Zazdroszczę ci tej swobody w poruszaniu się w tych technicznych sprawach, bo ja zawsze jestem przerażona, gdy muszę coś w tej kwestii zrobić. Zazwyczaj zdaję się na siostrę;) Chyba większość twoich porad jest u mnie zastosowanych, prawda? Moje mirabelko może i są nieco pstrokate, ale nie umiem się z nimi rozstać i narazie nie planuję zmian tła. Może kiedyś zmienię szablon, bo ten nie do końca mi odpowiada, ale to jeszcze kwestia przyszłości. Choć muszę przyznać, że mnie trochę zainspirowałaś do zmian, a przecież niedawno zmieniłam nagłówek i powinno mi to wystarczyć;)

    OdpowiedzUsuń
  25. Genialny wpis! Czytałam i patrzyłam co powinnam zmienić u siebie, chociaż uwielbiam wygląd mojego bloga ;) Tylko nagłówek mam za duży...
    Podziwiam, że chciało Ci się tak pisać, bo widać, że dużo pracy w przygotowanie tej notki włożyłaś.

    Pozdrawiam, M

    OdpowiedzUsuń
  26. Świetny wpis moja Droga. Niestety jestem ciemna w tych sprawach i chciałabym jakoś zmienić troszkę wygląd mojego bloga, może go ulepszyć, ale no jakoś jakbym do tego się zabrała, to pewnie bym spaprała sprawę :(

    OdpowiedzUsuń
  27. Uwielbiam te twoje wpisy na temat blogów książkowych w praktyce ;)

    OdpowiedzUsuń
  28. No, dużo źródeł, mnóstwo linków, wyczerpujące wypowiedzi - to mi się podoba! :P

    OdpowiedzUsuń
  29. Bardzo pożyteczna ta seria :) w kwestii szablonów to jest noga, totalnie nie umiem sklecić nic na co sama mogłabym popatrzeć przyjaznym okiem, a co dobiera czytelnik.. o.o

    OdpowiedzUsuń
  30. Świetne porady :DD Od razu z nich skorzystałam.
    iclosedmyheartinabook.blogspot.com

    OdpowiedzUsuń
  31. Kolejny świetny i pożyteczny wpis :)

    OdpowiedzUsuń
  32. Wypośrodkowanie u mnie nie działa :(

    OdpowiedzUsuń
  33. Chętnie skorzystam z kodów Hafija's Blogger Design. No i czekam na Nagłówek. :) Dzięki.

    OdpowiedzUsuń
  34. Świetny post! Strasznie dużo można się z tego dowiedzieć. Sama nie raz szukałam w sieci niektórych wymienionych przez ciebie rzeczy i nie będę ukrywać ciężko mi było je znaleźć, a u ciebie wszystkie te najważniejsze zebrane są razem :D Na prawdę świetny pomysł :)

    About Katherine

    OdpowiedzUsuń
  35. Ja tam wolę za bardzo nie grzebać w kodzie, bo się to sypie, a poza tym blogger ma problemy z zapisywaniem. To fakt, że co nieco też zmieniałam i szukałam pomocy na stronie Hafija. A u ciebie podobają mi się te zaokrąglone rogi zdjęć - może się w to pobawię...

    OdpowiedzUsuń
  36. Fajny blog będę tu wpadać częściej :*
    Pozdrawiam!
    http://www.ksiazkiponadniebo.blogspot.com/

    OdpowiedzUsuń
  37. Bardzo przydatne rady :) Lubię czytać twoją nową serię postów. Szablon na swojego bloga robiłam sama i efekt końcowy zawdzięczam tylko i wyłącznie godzinom siedzenia nad HTML ;) Tyle się tego naczytałam, że strony, które polecasz już znam, ale napisałaś to tak fajnie i czytelnie, że z przyjemnością przeczytałam twój post :)

    OdpowiedzUsuń
  38. Ciekawe rady i rewelacyjne stronki :) Niestety ja jakoś nie mam smykałki do takich upiększeń i zmian :( Szybciej skasuje bloga niż go upiększę :(

    OdpowiedzUsuń
  39. Kochana, trafiłam do Ciebie przez przypadek i chyba rozgoszczę się tutaj na dobre :) Ja zaczynam dopiero swoją przygodę z blogiem i bardzo się cieszę, że się tu znalazłam :) Na pewno będę tu zaglądać i nie omieszkam skorzystać z twoich rad, gdyż .... no właśnie... zaczynam tę przygodę i te wszystkie szablony, gadżety, widgety to jak na razie dla mnie czarna magia. :)

    OdpowiedzUsuń

Dziękuję za Twoje odwiedziny. Będzie mi bardzo miło, jeżeli swoją obecność potwierdzisz pozostawionym komentarzem ;)

Related Posts Plugin for WordPress, Blogger...