Witam na Deszczach!


To ja!

Pisarka-amatorka, blogerka, mądrala, marzycielka. Jestem Alicja. Może się poznamy?


Czego szukasz?

Więcej mnie

  • zbyt bajkowo
  • Blog z opowiadaniami, gdzie znajdziecie teksty własne oraz fan fiction (Harry Potter, Percy Jackson, Disney i inne). Serdesznie zapraszam :).
  • Chasing Barbie
  • Blog, na którym dzielę się moją nową pasją - lalkami. Nowe, stare, piękne i brzydkie, na chwilę i na całe życie - wszystkie przeżyją tu swoje 5 minut.

Zostańmy w kontakcie!


Subskrybuj, lajkuj, followuj!



środa, 10 sierpnia 2016

Budujemy blog - krok po kroku dla zielonych

Kiedyś poproszono mnie o więcej postów technicznych. Jestem trochę zielona, jeśli chodzi o te wszystkie CSS i HTML i w ogóle to wszystko, ale rozglądając się po blożkach zdaję sobie sprawę, że choćby i mój (znikomy) poziom wiedzy znacząco mógłby poprawić to i owo. A ponieważ jest dobra okazja (nowy, sprawny szablon!) przyjrzymy się budowaniu bloga krok po kroku, kiedy nic nie ogarniasz.
Dla większość z was ten post będzie przeraźliwie nudny, ale kieruję go do osób, które nigdy nie spróbowały samemu rozgrzebać bebechów swojego blożka i jeszcze trochę się boją, ale chciałyby. Mam nadzieję, że uda mi się zachęcić was, że to nic trudnego - może czasem tylko frustrującego.

KROK 1 - INSPIRACJA

Nie jestem zwolenniczką rozrysowywania sobie całego bloga z prostego powodu - nie jestem w stanie zrealizować wszystkich swoich pomysłów i nawet dziełom mojego życia brakuje wiele do tego, o czym marzyłam. Jak będę duża i bogata, będę mieć ludzi od realizowania moich zachcianek. Teraz muszę opierać się na intuicji, tutorialach i szczęściu, co może dawać imponujące efekty, ale jednocześnie wiąże ręce. Dlatego raczej korzystam z pomysłów innych niż konstruuję własne giganty z kodu. Jest kilka fajnych stron z darmowymi tutorialami dla Bloggera (helplogger - mój ulubiony, przy nowym szablonie korzystałam też z icanbuildablog), gdzie można bezkarnie podpatrywać fajne rozwiązania. Zarówno kafelki z poprzedniego szablonu (cholernie niewygodne na Bloggerze), jak i obecne wyczesane menu pochodzą z helplogger. Ten blog jest cudowny i dla mnie nieoceniony. Znajdź więc swoich faworytów i podpatruj u nich nowych rozwiązań, które wymarzysz sobie na własnym blogu. Mogą to być też blogi nietoturialowe, ale w świecie kodów też istnieją prawa autorskie. Jeśli komuś bezczelnie ukradniesz fragment kodu, to nie zdziw się, jeśli się oburzy - słusznie. Nawet te darmowe tutorialowe rozwiązania powinno pobierać się u źródła. Z czystej przyzwoitości dla twórcy oraz ponieważ spersonalizowanie pewnych elementów mogło niektórym napsuć krwi i zająć cały dzień *tak, mówię o sobie*.

Po przejrzeniu kilku fajnych blogów, otwórz sobie w kartach wszystkie rozwiązania, z których chcesz skorzystać albo wydają się fajne. Być może w praniu wyjdzie, że z części trzeba będzie zrezygnować, ale teraz cię to nie obchodzi. Zaszalej!

KROK 2 - GRAFIKA I KOLORY

