Blog design #2

Wpis miał ukazać się wczoraj jednak pewna awaria, która zablokowała mnie na całe dwa dni i sprawiła, że nie miałam żadnego sposobu, aby dostać się do Internetu. Dzisiaj kolejny etap upiększania blogów. Z Waszych komentarzy wnioskuję, że kilka z Was dokonało zmian. Cieszę się ogromnie jak czytam, że to co robię komuś pomaga! Dzisiejsze tematy będę kontynuacją pierwszej części. Jak już zmienicie podstawowe parametry zaczniemy przechodzić do szczegółów, które przejrzysty blog zmienią w piękny przejrzysty blog:)

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

SZEROKOŚĆ BLOGA

Z tą ciężko dogodzić wszystkim. Wiele zależy od tego z czego korzystają nasi czytelnicy. Jeśli chcemy być przyjaźni dla większości urządzeń dobrze, aby całkowita szerokość nie przekraczała 1000 pikseli. Przy takim ustawieniu nasz blog powinien w całości mieścić się na ekranach właścicieli netbooków i iPadów. 

Warto się zastanowić jednak, czy grupa naszych czytelników to rzeczywiście użytkownicy takiego sprzętu. W moim subiektywnym odczuciu u mnie nie ma zbyt wielu takich osób, ale wiem, że część z Was czyta mnie czasami na komórce. Przyjęłam więc założenie, że nawet niewielkie laptopy mają rozdzielczość przynajmniej 1280x800 pikseli. Dlatego całkowita szerokość mojego bloga to 1260 pikseli (musi zostać jeszcze miejsce na boczny pasek przewijania). Dla użytkowników telefonów udostępniłam wersję mobilną mojej strony, aby łatwiej było ją przeglądać. (Rozchodzi się o to, aby nie trzeba było przesuwać suwaka wzdłuż szerokości bloga, aby zobaczyć go całego. Korzystając czasami z małego laptopa dość często się z tym spotykam.)

Szerokość paska bocznego powinna być na tyle duża, aby zamieszczone w niej elementy były czytelne. U mnie jest to 340 pikseli, ale dodam, że to sporo i zazwyczaj wystarczy wartość między 200 a 280 pikseli. Zawartość paska bocznego natomiast to długi temat, który omówię w osobnym poście.

Jak sprawić, aby czytelnicy korzystający z komórki mieli do dyspozycji wersję mobilną?

Wystarczy wybrać "Szablon", kliknąć w kółko zębate pod widokiem "Na komórkach" i zaznaczyć kropeczką "Tak, na urządzeniach przenośnych pokazuj szablon w wersji mobilnej"

Jak zmienić szerokość bloga i paska bocznego?

Wybieramy Szablon>Dostosuj>Dostosuj ustawienia szerokości i za pomocą suwaków ustawiamy pożądane wartości.

KATEGORIE

Dalsza część posta będzie m.in odpowiedzią na pytanie zadane ostatnio przez Joanne Dikl.

"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;)"

Chodzi mi o kategorie widoczne zaraz pod banerem. Pomagają w nawigacji. Czytelnik szybko może zorientować się o czym piszemy, a jak jakaś kategoria go w szczególności zainteresuje to bez przegrzebywania całego bloga może przeczytać wszystkie posty z nią związane. Kategorie, które odsyłają do konkretnych postów to nic innego jak gadżet "etykiety" przeniesiony pod baner (wygląda wówczas inaczej niż umieszczony na pasku bocznym). W tym miejscu możemy też dodać strony statyczne, które wcześniej stworzymy, jednak wtedy zawartość każdej ze stron musimy w całości stworzyć od nowa. Z tego powodu strony radzę wykorzystać w innych celach.

Ważne jest, aby kategorii nie było dużo. Warto zastanowić się nad zgrupowaniem kilku w jedną jeśli mamy ich zbyt wiele. Jeśli do tej pory dodawałaś etykiety do postów to nie będziesz miała dużo pracy. Jeśli jednak masz zbyt wiele etykiet lub nie masz ich wcale pracy będzie trochę więcej.

