Wczoraj pytałam Was na FB o czym ma być dzisiejszy wpis. Jednogłośnie padło na porady w ujęciu ogólnym, dotyczące tego jak blog powinien wyglądać. Wszystko co napiszę poniżej będzie tylko moim zdaniem w temacie blogowej estetyki. Z tą ostatnią jest tak, że każdy czuje je ją inaczej dlatego powiem jeszcze raz, że to bardzo subiektywna lista.
Ten wpis jest częścią cyklu:
BLOG DESIGN #1 - PODSTAWOWE ZASADY
BLOG DESIGN #2 - PODSTAWOWE ZASADY cd.
BLOG DESIGN #3 - BOCZNA KOLUMNA
BLOG DESIGN #4 - PIĘKNE POSTY
BLOG DESIGN #5 - ODPOWIEDZI NA WASZE PYTANIA
BLOG DESIGN #6 - STOPKA POSTA
Zmieniając swojego bloga ważne były dla mnie dwa aspekty. Po pierwsze sama chciałam dobrze się czuć zaglądając na niego. Moje blogowanie cierpiało przez to, że długo nie mogłam znaleźć swojego stylu i pomysłu na siebie. Nie podobało mi się u mnie i nie miałam ochoty tu być. Teraz wchodzę tu jak do świeżo odnowionego mieszkania, którego nie chce się opuszczać. Przestawiam tylko drobiazgi i dodatki. Z przyjemnością przyjmuję gości i widzę, że chętniej do mnie wracają!:)
BLOG DESIGN #1 - PODSTAWOWE ZASADY
BLOG DESIGN #2 - PODSTAWOWE ZASADY cd.
BLOG DESIGN #3 - BOCZNA KOLUMNA
BLOG DESIGN #4 - PIĘKNE POSTY
BLOG DESIGN #5 - ODPOWIEDZI NA WASZE PYTANIA
BLOG DESIGN #6 - STOPKA POSTA
Zmieniając swojego bloga ważne były dla mnie dwa aspekty. Po pierwsze sama chciałam dobrze się czuć zaglądając na niego. Moje blogowanie cierpiało przez to, że długo nie mogłam znaleźć swojego stylu i pomysłu na siebie. Nie podobało mi się u mnie i nie miałam ochoty tu być. Teraz wchodzę tu jak do świeżo odnowionego mieszkania, którego nie chce się opuszczać. Przestawiam tylko drobiazgi i dodatki. Z przyjemnością przyjmuję gości i widzę, że chętniej do mnie wracają!:)
Napisałam jednak, że ważne były dla mnie dwa aspekty. Drugim było to, aby osobom, które do mnie zaglądają było tu dobrze. Dla mnie to oznacza, że nic czytelnika na blogu nie atakuje i nie przytłacza. Całość powinna być przejrzysta, a nawigacja łatwa.
Przyjmijmy, że na tym zakończę przydługi wstęp i przejdę do konkretów co to wszystko dla mnie oznacza w praktyce?
ATRAKCYJNY GŁÓWNY BANER
Dla każdego będzie to oznaczać co innego, jednak chodzi o to, aby wyglądał estetycznie i oddawał gust autora. Świetnie jeśli choć w luźny sposób kojarzy się z tematyką bloga. Czasami sama czcionka potrafi przywołać konkretne skojarzenia, dlatego warto się zastanowić czy np. Comic Sans, aby oddaje nasz styl, a może jest zbyt dziecinna? Radzę również unikać sentencji, cytatów i złotych myśli w tej części bloga. Jeśli są takowe bliskie naszemu sercu lepiej zamieścić je na stronie "O MNIE".
Tworząc baner jego szerokość ustawcie taką samą jak całkowitą szerokość bloga. Wysokość lepiej, żeby nie przekraczała 400 pikseli, przy czym skłaniałabym się do wartości bliższej 300 pikselom. Nie powinno być tak, że czytelnik otwierający bloga widzi jedynie baner. Dobrze, aby widok sięgał przynajmniej do tytułu pierwszego posta.
Z czystym sumieniem mogę polecić Wam prostą stronę picmonkey.com. Nie musicie nic ściągać, ani instalować. Wiele ułatwia, ma sporo ciekawych grafik, czcionek i ozdobników (tylko z nimi nie przesadźcie). Sama często z niej korzystam w połączeniu z Photoshopem, jednak sama w sobie jest wystarczająca w większości przypadków.
Tworząc baner jego szerokość ustawcie taką samą jak całkowitą szerokość bloga. Wysokość lepiej, żeby nie przekraczała 400 pikseli, przy czym skłaniałabym się do wartości bliższej 300 pikselom. Nie powinno być tak, że czytelnik otwierający bloga widzi jedynie baner. Dobrze, aby widok sięgał przynajmniej do tytułu pierwszego posta.
Jak zrobić baner?
TŁO TEKSTU
W większości sytuacji będę polecać białe tło, ewentualnie inne, ale jednak jasne. Dlaczego? A to dlatego, że oko duże lepiej toleruje ciemny tekst na jasnym tle. Nie męczy się tak szybko, a przecież nie chcemy, aby czytelnik opuścił stronę z tego powodu. Często może to zrobić nawet nieświadomy, że to jest przyczyną!
Szablon>Dostosuj>Zaawansowane>Tła i ustawiamy kolor w "Główne tło" i "Tło nagłówka"
Jak zmienić tło za tekstem?
CZCIONKA
Koniecznie taka, która ma polskie znaki. Bez tego nasze ą, ę i inne ł są wstawione z innej czcionki i cały tekst nie wygląda harmonijnie.
Do ogólnego tekstu strony (czyli np. treści postów) warto używać prostych czcionek i podarować sobie te, które np. naśladują odręczne pismo. Dlaczego? A no dlatego, że mimo iż ładnie wyglądają to na dłuższą metę nie czyta się ich komfortowo, a przecież bloga nie tworzymy tylko dla siebie. Nie wymienię wszystkich czcionek, które się nadają do ogólnego tekstu strony, ale powiem Wam, że moje ulubione czcionki dostępne w bloggerze to Cambria (której aktualnie używam), Cantarell i Consolas.
To o co należy także zadbać to wielkość czcionki. Nie musi być ogromna, ale nie piszmy też maczkiem. Wielkość trzeba dopasować do czcionki bo każda w tym samym rozmiarze będzie inaczej się prezentować. Dla wspomnianej Cambri wybrałam rozmiar 17px.
Jeśli podoba nam się bardzo jakaś bardziej finezyjna czcionka to można jej użyć do tytułów postów i/lub gadżetów. Nie zwalnia nas to jednak z zadbania, aby była czytelna i miała polskie znaki.
Szablon>Dostosuj>Zaawansowane. Wybieramy "Tekst strony".
W celu zmiany czcionki w tytułach postów postępujemy analogicznie jak powyżej wybierając jednak "Tytuł posta". Różnica polega na tym, że nie ustawimy tam koloru. Aby to zrobić musimy zmienić kolory linków.
Szablon>Dostosuj>Zaawansowane. Wybieramy "Linki".
Szablon>Dostosuj>Układ i wybieramy taki, który ma jeden pasek z lewej bądź prawej.
Na tym zakończą pierwszą część ogólnych porad blogowych. Za tydzień spodziewajcie się następnej. Będziemy coraz dokładniej zajmować się poszczególnymi elementami. Eksperymentujcie i szukajcie własnego stylu. Może to zająć sporo czasu, ale ostrzegam - to wciąga!
Do tej pory cykl "Żyj Kochaj Twórz: upiększa blogi" pojawiał się w pierwszej części tygodnia. Chcę, aby tradycją stało się, że co poniedziałek, zaglądając do mnie znajdziecie coś nowego w tym temacie. Potrzebuję nowej, krótszej i bardziej chwytliwej nazwy dla tego cyklu. Świetnie jeśli znajdzie się w niej jakieś odniesienie do poniedziałku. POMÓŻCIE!:) Wszelkie pomysły na wagę złota!:)
Jeśli zamierzacie korzystać z moich rad to będzie mi miło jeśli podzielicie się tym zamieszczając u siebie poniższy banerek z linkiem do "Strefy Blogera" (link > http://zyj-kochaj-tworz.blogspot.com/p/strefa-blogera.html ). Może dzięki temu trafią tu też inne blogerki potrzebujące pomocy.
Jak zmienić czcionkę na blogu?
Jak zmienić kolor tytułów postów?
W celu zmiany czcionki w tytułach postów postępujemy analogicznie jak powyżej wybierając jednak "Tytuł posta". Różnica polega na tym, że nie ustawimy tam koloru. Aby to zrobić musimy zmienić kolory linków.
Szablon>Dostosuj>Zaawansowane. Wybieramy "Linki".
UKŁAD BLOGA
W zupełności wystarczy główna kolumna i jeden pasek boczny. Dwa sprawiają, że robi się tłoczno. Wzrok skacze z jednej strony na drugą nie wiedząc na czym się zatrzymać. Dodatkowo jeśli potrzebujemy dwa paski to zachodzi podejrzenie nie mieścimy się na jednym. Jeśli nie mieścimy się na jednym to znaczy, że mamy w nich za dużo dodatków i ich ilość trzeba ukrócić, a niektóre rzeczy przenieść w inne miejsce.Jak zmienić ilość ilość pasków bocznych?
Szablon>Dostosuj>Układ i wybieramy taki, który ma jeden pasek z lewej bądź prawej.
Na tym zakończą pierwszą część ogólnych porad blogowych. Za tydzień spodziewajcie się następnej. Będziemy coraz dokładniej zajmować się poszczególnymi elementami. Eksperymentujcie i szukajcie własnego stylu. Może to zająć sporo czasu, ale ostrzegam - to wciąga!
Do tej pory cykl "Żyj Kochaj Twórz: upiększa blogi" pojawiał się w pierwszej części tygodnia. Chcę, aby tradycją stało się, że co poniedziałek, zaglądając do mnie znajdziecie coś nowego w tym temacie. Potrzebuję nowej, krótszej i bardziej chwytliwej nazwy dla tego cyklu. Świetnie jeśli znajdzie się w niej jakieś odniesienie do poniedziałku. POMÓŻCIE!:) Wszelkie pomysły na wagę złota!:)
Jeśli zamierzacie korzystać z moich rad to będzie mi miło jeśli podzielicie się tym zamieszczając u siebie poniższy banerek z linkiem do "Strefy Blogera" (link > http://zyj-kochaj-tworz.blogspot.com/p/strefa-blogera.html ). Może dzięki temu trafią tu też inne blogerki potrzebujące pomocy.
To nie koniec ogłoszeń parafialnych. Nie byłabym sobą, gdybym nie przypomniała jeszcze o czymś, a mianowicie o Linkowym party. Jest jeszcze klika dni, aby się przyłączyć i dać poznać lepiej!:)
Jutro wyjeżdżam - kontakt ze mną będzie utrudniony, ale możliwy. Proszę Was o wyrozumiałość. Mimo wszystko posty będą się pojawiać bo przygotowałam kilka dla Was w zapasie:)
Jeśli spodobał Ci się ten post podziel się nim i/lub śledź mnie, aby być na bieżąco.
Bardzo przydatny post :). Sama siedzę w grafice już od jakiegoś czasu. Mam pytanie: poleciłabyś jakieś fajne czcionki, coś w stylu tej na skrinie z PicMonkey, z tego tekstu "Kiss the sky"? Lubię takie, a te które znam już mi się znudziły...
OdpowiedzUsuńOdnośnie podobnych czcionek moje doświadczenie jest mizerne więc nic nie polecę. Chętnie jednak dowiem się jakie Ty masz w zanadrzu!
UsuńJestem początkującą blogerką, a wiekiem raczej bardzo dojrzałą osobą. Połowa z tego co napisałaś jest dla mnie czarną magią, o Boże problemem jest zalogowanie się na obserwowanych blogach, ale już kilka pomysłów mi podrzuciłaś. Będę korzystać z pomocy.
OdpowiedzUsuńMinęło niecałe pół godziny od przeczytania Twojego posta, a już mam zupełnie inny blog. Lecę bawić się dalej. Dziękuję.
OdpowiedzUsuńNawet nie wiesz jaką radość sprawiają mi Twoje słowa. Cieszę się ogromnie, że mój wpis był dla kogoś pomocny!:)
UsuńŚwietny wpis. Skorzystałam i wzięłam się za baner, ale na razie taki tymczasowy, bo nie mogłam doczekać się wypróbować polecony przez Ciebie program, tzn. stronę. Ale zmieniać będę nadal i mam nadzieję, że niebawem osiągnę zadowalający efekt, który długo mi się nie znudzi! Dzięki. :) Pozdrawiam, Katarynka
OdpowiedzUsuńP. S. Udanego wypoczynku!
Próbuj aż do skutku chociaż powiem, że ten "tymczasowy" podoba mi się!:)
UsuńBardzo przydatny cykl wpisow. Ja tez zmagam sie z budowaniem wlasnego stylu wizualnego. Pozdrawiam Beata
OdpowiedzUsuńŚwietnie - mam super ściągę. Pięknie dziękuję.
OdpowiedzUsuńJa jeszcze - jako propozycję tematów podam pasek ze stronami.Co zrobić, żeby go rozciągnąć na całą stronę. I jak to zrobić, aby np. okienko "Inspiracje" - pokazywało wszystkie wpisy z inspiracjami a okienko "przepisy" prowadziło do wszystkich przepisów kulinarnych. To coś jak etykiety - ale na górze pod banerem albo z boku;)
Zanotowane!:)
UsuńMój blog został już zmieniony za sprawą Żyj Kochaj Twórz...naprawdę wygląda o niebo lepiej i sama się w nim dobrze czuje. dzięki tej stronie i super właścicielce :) nauczyłam się wielu rzeczy i czynności i teraz sama wiele już potrafię :) ale bardzo chętnie dowiem się jeszcze tego o czym pisała Pani Joanna Dikl powyżej. pozdrawiam i polecam i oczywiście baner wstawiam :)
OdpowiedzUsuńDziękuję za taką rekomendację :)
UsuńI ja mam nowy baner (i nie tylko!) autorstwa Karoliny - właśnie o czymś takim sobie marzyłam :)
OdpowiedzUsuńChyba już to pisałam, ale powtórzę się - Karolka, robisz kawał dobrej roboty!
Co do nowego cyklu... może "Z poniedziałku na poniedziałek wyglądamy lepiej!"? ;)
Aha, chciałaś krócej... no to "Poniedziałkowy lifting"? ;)))
Udanych wakacji!
Dziękuję kochana!
UsuńJa też jestem w trakcie tworzenia bannera głównego, i nie tylko, tych banerków na pasek boczny również:D Mam malutkie pytanko, jak zrobić przezroczysty mały bannerek jak np sam napis ?
OdpowiedzUsuńPozdrawiam !
Pisząc przeźroczysty masz na myśli taki bez tła? Jeśli tak to możesz użyć picmonkey.com. W opcji Canvas Color zaznaczasz ptaszkiem "transparent canvas"
UsuńJeszcze jedno - koniecznie zapisz plik jako .png
UsuńHej Kochana, zrobiłam sobie jesienny banerek. Jest okrągły i chciałabym go wyśrodkować na blogu. Niestety nie wiem jak... Będzie o tym garść informacji?
OdpowiedzUsuńNie będę Ci kazać czekać tak długo:)
UsuńSzablon>Dostosuj>Zaawansowane>Dodaj arkusz CCS> i w okienku wpisz
a) Jeśli obrazem ma być za tytułem i opisem
#header-inner {background-position: center !important; width: 100% !important;} #header-inner {background-position: right !important; width: 100% !important;}
b) jeśli ma być zamiast tytułu i opisu lub opis ma byż za obrazkiem
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}
Strasznie się cieszę, że trafiłam na Twojego bloga! Obok bloga Uli i Hafiji to takie vademecum dla początkujących... Ja zanim udostępniłam komukolwiek swojego bloga siedziałam nad szablonem dobry miesiąc niejednokrotnie klnąc pod nosem jak zrobić to i tamto. Wprowadziłam tyle zmian do ściągniętego szablonu, że boję się zrobić inny, choć bardzo bym chciała, żeby blog wyglądał bardziej przejrzyście i profesjonalnie. Martwię się, że zajmie mi to mnóstwo czasu i nie będę zadowolona z efektu :(
OdpowiedzUsuńPrzyznam, że mnie też kusi jakiś zewnętrzny szablon, ale jakoś nie mogę się zabrać:)
UsuńTylko właśnie... jeśli chciałybyście darmowy, to powiem szczerze, że i tak będzie przy nim mnóstwo roboty... bo się coś rozjeżdża, bo przycina, bo to, bo tamto :/ dodatkowo autorzy zamieszczają informacje o sobie niekiedy na pół strony i nie wolno tego usunąć, bo prawa autorskie :/ i tak lądujesz z fotką jakiegoś azjaty na głównej, a czytelnicy zastanawiają się, czyj blog czytają. Ja chciałam hucznie zmienić swój szablon od nowego roku właśnie na jakiś zewnętrzny i po miesiącu męczarni przeprosiłam się z bloggerowym... Pozostaje mi jedynie namówić kogoś ze znajomych informatyków do pomocy.
OdpowiedzUsuńZ fotką Azjaty na głównej? Co??? :)
OdpowiedzUsuńNoo to :-) akurat ja trafiałam na szablony jakiegoś 18- stoletniego chłopaka, który wrzucał w szablony link do swojego profilu z opisem i fotką :-)
OdpowiedzUsuńAha, do profilu. Ale to się wyświetlało jakoś w powiązaniu z Twoim profilem? Albo jakkolwiek gdzieś w powiązaniu z Twoim blogiem?
OdpowiedzUsuńByło umieszczane na stronie głównej jako reklama autora szablonu.
OdpowiedzUsuńJeśli można jeszcze zapytać ... choć nie wiem czy tutaj ... jak zrobić by nie było szarych boków/cieni po bokach? Szukam, kombinuje i nic :(
OdpowiedzUsuńJeśli chodzi o cienie wokół zdjęć SZABLON>DOSTOSUJ>ZAAWANSOWANE>DODAJ ARKUSZ CSS W okienku wklej:
OdpowiedzUsuń.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Chyba źle opisałam o co mi chodzi :( Chodzi mi o rozciągnięcie bloga, by bo jego bokach nie było szarych pasków. Dziękuje za poświęcony czas.
OdpowiedzUsuńTo powinno być do ustawienia w opcjach dostosowania szablonu, ale to od rodzaju szablonu zależy. Jeśli Ci się nie uda znaleźć to napisz do mnie na e-mail, postaram się pomóc.
OdpowiedzUsuńJest Pani super! Udało się :) Bardzo dziękuje!
OdpowiedzUsuńCieszę się ogromnie:)
OdpowiedzUsuńA Ty używasz któregoś z podstawowych szablonów bloggera? Czy mocno zmieniałaś kod CSS?
OdpowiedzUsuńPierwsze pytanie (chociaż mam ich setki ale spokojnie, nie będę Cie nimi zasypywał) brzmi: jak zrobić żeby wyświetlała się tylko część posta, z opcją np. "czytaj dalej" a nie jego cała treść? Ponieważ potrzebuję jakoś skategoryzować swoje posty a użycie szablonu "dynamiczny" nie załatwia sprawy, ponieważ nie mogę wywalić tego paska nawigacyjnego z napisami " karta, mozaika... itp." i nie można wstawić dużego głównego logo, zdjęcia.
Używam szablonu bloggera, który nazywa się prosty, ale sporo w nim pozmieniałam traktując go jako bazę.
OdpowiedzUsuńAby nie wyświetlał się cały post, należy w jego treści dodać zawijanie tekstu. Wchodzisz w tryb edycji posta, stawiasz kursor tam gdzie widoczność posta na głównej ma się kończyć i klikasz w ikonkę przerwanej kartki (zawijanie tekstu), która znajduje się na belce z narzędziami do edycji tekstu.
Widoki dynamiczne na bloggerze to porażka - wiele rzeczy tam dodatkowo nie działa tak jak powinno. Jeśli chcesz skategoryzować posty to najlepiej dodawać do nich odpowiednie etykiety, a następnie pod banerem dodać gadżet "Etykiety". Dzięki temu czytelnik łatwo znajdzie wpisy z danej tematyki.