Osobiście zaczynam od grafiki - bez znaczenia czy robisz po prostu logo (polecam jednak zrobić to w formie obrazka - większa pewność, że będzie wszystkim wyświetlać się prawidłowo), czy ogromny nagłówek, na który narzucisz milion efektów, dwa zegarki, schody, Malfoya i Topaz (modny kiedyś efekt, który wszystkim wychodził uszami po tygodniu - też go kiedyś miałam, a co!) - warto mieć to szybciej. Potem do tej grafiki dobieram kolory. Kolory zapisz sobie w jakimś dokumencie, bo nie ma nic bardziej wkurzającego niż szukanie ich potem po obrazkach i zakładkach. (Przykład: kolor główny na WD - #14534e).

Jak już sobie przygotujesz swoje elementy graficzne (na razie możesz tylko te główne, jakieś bajery możesz sobie zostawić na potem), otwórz panel Bloggera i zacznij robotę. Najlepiej budowanie zacząć od pustego szablonu Simple Black. Jest najprostszy. Nie przejmuj się niczym na ten moment, zadbaj tylko o to, żeby mieć kilka podglądowych postów - jeśli pracujesz na blogu testowym możesz zimportować zawartość bloga głównego. Wierzę, że nagłówek umiesz wstawić. Jeśli decydujesz się na duże tło obrazkowe (to jest jeszcze modne?), tutaj jest fajna instrukcja.

KROK 3 - OGÓŁY

Wstępnie ustaw sobie układ, szerokość, czcionki i ich wielkość, kolory. Za pół godziny pewnie to zmienisz, ale będzie wygodniej pracować. Możesz też porozmieszczać sobie gadżety, ale ja to sobie zostawiam na koniec. Wyśrodkuj nagłówek, jeśli wyśrodkowany ma być na przyszłość. Ustaw zakładki (no chyba że ich nie chcesz).

KROK 4 - MAGIA

Po kolei i z rozwagą wykonujesz tutoriale. Nie denerwuj się i podchodź do tego na chłodno. Czytaj ze zrozumieniem i nie przeskakuj niczego, bo możesz się przejechać i zmarnować cały dzień na naprawianiu błędu, który powstał tylko dlatego, że ustawiłaś bloga jako prywatnego (tru stori z dzisiaj). Jeśli ciśnienie ci skacze - zrób sobie przerwę. Dbaj o porządek w kodzie i jeśli nie za bardzo orientujesz się w tych wszystkich parametrach, zmieniaj jedną wartość naraz, sprawdzaj efekt i albo wróć do poprzedniego stanu, albo zapisuj, bo się udało. Spróbuj uczyć się na bieżąco, co za co odpowiada, bo może się jeszcze przydać. A, właśnie, korzystaj z podglądu i backupów. Może się okazać, że trzeba będzie wywalić pół kodu, bo coś się popsuło, więc na pewno poczujesz się lepiej, jeśli będziesz mieć po prostu poprzednią wersję w zapasie.

Ważna jest kolejność - zacznij od rzeczy największych, takich, na których najbardziej ci zależy, najbardziej skomplikowanych. Logiczne, żeby najpierw zadbać o szczególny układ postów czy menu, a dopiero potem o obrazki zamiast napisu "Starszy post". Jeśli jesteś równie zachłanną osobą, co ja, część z tutoriali odpadnie w praniu, dlatego warto sobie zadbać o tę kolejność, żeby nie musieć cofać czegoś, bo jednak wolisz to drugie.

W międzyczasie będziesz musieć zmieniać te wszystkie detale typu szerokość i kolory, bo może się okazać, że potrzebujesz szerszego bloga, żeby kafelki dobrze wyglądały, a czcionka jest za duża i nie mieści się w ramce. Nie przejmuj się jeszcze pierdołami typu stopka. To dopiero następny punkt.

Prawdopodobnie blog wygląda teraz jak pobojowisko. Tak ma być. Sprawdź, czy wszystko działa. Przeklikaj się przez całą stronę, bo może się okazać, że ten slider ma się pojawiać tylko na stronie głównej. Poproś znajomych, aby skontrolowali, czy u nich też wszystko wygląda jak należy. Wszystko ok? Świetnie!

KROK 5 - WIDŻETY

To jest ten moment, kiedy dopieszczamy ogólną prezencję bloga. Ustaw sobie wszystko tak, jak chcesz, żeby wyglądało, pościskaj, żeby zmieściło się w kolumnach, wyśrodkuj nagłówki, powiększ tytuły (nie powiększ przypadkiem daty). Przemyśl, czy nie chcesz jakiegoś gadżetu, który wymaga użycia strony zewnętrznej - Facebook, Instagram, Animili? Prawdopodobnie niektóre z twoich widżetów też wymagają użycia tutoriali. To powinno być prostsze niż grzebanie w Javie itd. Po raz kolejny obowiązuje zasada - od ogółu do szczegółu. To też ten moment, kiedy wstawiasz bajery typu tło w gadżetach, ramka do tytułów (automatyczna albo obrazkowa) czy fantazyjne archiwum albo zmieniasz wygląd suwaka. 
Na koniec rzuć okiem jeszcze raz i podopieszczaj już finalnie, na przykład pozycjonując (margin) o tylko jeden piksel.

To też ten moment, kiedy ustawiasz favikonę, o ile wcześniej się tego nie zrobiło, ilość postów wyświetlanych na stronie czy wyłączasz pasek nawigacyjny. Wszystkie te bajery zrobisz w zakładce Układ.

KROK 6 - CSS

Nie ma ładnego bloga, który nie korzysta z CSS. W ogóle nie ma bloga, który nie korzysta z CSS. Kiedy odkrywa się ten piękny świat przeklejania paru znaczków (i dzieją się cuda), łatwo się zachłysnąć. Ale luz. Wierzę w wasz zmysł estetyczny. Nie ma nic złego w nieogarnianiu CSS i przeklejaniu na głupa, ale jest jeszcze większa zabawa, kiedy się te znaczki rozumie (nic trudnego na poziomie nam potrzebnym, serio!). Można uczyć się na bieżąco, po prostu rozkładając to, co akurat wklejacie, na czynniki pierwsze. Łatwizna.
Co można zrobić? No cóż, dodać, usunąć, przerobić. Może chcesz jeszcze wyśrodkować coś albo usunąć separator pod postem albo trzeba minimalnie przesunąć jedną kolumnę? Od tego wszystkiego jest CSS.

Fajne blożki w tym temacie:
Tajemniczy ogród - oferuje spis selektorów i gotowych kodów oraz jest ogólnie kopalnią wiedzy. Polecam się przeklikać.
Land of grafic - dwa spisy gotowych kodów - tu i tu - oraz inne instrukcje.

KROK 7 - DOPIESZCZANIE!

Jeśli jeszcze coś ci nie gra i wymaga kilku drobnych poprawek - najwyższa pora się za to zabrać. Linki powinny być jaśniejsze? Gut, zrób to teraz. Trzeba wyrzucić przyciski udostępniania? Doskonale, najwyższa pora. Jednak nie chcesz tego widżetu? A tu jest zły tytuł? Ostatni dzwonek!
Wszystko wygląda jak należy? Doskonale! Oto twój nowy blog!


No to jak? Zakasuj rękawy i nie bój się tego gąszczu kolorowych literek. Potraktuj to jak wyzwanie, nie jak groźbę śmierci. W najgorszym wypadku zepsujesz bloga, ale tylko na chwilę, bo wystarczy wczytać backup i wszystko działa. Nie ma się co bać.

PS: Nie przyjmuję żadnych negatywnych uwag na temat nowego szablonu. Przyzwyczaicie się :P.



10 komentarzy:

  1. Więc: ogólne wrażenie raczej mieszane ;). Kilka rzeczy robi efekt wow. Jak to rozwijane menu z "o autorce!" Cudne :D. Ale silder chyba troszkę za duży XD. Ale gratulacje i brawa za świetną robotę ;p.

    OdpowiedzUsuń
    Odpowiedzi
    1. Ta, trochę za duży, ale zmniejszenie trochę mnie przerosło :p. Któregoś dnia może jeszcze popróbuję albo całkiem wywalę, jak już mi się znudzi. Na razie wiem tyle, że zawsze chciałam slider, więc mam :v.

      Usuń
  2. Kompletnie nic nie zrozumiałam, ale jestem z ciebie bardzo, bardzo dumna ❤❤❤.

    OdpowiedzUsuń
  3. W wersji na komórkę nie widzę zmiany, ale nowiutkie WD na komputerze wyglądają prześlicznie ^^. <3!

    OdpowiedzUsuń
    Odpowiedzi
    1. Na komórkę nie tykam, bo łatwo spieprzyć, a ta podstawowa jest bardzo praktyczna, ładnie wszystko widać :D.
      Dzięki <3

      Usuń
  4. Szablon podobny do starego, ale nowe menu jest bardzo ciekawe <3
    Post jak dla mnie zadługi, więc przepraszam, że nie przeczytałam całego – jak będę tworzyć bloga, to jednak przeczytam sobie od nowa :) Bardzo fajnie, że pomagasz początkującym
    Pozdrawiam :*
    The Grey Lady

    OdpowiedzUsuń
  5. Fajnie i przejrzyście napisany post. Ja trochę w tych szablonach i CSSie już siedzę i wiem, że wszystko, co napisałaś, to czysta prawda.
    Nowy szablon sobie ogarnę jak tylko wrócę do domu, czyli za kilka godzin :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Dobra, ogarnęłam wszystko. I jestem pod wielkim wrażeniem, szablon jest świetny, wszystko działa i nawet nie chce mi się myśleć, ile nad tym siedziałaś, ale muszę przyznać, że się opłaciło. Jest obłędnie :D

      Usuń
    2. Trzymaj miłość: <3333333333333333333333333333333333
      Dziękuję :')

      Usuń
    3. Słuchajcie się Ali, bo Ala dobrze mówi.
      Łapaj miłość też: <333333333333333333333333333333333333

      Usuń

Proszę o zachowanie kultury słowa i nieprzeklinanie w komentarzach, a także szanowanie innego człowieka i mojej pracy - każdy przejaw hejtu czy opryskliwości będzie usuwany.
Proszę również, żebyś nie spamował i nie podpisywał się linkiem do swojego bloga. I tak nie zajrzę, chyba że odczuję potrzebę dowiedzenia się czegoś o Tobie. Ale wtedy sama znajdę link ;).
Z góry dziękuję :).