czwartek, 20 lutego 2014

Jak uporządkować pasek boczny na blogu?

To już drugi czwartkowy post z poradami dotyczącymi bloggera. Mam nadzieję, że wyrobiłam w sobie juz tyle systematyczności, by stworzyły one cotygodniowy cykl.
Dzisiaj czas na pasek boczny, pasek widgetów czy jakkolwiek chcecie go nazwać.

Od razu powiem - nie jestem fanką układu z trzema kolumnami - zwykle blogi mają szerokość całkowitą ok. 1000 pikseli, a jeśli zastosujemy 2 paski boczne, powiedzmy po 250 pikseli każdy, na zdjęcia zostaje nam wąziutka kolumna - mniej niż 500 pikseli (bo jeszcze marginesy pomiędzy!), a takie zdjęcia na pewno nie zaprezentują w pełni tego, co chcemy pokazać.
Sporo blogów zrezygnowało w ogóle z bocznych pasków, ale w przypadku branży robótkowej moim zdaniemnie ma to sensu - lubimy nasze paseczki z postępem prac, linki czy blogrolle i nie ma powodu do rezygnowania.

Jeśli chodzi o położenie paska, szczerze polecam prawą stronę, głównie dlatego, że czytamy od prawej do lewej, czyli wzrok przy czytaniu skacze do lewego boku ekranu, spodziewając się znaleźć tam początek linijki. Jeśli umieścimy tam pasek z kolorowymi gadżetami i dodatkowym tekstem, czytelnik zdekoncentruje się i zmęczy. Oczywiście to tylko rekomendacja.

Aby pasek ładnie wyglądał, trzeba go trochę przemyśleć i uporządkować - plus zastosować kilka tricków, opisanych poniżej. Weź kartkę papieru, ołówek i na bieżąco notuj, co gdzie i jak :)

1. Zawartość
Zastanów się, co chesz umieścić w swoim pasku. Przykłady: rubryka "O mnie", paski z postępem prac, blogroll (ostatnie wpisy z ulubionych blogów), linki (do forów robótkowcyh, fajnych miejsc w sieci), obrazki typu "Twój komentarz dodaje mi skrzydeł" i tym podobne.

2. Grupowanie i kolejność
Teraz podziel kartkę na rubryki i zastanów się, co w każdej umieścić. Połącz ze sobą obrazki, osobne miejsce znajdź dla linków itd.
Blogroll jest osobną funkcją bloggera, więc siłą rzeczy tworzy osobny element/gadżet, podobnie jest z licznikiem wejść. Jednak jeśli chodzi o obrazki czy linki, wstawisz je za chwilę ręcznie, razem i w ładnym układzie.

3. Gotowe gadżety
Nie da się ich konfigurować poza paroma podstawowymi ustawieniami. To wada, dlatego dobrze przemyśl, w którym miejscu paska mają się znaleźć, żeby nie burzyć porządku :) Ciekawym pomysłem jest np. umieszczenie blogrolla na samym dole, pod wszystkimi postami.

4. Gadżet HTML/JavaScript
To jest nasz główny sprzymierzeniec. Poniżej podaję kody, służące do wstawiania linków, obrazków i obrazków będących linkami - wiecie, o co mi chodzi ;)
Wstawianie obrazków:

Wstawianie linków - użyj kodu, albo stwórz wpis próbny, którego nie opublikujesz, i tam skorzystaj z wstawiania linków po czym przejdź do wersji HTML i skopiuj kod.

Obrazek - link:

W gadżecie tym możesz wstawić dowolną ilość materiałów, wystarczy kopiować po raz kolejny kod. Aby przejść do nowej linii, użyj znacznika br - takiego jak na końcu ostatniej ramki.

5. Wyrównanie paska.
Są dwie szkoły - wszystko do lewej, czyli tak, jak nam automatycznie wskakuje, ale ja osobiście wolę drugie podejście, czyli wyśrodkowanie gadżetów do wspólnej osi.
Mozna to zrobić używając znacznika CENTER w gadżetach HTML lub wyśrodkować kolumnę według wskazówek z innej mojej lekcji.


Tyle o porządku i elegancji. O grafikach rozdzielających elementy paska przeczytacie tu.

Jeśli potrzebujecie więcej informacji i wskazówek, dajcie znać :)


I jeszcze ogłoszenie!!!
Kalurah, autorka kaptura Through the Woods, obniżyła do końca lutego cenę schematu na jedyne 0,99$ (czyli 3 złote!) - więc jeśli ktoś jeszcze nie kupił wzoru, teraz ma nadzwyczajną okazję :)
Oprócz tego pojawiła się jeszcze fajna throughthewoodsowa kominiarka dla dzieci, darmowa, i jej tłumaczenie już się pisze :)

JoannoP, głównie chodzi o prezentowanie tutoriali i kolekcjonowanie ich na swoim koncie użytkownika. Zresztą w weekend planuję konkretniejszy wpis na ten temat - ze wskazówkami, jak to zrobić :)
Leno, ale może weny nabierzesz z wiosną? :))
Nev, bardzo się cieszę :)

1 komentarz :

Lena MadHatter pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

no mam nadzieję, chociaż jakoś mi coraz słabiej :-/

Step 7: Then click on the save template.