Zanim przejdziesz do poniższych kroków weź kartkę i długopis. Zastanów się na jakie główne kategorie można pogrupować Twoje posty i wypisz je. Jeśli wypisałaś długą listę to pomyśl, które kategorie są do siebie podobne. Może "wypieki" i "gotowanie"  wystarczy zamienić na "kulinaria", a "łazienka", "salon" i "przedpokój" na "wnętrza"?

Jak dodać etykiety do nowych postów?

Pisząc nowy post po prawej stronie możemy wybrać zakładkę etykiety. W tym miejscu po przecinku wpisujemy etykiety i zatwierdzamy klikając "Gotowe" Można w tym miejscu wprowadzić ograniczoną ilość znaków więc jeśli wpiszemy za wiele etykiet nie uda nam się zapisać zamian w poście.

Jak dodać etykiety do kilku istniejących postów jednocześnie?

Wyświetlamy listę wszystkich postów i "ptaszkiem" zaznaczamy posty do których chcemy dodać tą samą etykietę.

Klikamy w ikonkę etykiety. Rozwinie się lista już istniejących etykiet wraz z polem, które pozwala dodać nowe. Klikamy w etykietę, którą chcemy dodać do wybranych postów, bądź wpisujemy nazwę nowej i już. To wszystko!

Jak dodać kategorie pod banerem?

Układ>Dodaj gadżet>etykiety

Ustawiamy wszystko jak poniżej czyli wybieramy : "Wybrane etykiety", "Lista" i klikamy "edytuj". Zaznaczamy "ptaszkami" etykiety, które mają się wyświetlać, klikamy "gotowe", a na końcu "Zapisz".

Teraz wystarczy przeciągnąć gadżet "etykiety" pod baner i zapisać rozmieszczenie.

WYGLĄD KATEGORII

Jak już uporządkowałyście kategorie pod względem funkcjonalnym trzeba zadbać, aby wyglądały pięknie, co nie? O to przecież w tym wszystkim chodzi:) 

O wyborze czcionki pisałam ostatnio, więc powtarzać się nie będę. Osobiście lubię, gdy wokół kategorii nie ma ramki i są one wyśrodkowane. Ważne jest to szczególnie, gdy kategorii mamy mało, wówczas grupują się nieładnie tylko z lewej stronie bloga. Tak więc po kolei.

Jak usunąć ramkę wokół kategorii?

Szablon>Dostosuj>Zaawansowane>Akcenty. Kolor obramowania kart wybieramy transparenty.

Jak zmienić kolor tła kategorii?

Użyjcie tej opcji jeśli chcecie wyróżnić kategorie lub zmienić ich tło na takie same jak tło tekstu. W większości sytuacji najlepiej będzie wyglądać takie samo tło.

Szablon>Dostosuj>Zaawansowane>Tło kart

Jak wyśrodkować kategorie?

Szablon>Dostosuj>Zaawansowane>Dodaj arkusz CSS

W okienku wklejamy poniższy kod i jak każdą zmianę zatwierdzamy klikając "Zastosuj do bloga"

.tabs-inner {text-align:center !important;}

.tabs-inner .widget li{display:inline !important; float:none !important;}

Na dzisiaj to wszystko. Macie zadanie domowe, aby zrobić porządek z szerokością bloga, etykietami i kategoriami. Piszcze w komentarzach o czym chciałybyście przeczytać w kolejnych postach z tego cyklu. Od siebie napiszę, że w przygotowaniu mam dla Was post o tym co powinno znajdować się w pasku bocznym i jak te poszczególne elementy przygotować oraz tutorial, który krok po kroku przeprowadzi Was przez samodzielne stworzenie i zainstalowanie widgetu społecznościowego.

Jeśli korzystacie 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.

Więcej nt wyglądu bloga i blogowania znajdziesz w mojej STREFIE BLOGEREK