Witam wszystkich instruktażu, w którym zrobimy razem szablon od początku do końca. W komentarzu otrzymałam wskazówkę, że już samo rozpoczęcie takiegoż procesu może być pewnym problemem, bo w sumie nikt z nas nie jest uczony w podstawówce, gimnazjum czy liceum (wyłączając informatyczne) podstaw kodowania. Ten poradnik postaram się napisać prostym językiem, załączając zdjęcia, co i jak należy kliknąć. Proszę o wyrozumiałość, gdyż odcinki nie będą pojawiać się codziennie – instruktaż taki jest czasochłonny. W tej części założymy nowego bloga, dobierzemy elementy, nagłówek, ustawimy tła i rozplanujemy przestrzeń. Brzmi, jakby było tego dużo, ale nie zrażajcie się! Głęboki wdech, do dzieła! By powiększyć obrazki: klikajcie na nie.
Wejdź na stronę: blogger.com, następnie kliknij na środku na „Utwórz bloga”. Jeśli masz konto google – zaloguj się, jeśli nie – dołącz do blogosfery, zakładając je. Bez zalogowania się nie da.
Utwórz bloga → wybierz swój adres: np.: stonka.blogspot.com, wpisz tytuł i opcjonalnie opis, co na tym blogu ma się znajdować. Opis nie jest obowiązkowy. Wybierz motyw (polecam „Rewelację” w dowolnej kolorystyce, łatwo się ją edytuje).
Nawet, jeśli masz już bloga, to poćwicz na nowym. Nic się nie zepsuje niechcący. Zresztą... Do dziś wolę tworzyć szablon na osobnym blogu ;).
Założone? Bosko!
2. Przygotowanie szablonu.
Pierwszym, co widzimy, gdy założymy bloga, widok postów. Na razie się tym nie zajmujemy, tylko klikamy w układ (jak na rysunku).
Przekierowuje nas do miejsca, w którym widzimy, jak nasz blog jest zbudowany. W tym miejscu wybieramy dodatki, jakie ma nasz blog mieć, dodatkowo ustawiamy nagłówek. Tym zajmiemy się teraz.
a) Wybieramy grafikę, jaka ma widnieć w nagłówku. Pamiętajmy, że to ona na dobrą sprawę nadaje styl całemu blogowi. Można ściągnąć gotowy obrazek, zrobić w programie graficznym swój własny (to niezbyt trudne, ale wymaga naprawdę wiele czasu) lub zrobić kolaż zdjęć w programie takim jak Gimp, Corel, PhotoShop. Te kwestie pozostawiam już waszej własnej inwencji, ja jednak poszłam na łatwiznę i wykorzystam stary nagłówek. Ważne, by nasza grafika nie była absurdalnie duża, zatem w programie (polecam PhotoScape) zmieniamy wymiary, na szerokość 1000-200px, w zależności od tego, jak duży ten nagłówek ma być. WAŻNE! Nigdy nie powiększamy grafiki! Wygląda wtedy nieestetycznie! W moich szablonach zwykle stosuję rozmiar nagłówka 800px.
Najważniejsze przy doborze nagłówka: rozmiar, jakość, kolorystyka.
Dla ułatwienia, przy nauce, skorzystajcie z tego nagłówka co ja:
(powiększcie i zapiszcie)
b) wgrywamy nagłówek – jak na obrazku (1). Gdy obraz się wgra, wybieramy, jaki ma być rodzaj położenia nagłówka względem tytułu i opisu bloga (2). Korzystam z dwóch pierwszych wariantów, a najczęściej z tego drugiego (Zamiast tytułu i opisu).
3. Dobór gadżetów.
Blogger oferuje nam masę różnych przydatnych, bezsensownych, nielogicznych i interesujących dodatków. Jeśli na naszym blogu ma być pisane opowiadanie, nie potrzebujemy zbyt wielu z nich. Ograniczyłabym się tu do najpotrzebniejszych rzeczy, czyli w przypadku opowiadania będą to: menu główne, w którym możemy zawrzeć takie elementy jak powrót na stronę główną bloga, linki, które polecamy, opis bohaterów, spis treści (nie jestem fanką umieszczania tego w menu, toteż opiszę w instruktażu jak rozwiązać to przyjaźniej dla czytelnika), informacje o sobie, swoich innych blogach oraz – jakże niezbędną w dzisiejszych czasach – zakładkę SPAM; statystyka, obserwowanie; spis treści. W blogu z opowiadaniem więcej nie trzeba. Im mniej, tym lepiej! Czytelnik ma łatwo odnaleźć się na stronie, a zbyt dużo elementów wprowadza zamieszanie.
Teraz usuwamy zbędnie gadżety, czyli w sumie najlepiej wszystko, co znajduje się w kolumnach. Dodamy sobie nowe. By usunąć wybrany gadżet, klikamy na nim „edytuj” a następnie „usuń” w wyskakującym okienku.
Zrobione? Super!
By dodać gadżety klikamy „dodaj gadżet” w kolumnie. Potrzebne nam będą: Strony (gdy ją dodajemy zmieniamy w wyskakującym okienku nazwę na „Menu”, będzie to przydatne w dalszej pracy)., drugi raz Strony (można zmienić tytuł na spis treści, czy coś, ale zwykle tym się nie przejmuję, bo w ogóle nie wyświetlam nazwy. Ale o tym dalej). Drugi gadżet strony posłuży nam za spis treści. Dodajemy Statystykę bloga (dla ułatwienia w instruktażu zaznaczamy pierwszy wariant - cyferki) oraz Obserwatorzy – właśnie to obserwowanie ze wszystkich innych oferowanych w bloggerze.
Powinno to wyglądać tak:
Mamy? To lecimy dalej!
4. Planowanie menu.
Teraz przejdziemy do ustalenia, co właściwie chcemy mieć w menu. W opcjach z lewej strony bloga klikamy na „Strony”, a tam dodajemy kolejne zakładki, tytułując je w wybrany przez nas sposób. Zatytułujmy je: Bohaterowie, Linki, O mnie, Polecam, Spam. By dodać nową stronę klikamy po prostu „Nowa strona”.
Następnie nadajemy tytuł (1) i klikamy opublikuj (2). Wypełnieniem stron tekstem będziemy przejmować się później, teraz robimy szablon. Czynność powtarzamy dodając w ten sam sposób pozostałe strony.
Teraz wracamy do Układu. Tutaj musimy wybrać gadżet opisany „Menu” i jego opcję „edytuj”. Zaznaczamy dodane przez nas zakładki (ustawiają się w kolejności kliknięcia na nie – jeśli chcemy mieć układ, w jakim je tworzyliśmy, zaznaczamy je od dołu). Zapisujemy.
Mamy? No to teraz zajmiemy się naszym przyszłym spisem treści. Klikamy „edytuj” na Stronach (tuż nad Menu). Tym razem użyjmy „dodaj link zewnętrzny” i dodajmy dwa puste linki (wpisujemy tylko nazwę i zatwierdzamy): Rozdział 1 oraz rozdział 2. Zapisujemy. Jest nam to potrzebne do późniejszej edycji tego gadżetu.
Mamy? Bajecznie!
5. Posty na blogu.
Jesteśmy coraz bliżej wyjścia z Układu! Ale najpierw musimy zdecydować się, co chcemy, by wyświetlało nam się pod postem. Na kwadracie Posty na blogu klikamy „edytuj”. Otwiera nam się okienko, w którym zostawiamy tylko elementy, jak na obrazku. Zbyt dużo dodatków to tylko dłuższy kod; są średnio funkcjonalne.
Mamy? Genialnie! Wychodzimy z tego Układu, a fe!
6. Post próbny.
Przechodzimy do zakładki z lewej strony „Posty” i dodajemy „Nowy Post”. W tytule wpisujemy „Zażółć gęślą jaźń” (bo jest to wyrażenie zawierające wszystkie polskie znaki i można wychwycić, która czcionka je obsługuje). W treści posta również wpisujemy to samo, a dalej wklejamy:
Dla ułatwienia skorzystajmy z tego samego obrazka (powiększ, zapisz, wklej do siebie).
Trzecie „Lorem...” ujmujemy w cytację (również w menu bloga; symbol cudzysłowu). Czwarte zostaje, jak jest. W pierwszym „Lorem...” linkujemy wyraz „ipsum” pustym linkiem (potrzebne do edycji linków) Pusty link to link, który prowadzi nigdze. Klikamy na napis link u góry bloga (po zaznaczeniu tekstu) i w miejscu do wprowadzania linku wpisujemy np. a, i zapisujemy. Kolejne trzy wyrazy kolejno: pogrubiamy, pochylamy, podkreślamy, przekreślamy (służy do obserwacji czcionki we wszystkich możliwych wariantach).
Ostatnią rzeczą, jaką musimy umieścić na naszym poście próbnym są etykiety. Służy do tego prawy panel bloggera. Klikamy na etykiety i tam, po przecinku każdy wyraz, wpisujemy: Lorem, Impsum, Dolor, Zażółć. Klikamy zapisz.
Powinno wyglądać to tak:
Tak przygotowany post będzie nam służył już do końca edytowania szablonu.
W tej chwili zrobiliśmy już wszystko, co będzie nam potrzebne z oferty Bloggera. By szablon zaczął wyglądać ciekawie, przejdziemy w część o zaawansowanych parametrach, czyli do nieocenionego i na początku przerażającego CSS'a. Jeśli jesteście gotowi, przejdźcie do drugiej części instruktażu.
Jeśli macie pytania, coś jest niezrozumiałe, z czymś sobie nie radzicie, pytajcie! Możecie pytać pod postem lub napisać na maila (stoneczka.fryteczka@gmail.com), a ja z chęcią wytłumaczę co i jak (o ile będę wiedziała, jak to się robi. Nie jestem wszechwiedząca ;)).
„Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”Jest to przykładowy tekst. Oddzielamy spacją, wklejamy drugi raz → enter; trzeci raz → enter; czwarty raz. Dzięki takiej kombinacji będziemy później mogli ustalić akapity. Zaznaczamy cały tekst i justujemy go (górne menu bloggera). W tekście umieszczamy zdjęcie (wybieramy opcję udostępnioną przez blog, z obrazeczkiem). Umieśćmy je przed drugim „Lorem...” i przesuńmy do prawej strony.
Dla ułatwienia skorzystajmy z tego samego obrazka (powiększ, zapisz, wklej do siebie).
Ostatnią rzeczą, jaką musimy umieścić na naszym poście próbnym są etykiety. Służy do tego prawy panel bloggera. Klikamy na etykiety i tam, po przecinku każdy wyraz, wpisujemy: Lorem, Impsum, Dolor, Zażółć. Klikamy zapisz.
Powinno wyglądać to tak:
Tak przygotowany post będzie nam służył już do końca edytowania szablonu.
W tej chwili zrobiliśmy już wszystko, co będzie nam potrzebne z oferty Bloggera. By szablon zaczął wyglądać ciekawie, przejdziemy w część o zaawansowanych parametrach, czyli do nieocenionego i na początku przerażającego CSS'a. Jeśli jesteście gotowi, przejdźcie do drugiej części instruktażu.
Jeśli macie pytania, coś jest niezrozumiałe, z czymś sobie nie radzicie, pytajcie! Możecie pytać pod postem lub napisać na maila (stoneczka.fryteczka@gmail.com), a ja z chęcią wytłumaczę co i jak (o ile będę wiedziała, jak to się robi. Nie jestem wszechwiedząca ;)).
Brak komentarzy:
Prześlij komentarz