O szablonach, ich projektowaniu i moich z tym zmaganiach...
czwartek, 20 grudnia 2007

Dzisiaj po raz pierwszy dodawałam szablony na szablon_team. Serdecznie zapraszam, zerknijcie, oceńcie, skorzystajcie. Temat oczywiście zimowy i tak jak napisałam wcześniej jedna nowość. Skoro ja na szablon_team to niech i szablon_team u mnie ale o tym na koniec.

Świąteczne bałamucenie

Po pierwsze niemal kompletna lista zimowo-świątecznych szablonów z szablon_team. Lista dostępna pod zobacz a także w zakładkach przy wszystkich trzech moich świątecznych szablonach. Zobacz »

Po drugie ikony do użytku osobistego ale także do wykorzystania jako favikony. Oczywiście w świątecznym temacie. Zobacz »

Po trzecie osiem moim zdaniem najfajniejszych teamowych szablonów związanych z zimą lub świętami. Dodając moje niebieski i czerwony świąteczny macie top10 grudniowych szablonów wg kate_mac.

Ósemka wspaniałych. Kolejność nieprzypadkowa choć nie nadawałabym jej wielkiego znaczenia. Kliknięcie w obrazek zaprowadzi cię do szablonu.

swiateczny
archiwalna_zima
mimo że żółty i słoneczny to klimat ma bardzo bożonarodzeniowy; trochę naiwny i sielski ale czy nie takie właśnie święta sobie wyobrażamy... niestety kod jest baaardzo stary i wymagałby kilku poprawek rewelacyjny zimowy szablon; mroźny a mimo to bardzo przytulny; wyobrażam sobie że siedzę w głębokim fotelu, za oknem pada śnieg, ja przed kominkiem czytając gazetę a w szklance coś mocniejszego; szablon ma nowy kod, zmiany związane z SEO są w nim uwzględnione
mroz
ciastka
rzeczywiście mroźny szablon; kojarzy mi się z rysunkami szronu na oknach; zmiany SEO nie są w nim wprowadzone ale skoro taisha ogłosiła akcję "szablony wystąp do poprawki" to pewnie i ten się nawinie święta bez zapachu świątecznych wypieków to nie święta; szablon przepyszny; stonowany ale z charakterem, idealny na święta
coco z_mostem
ciepłe kakao zawsze kojarzy mi się z dzieciństwem; przez wiele lat święta zawsze spędzałam z kuzynami na wsi, zimowe szaleństwa gdy masz dostęp do „górek” większych niż ta obok schodów to niezapomniana historia; świetny zimowy szablon zimowy spacer z takimi widokami byłby prawdziwą przyjemnością, bez względu na temperaturę otoczenia; szablon szary ale w najmniejszym nawet stopniu nie jest ponury
choinka
brazowoniebiesko
przejrzysty, prosty szablon; jest w nim zarówno zima jak i święta; na marginesie przyznam się, że sama chciałam skorzystać z tej choinki jest coś niesłychanie radosnego w tych bałwankach; i ta krateczka kojarząca się z pledem też robi przytulne wrażenie; jednym słowem milutko

Autorzy: anonimowo, irytek, taisha, pineska, niuenna

niedziela, 16 grudnia 2007

Kiedyś były tu dwa pierwsze świąteczne szablony. Nie byłam z nich zadowolona więc przy wielkich porządkach przedświątecznych w 2012 roku postanowiłam przekształcić znacznie te pierwsze dwa. Szablon z reniferem dostał nową notkę a ten z choinką opisałam na nowo w tejże starej notce.

szablon świąteczny 01, zielony

Szablon świąteczny 01 - z zieloną choinką,
na starym kodzie, dla blogów na blox.pl. -500px- 


U podstaw tej zmiany znalazło się proste założenie: choinka ma zostać a szablon ma być zwyczajnie ładny. Można to osiągnąć na wiele sposobów, ja postawiłam na biurowy koncept i w części zmienną szerokość. W rezultacie powstał szablon całkiem przyjemny, całkiem wygodny i całkiem łatwy do przekształcenia w coś nie-świątecznego. Jeżeli kogoś interesuje jak wyglądał poprzednio to zapraszam na testowy blog z nową wersją szablonu.

 

Adres szablonu: http://swiateczny01szablonkatemac.blox.pl

fragmenty szablon świąteczny 01

Uwagi o szablonie świątecznym 01 - z choinką
szerokość szablonu auto (740px/960px/1160px)
szerokość kolumny z główną treścią 740px
szerokość pobocznej szpalty auto (170px)
dodatkowe kolumny 1. kategorie
2. treść główna
3. treść poboczna, która automatycznie dzieli się na dwie kolumny
kolor tła białe (#fff) w body beżowe zależne od grafiki (#dbb682)
kolor tekstu czarny (#000)
kolor linków czerwony (#b4030d)
pozostałe kolory niebieski (#1b1464)
krój użyty w notce Georgia
wielkość tekstu notki small (ok 14px)
interlinia w notce automatyczna
maksymalna wielość elementów graficznych w notce 500px (ilustracje się skalują)
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, częściowa transparentność i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3, h4 - kursywa, powiększenie i zmiana koloru na niebieski
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 100%)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie
#menuIkon - górne menu z małymi obrazkami

Pierwsze dwa świąteczne szablony wyszły mi jakoś nieciekawie. Ten pierwszy, zielony z choinką cierpiał na brak koncepcji, był zwyczajnie nudny. Drugi, czerwony z reniferem miał odwrotny problem, za bardzo skupiłam się na koncepcie, na pomysłowym wyglądzie notek i tytułów, który może i był nieco nietypowy ale za to całość była toporna.

Ten z choinką był nudny bo chciałam się inspirować świąteczną kartką, której nigdy nie miałam pod ręką gdy nad szablonem pracowałam. Z tego powodu zawsze odpuszczałam licząc na to, że jak znajdę kartkę to dokończę projekt. Nigdy tak się nie stało. Poprawiając szablon teraz postawiłam sobie trzy założenia wstępne: ma być choinka, ma być bardzo jasno ale przytulnie i ma być to koncept biurkowy.

Wymiana tła dookoła blogawzorek z szablonu świąteczny 01

Szablony świąteczne z natury są bardzo tymczasowe postanowiłam więc zrobić je tak aby można się było pozbyć świątecznych elementów i dalej korzystać z szablonu.

W tle dookoła bloga wyświetla się zwykły, nieświąteczny wzorek nie trzeba się więc go pozbywać ale oczywiście można. Tradycyjnie są dwa sposoby: przez nadpisanie (plik nazywa się bn1_bg.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo poprzez wymianę adresu wywołania w arkuszu CSS (grafika przypisana jest do elementu body).

cyjan grey white magenta

W szablonie jest jeszcze kilka dodatkowych wzorków, których celem jest dodawanie tekstury elementom.

Usunięcie stosu gazet z choinką

Sam tytuł bloga i karteczki pod nim tworzy odpowiedni kod CSS. Elementy maja przypisane wspomniane tło graficzne i są odpowiednio przekręcone. O tym elemencie będzie jeszcze niżej.

Część graficzna tytułu czyli ten stos gazet z choinką i kubkiem herbaty na nim oraz świąteczne kartki z długopisem to jeden plik przypisany jako tło selektorowi odpowiedzialnemu za całość bloga. Tradycyjnie możesz usunąć ten plik albo go zastąpić własnym. Aby zastąpić w szablonie plik z choinką musisz go albo nadpisać w zasobach bloga (plik nazywa się bn1_tea.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo wymienić adres wywołania w arkuszu CSS (grafika przypisana jest do elementu #BlogGlownyBox).

top z 1 szablony świątecznego

Szablon bez tych elementów wygląda równie dobrze więc wystarczy jak je usuniesz ale równie dobrze możesz skomponować własne biurko pamiętając aby zostawić przezroczyste tło.

Miejsce na tytuł bloga

Tytuł bloga jest w tradycyjnej postaci - zwykły tekst z linkiem. Szara i niebieska karteczka pod nim to nic innego jak obrócone elementy - takie transformacje to kolejna z nowości z CSS3. Karteczka na wierzchu to nic innego jak biała tekstura papieru. Jeżeli chcesz to możesz przygotować własną karteczkę i jakimś ładnym, ozdobnym fontem napisać tytuł bloga.

Karteczka ma wymiary 400×247px więc swoją przygotuj też takiej wielkości. Może mieć transparentne tło - w takim przypadku na blogu będzie wyświetlać się na białym. Dodaj swój plik do zasobów bloga.

Teraz wystarczy, że przejdziesz do arkusza stylów (edycja CSS) i odszukasz miejsce w któym opisany jest link tytułu bloga.

#BlogTytulText a {
 width:300px;
 height:207px;
 padding:40px 50px 0;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
 transform: rotate(3deg);
 box-shadow: 0px 1px 6px #666, 50px 50px 100px hsla(0,0%,100%,.7) inset;
 background: #fff url(/resource/bn1_bg_w.jpg) repeat center top;
 display:inline-block;
 color:#000;
 font-size:3em;
}

Pierwszy podkreślony fragment to adres ilustracji w tle. Wstaw tam adres własnego pliku. Pozostałe linijki opisują inne cechy tego elementu: cień, wielkość, transformację a także zmianę elementu liniowego w blogowy. To ostatnie jest o tyle istotne, że jeżeli zechcesz ukryć linkujący tytuł bloga to możesz to zrobić bez obaw. Ukryjesz tylko słowa przestrzeń linkująca pozostanie.

Na koniec tego kodu jest opis koloru i wielkości czcionki. Jednym ze sposobów ukrycia tekstu tytułu bloga jest zmniejszenie rozmiaru kroju do zera i dla bezpieczeństwa nadanie mu koloru tła. Dla tego konkretnego szablonu będą to takie wartości:

 color:#fff;
 font-size:0px;

Ciasteczka obok tytułów notek

Ikonki z ciasteczkami na początku każdej z notek to projekt autorstwa Brainleaf. W szablonie zdecydowałam się użyć cały zestaw i korzystając z możliwości jakie daje CSS3 poprzypisywałam tych siedem ikonek do kolejnych tytułów notek. Jaka ikonka wyświetli się przy jakim wpisie zależeć będzie od tego który to wpis na stronie i czy jest to jedyny wpis danego dnia. 

Trochę technicznego wyjaśnienia kolejności

Zasada jest prosta. Ikonki pojawiają się przy wpisach pod warunkiem, że dany wpis jest pierwszym, drugim, trzecim, itd. elementem w nadym kontenerze. Kontenerem jest cała szeroka szpalta więc pierwszy wpis jest dopiero trzecim elementem (najpierw są kategorie, potem data wpisu a dopiero jako trzeci element szerokiej sam wpis).

Jeżeli nie chcesz świątecznych ciasteczek na swoim blogu to po prostu usuń je z zasobów swojego blogu (skopiowały się tam razem z pozostałymi plikami szablonu). To najprostsze rozwiązanie.

Jeżeli chcesz mieć w tych miejscach inne obrazki to najlepiej nadpisz pliki w zasobach. Ikonki powinny nazywać się tak: bn1_cookie01.png, bn1_cookie06.png, bn1_cookie02.png, bn1_cookie03.png, bn1_cookie07.png, bn1_cookie04.png, bn1_cookie05.png. Jeżeli jednak kopiowałeś szablon kilka razy to ich nazwy wzbogacone zostaną o kolejne cyfry więc najlepiej sprawdź w zasobach blogu (PLIKI).

Menu z ikonkami

I na koniec wspomniane w tabelce ikonkowe menu - dodatek z małymi obrazkami linkującymi do różnych serwisów. Wkrótce zapewne pojawi się tutaj bardzo dokładna instrukcja ale póki co odsyłam na stronę z szablonem. Tam w jednej z notek opisałam ikonki, których serwisów są już w szablonie, jak z nich skorzystać i co zrobić aby dodać jakąś inną.

Co chwilę przybywa nowych serwisów więc próba opisania ich wszystkich czy choćby tylko najpopularniejszych jest z góry skazana na porażkę. W zależności od czasu poprawek opisane przeze mnie ikonki będą nawiązywały do określonych serwisów. Dlatego zawsze najlepiej sprawdzić to w pobieranym szablonie. Zawsze też można w analogiczny sposób dodać opisy nowych ikonek/serwisów.

stylekatemacblox.plsoup.iogooglewordpresspinteresttwitterYouTubefacebookblog.plRSSnewsletter

W tym konkretnym szablonie umieściłam bardzo specyficzne ikonki zawsze jednak możesz wstawić własne.


piątek, 14 grudnia 2007

Nawigacja po blogu na blox.pl jest dla mnie tak oczywista, że trudno oceniać mi jej funkcjonalność. Przez długi czas brakowało pewnych elementów ale odkąd są i odkąd lepiej potrafię wykorzystywać pole na kod HTML niewiele jest rzeczy, których desperacko brakowałoby mi tutaj. Mulitikategorie byłby miele widziane ale równie dobrze w takiej funkcji mogę użyć tagi. Podkategorie też potrafię zastąpić tagami choć nie wiem czy w takim zamyśle są w ogóle postrzegane. Mile widziany byłby jakiś spis treści ale dla osoby cierpliwej i lubiącej kontrolę spis nie jest problemem.

treść poboczna/nawigacja - funkcja

Większość elementów nawigacyjnych znajduje się w wąskiej szpalcie. Dodatkowo w starym kodzie kategorie umieszczone są nad wpisami i jak zawsze stronicowanie jest pod wpisami. Jeżeli treść podzielimy na główną i poboczną to cała nawigacja to nic innego jak treść poboczna. Nawigacja ma służyć czytelnikom w lepszym rozeznaniu się w treści bloga, na bloksie są to: archiwum, o autorze, ostatnie notki, zakładki, tagi, kategorie, wyszukiwarka, stronicowanie, inwencja własna czyli dodatki.

środa, 12 grudnia 2007

Nigdy nie podobał mi się mój znaczek RSS. Był duży kanciasty i mało atrakcyjny. Od połowy października kiedy to robiłam swój pierwszy szablon minęło sporo czasu i myślę, że wreszcie wiem jak powinien wyglądać mój znaczek RSS. Teraz pozostaje mi tylko go zrobić a to trochę czasu zajmie.

Żeby zmazać złe wspomnienia o „bardzo brzydkim guziku” na okres świąteczny pożyczam sobie choinkowy RSS. Decydując się na nowy znaczek wahałam się pomiędzy choinką gdzie RSS jest mały a RSSem w czapce Mikołaja gdzie znaczek jest większy. Wygrała choinka ponieważ po pierwsze komercyjny Santa Claus niewiele przypomina świętego Mikołaja a po drugie Mikołajki już były. Tak więc dzisiaj pojawiła się tutaj mała choinka i teraz czekam na prezenty.

Dla was w prezencie mam odnośnik do 12 świątecznych RSSów zmontowanych przez Denisa Sudilkovsky (Денис Судилковский).

swiatecznerss
The Real Christmas RSS Icons

Do wyboru są ikonki na białym tle (Новогодние иконки RSS белый фон), na czarnym (Новогодние иконки RSS черный фон) i bez tła z przezroczystością (Новогодние иконки RSS прозрачный фон png). Jeżeli nie odpowiada wam ani białe, ani czarne tło to proponuję wersję trzecią ale nie do wklejenia prosto na blog. Pliki z transparentnym tłem są w formacie png a z jakiegoś powodu IE nie wyświetla przezroczystości tego formatu więc takie pliki trzeba przerobić dodając własne tło (albo nie przejmować się kanałem alfa w IE6).

Link do strony z świątecznymi ikonami RSS znalazłam na stronie Smashing Magazine.

Uaktualnienie, grudzień 2009:
nie bardzo mozna pobrać te ikony korzystając z linków na www.ajaxpath.com; znalazłam jednak ciagle aktualne linki na kilku innych stronach tak więc podmieniam je w tej notce; jednak strona z której pochodzą zapisana jest zupełnie innym alfabetem, dla tych którzy go nie znają proponuję alternatywne linki na webaspect.com.ua - ta ukraińska strona również korzysta z nie-łacinskiego alfabetu ale linki do pobierania są po angielsku więc dla niektórych tak będzie prościej

Mogą Cię też zainteresować te notki:

niedziela, 09 grudnia 2007

Nowe szablony są żółte. Jak widać zresztą. Aktualnie myślę o czterech szablonach świątecznych i żółty jest niejako chwilą przerwy. Szablony są proste, przejrzyste i mam nadzieję, że wygodne więc proszę się częstować.

13 szablon żółty 14 szablon żółty

Uwagi techniczne

  • oba szablony są dość szerokie; w przypadku „13 szablonu żółtego” jest to 900px; w „14 szablon żółty” również BlogGlownyBox określiłam jako 900px ale grafika umieszczona w tle zmniejsza nieco przestrzeń optycznie;
  • oba szablony mają bardzo wyraziste nagłówki; są to sporej wielkości grafiki więc ponownie muszę zwrócić uwagę na to, że szablony do najlżejszych nie należą
  • w obu przypadkach polecam archiwum w formie listy; kalendarz oczywiście też jest zrobiony ale dużo lepiej wygląda archiwum w formie listy miesięcy
  • szablony zostały zrobione na podstawie nowego kodu, jako bazę wykorzystałam Kubrick
  • miłego korzystania
piątek, 07 grudnia 2007

Zwinięcie archiwum wydawało mi się bardzo trudnym zadaniem. Nic bardziej mylnego. S.z.y.m.o.n przygotował bardzo dokładną instrukcję, w zasadzie lekcję zwijania, która jest cudownie szczegółowa ale może nieco odstraszać swoim rozmiarem i dokładnością. Składa się z trzech notek:

Zapewniam, że aby zwinąć archiwum nie musisz się niczego uczyć, możesz być tak bardzo odporny na wiedzę jak tylko Ci pasuje i nawet całych wpisów nie musisz czytać.

Zwinięte archiwum

Szymon rewelacyjnie pisze notki więc wystarczy, że przejrzysz wpisy zawieszając wzrok jedynie na nagłówkach - bez problemu znajdziesz trzy niezbędne informacje, które układają się w prostą instrukcję:

  1. pobierz plik skryptu i dodaj go do zasobów (cz.1 Wykorzystanie skryptu na bloksie)
  2. kod wywołania wpisz w polu na dodatki (cz.1 Wykorzystanie skryptu na bloksie)
  3. skopiuj kod css zwijający archiwum (cz.3 Gotowe szablony CSS)

Czyli interesuje cię tylko sam początek pierwszej notki i dwa linki na końcu ostatniej. Jeżeli korzystasz z jednego z szablonów zrobionych przeze mnie to opis wyglądu zwiniętego zapewne jest już dodany i dopasowany do wyglądu bloga. Wystarczy więc, że dodasz skrypt do zasobów bloga a kod wywołania wkleisz w polu na kod HTML.

 

Jeżeli korzystasz z szablonu zrobionego przeze mnie to opis wyglądu zwiniętego archiwum powinien być już dodany do kodu CSS aby się o tym upewnić przeczytaj notkę opisującą szablon, tam w tabeli wpisane są wszystkie dodatkowe rzeczy, które opisałam. Jeżeli fraza zwinięte archiwum z linkiem do szymonowego bloga nie pojawia się to zapewne dodatek ten nie jest opisany. Z tego co pamiętam to we wszystkich szablonach na starym kodzie go opisałam ale mojej pamięci daleko do doskonałości więc upewnij się.

skrypty użytkowników, wklejki

Działanie skryptu

Zasada jest prosta: skrypt tworzy listę wypunktowaną, hierarchiczną dzięki czemu będzie można ją zwinąć i ukryć. Skrypt dotyczy jednak archiwum w tzw. starym kodzie a więc jeżeli korzystasz z jednego z szablonów dostępnych na blogu stylekatemac.blox.pl (czyli pisanego na nowym kodzie) to na pewno ten skrypt nie jest opisany bo na nowym kodzie nie działa.

Skrypt zwijający archiwum nie działa na blogach z szablonami na nowym kodzie (new_age).

Archiwum po samym zastosowaniu skryptu nie prezentuje się najlepiej, sam skrypt nie jest odpowiedzialny za kwestie estetyczne ale nie ma się czym martwić bo Szymon tłumaczy jak zacząć czary. 

Przeskocz do części opisującej wygląd ↓

Pora na bardzo dokładną instrukcję

W pierwszej notce opisującej skrypt odszukaj fragment zatytułowany: Wykorzystanie skryptu na bloksie. Umieszczony jest tam zarówno link do skryptu jak i kod wywołujący skrypt do wklejenia na blogu.

testblog skrypt zwijający archiwum na bloksie

  • Pobierz plik blox.archmenu.js i dodaj do zasobów swojego bloga.
    • aby pobrać plik kliknij na linku prawym przyciskiem myszy i wybierz opcję Zapisz element docelowy jako... (Zapisz link jako...) - jeżeli klikniesz lewym przyciskiem myszy to zamiast pobrać otworzysz kod skryptu; w takim przypadku dalej możesz skrypt pobrać poprzez zapisanie strony jako... JScript Script File
    • aby dodać plik do zasobów bloga przejdź do edycji bloga, otwórz menu PLIKI i naciśnij przycisk Nowy plik; odszukaj pobrany skrypt i dodaj go do zasobów; możliwe, że blox pokaże ci komunikat, że plik nie został dodany bo nie jest grafiką - to nieprawda, plik jest już w zasobach
  • Wywołanie skryptu sprowadza się do umieszczenia w polu na kod HTML następującego wpisu
    • skopiuj cały podany tam kod, każdy znaczek jest ważny
    • wklej go w polu na dodatkowy kod HTML; w zasadzie nie ma większego znaczenia czy wkleisz go na początku czy na końcu istotne jest jedynie abyś nie wkleił go w środek jakiegoś innego kodu

Gotowe. Skrypt jest na blogu i powinien zamieniać twoje archiwum w nie całkiem ładną listę wypunktowaną. Pora na wygląd.

Wygląd zwiniętego archiwum

W trzeciej notce, na sam koniec Szymon podaje dwa linki do szablonów. Są to fragmenty szablonowego kodu opisujące właśnie to zwinięte archiwum.

Gotowe szablony CSS

Wystarczy otworzyć link, skopiować treść i wkleić na końcu własnego arkusza CSS. Archiwum od razu zostanie odpowiednio zwinięte. Jest to bardzo prosty opis wyglądu, większość kodu dotyczy ułożenia elementów i jedyne wyglądowe rzeczy to opisy kolorów: czarnego i białego.

poziome archiwum pionowe archiwum

Możesz więc zostawić opis wyglądu tak jak jest albo zastąpić opisy kolorów: black i white.

Ja preferuję poziome archiwum więc takie umieszczam w moich szablonach. Zazwyczaj ograniczam się jedynie do zmiany kolorów więc zapewniam, że dostosowanie wyglądu archiwum do reszty szablonu jest banalnie proste.

Zwinięte archiwum, pozioma lista lat

Pora na konkretny przykład. Dopasować trzeba tylko te fragmenty kodu, które dotyczą koloru. Reszta jest bardzo elastyczna i sama dostosuje się szablonu.

Kod od Szymona »

#nav ul - tutaj możesz opisać kolor tekstu lat a także tło i ramkę dla rozwiniętej listy miesięcy
#nav li:hover, #nav li.over - generalnie kolor tekstu po najechaniu na rok
#nav a - linki czyli w zwiniętym archiwum tylko lista miesięcy, która widoczna będzie dopiero po najechaniu na rok
#nav a:hover - linki na liście miesięcy po najechaniu kursorem

Dopasowując kod Szymona do wyglądu szablonu na tym blogu wprowadziłam kilka kolorystycznych zmian i właśnie w tym miejscu proponuję wprowadzać zmiany:

#nav ul {
    border: 1px solid #DCD3C9;
    background: #EBE2D1;
}
#nav li {
    color: #D71149;
}
#nav li:hover, #nav li.over {
    color: #B52A51;
}
#nav a {
    color: #D71149;
}
#nav a:hover {
    color: #B52A51;
}


Przykłady z istniejących szablonów

Zwinięte archiwum z szablonu lucifix szablon: LUCIFIX

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym tle otoczona delikatnym cieniem

style: skopiuj kod

 

Zwinięte archiwum z szablonu kultivatingszablon: Kultivating

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym ozdobionym wzorkiem z czarnych kropek

style: skopiuj kod

 

Zwinięte archiwum z szablonu inspirationszablon: Inspiration

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym tle otoczona delikatnym cieniem
  • miesiąc po najechaniu zyskuje czarne tło

style: skopiuj kod


Podsumowując zwijane archiwum to nie taka trudna sprawa. Dzięki gotowym CSSom i wyjaśnieniom zwinięcie archiwum to kwestia chwili. Tak więc Szymonowi dziękuję za bardzo użyteczne czary.

środa, 05 grudnia 2007

Zmiany na bloksie zachodzą co jakiś czas. Nowe rzeczy są dodawane, pewne funkcjonalności czy elementy zmieniają się co nieco. Nie wszystko zawsze mi się podoba, do pewnych zmian muszę przywyknąć by je docenić. Czasami zmiany są na lepsze a ja mimo to uważam, że można je było zrobić lepiej. Ta którą opisuje dzisiaj uznaję za niewielką acz niezwykle znaczącą.

edycja blogu -> Wygląd -> Pozostałe -> Optymalizuj szablon pod wyszukiwarki

WYGLĄD - POZOSTAŁE - Optymalizuj szablon pod wyszukiwarki

Wszystkie moje szablony dostosowane są do tych zmian. Proszę więc sprawdzić w edycji własnego bloga czy pole Optymalizuj szablon pod wyszukiwarki jest zaznaczone. Nie jest to coś niezbędnego ale zapewniam, że chcesz aby Twój szablon był zoptymalizowany pod wyszukiwarki nawet jeżeli na wejściach z wyszukiwarek Ci nie zależy albo Twój blog zamknięty jest dla szerokiej publiczności. Zmiany poza tym że są pod wyszukiwarki są też dla użytkowników: tytułowi notki na stronie głównej dodają link.

W rozwinięciu notki znajdują się informacje na temat zmian jakie wprowadza optymalizacja, jak ją włączyć i jak się to będzie miało do wyglądu szablonu.

Zmiany jakie przynosi włączenie optymalizacji

Co zyskujesz dzięki przełączeniu na zoptymalizowany kod?

  • Przede wszystkim tytuły notek staną się linkami. zobacz zmiany w kodzie
  • Jeżeli boks z linkami do dziesięciu najnowszych notek jest włączony to będzie się także wyświetlał na stronie z pojedynczą notką i stronach statycznych.
  • Po wybraniu kategorii nad tytułem pierwszej notki pojawi się nazwa wybranej kategorii.
  • Dodano tagi hierarchicznych nagłówków w kodzie html. Jest on teraz bardziej zrozumiały dla wyszukiwarek i podkreślone zostały kluczowe elementy na blogu.

Włączanie optymalizacji

Zaczynając od zera tradycyjnie proponuję przejść na stronę główną blox.pl, zalogować się do swojego bloksowego konta, wybrać blog w którym będzie się włączać optymalizację i przejść do jego edycji.

Następnie należy przejść do edycji wyglądu i wybrać część zatytułowaną POZOSTAŁE.

WYGLĄD - POZOSTAŁE - Optymalizuj szablon pod wyszukiwarki

Otworzy się niewielkie menu z duperelami. Ostatni na liście (trzeci) jest wybór włączenia (bądź nie) optymalizacji. Należy zaznaczyć opcję tak i kliknąć zapisz. ZROBIONE.

Optymalizuj szablon pod wyszukiwarki: TAK

Optymalizacja a szablon bloga

Wszystkie moje szablony są dostosowane do zmian SEO. Stare są poprawione, nowe robione już z pełnym kodem. Powinny się równie dobrze wyświetlać z włączoną optymalizacją jak i bez niej.

Jeżeli jednak korzystasz z szablonu zrobionego przez kogoś innego albo zdecydowałaś się pobrać szablon, który okazał się mocno stary ale poza brakiem opisu niektórych elementów jak najbardziej ci odpowiada to po dokonaniu optymalizacji zwróć uwagę na te rzeczy i ich opis w szablonie.

Tytuł bloga

  • Tytuł bloga opisany jest przy selektorze #BlogTytulText
  • Dodanie w HTML h1 sprawia, że słowom tytułowym przeglądarka dodatkowo przypisuje margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:2em;)
    • Aby zneutralizować powyższe opisy należy użyć kombinatora
      #BlogTytulText h1 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
  • Tytuł bloga jest linkiem więc ewentualny kolor tekstu należy określać przy kombinatorze uwzględniająym odwołanie do znacznika linku, np. takim: #BlogTytulText a

Tytuł wpisu

  • Tytuł wpisu opisany jest klasami .BlogWpisItemTytul (na stronie głównej) i .TytulKomentowanegoWpisu (na stronie z pojedynczą notką).
  • Dodanie w HTML znacznika linku a na stronie głównej i znacznika nagłówka h2 na stronie z pojedynczym wpisem powoduje pewne zmiany. Linki mają zazwyczaj inne kolory niż zwykły tekst więc i tytułowi zostanie on przypisany (color). Tytuł drugiego rzędu natomiast ma dodany dodatkowy margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:1.5em;)
    • Aby zneutralizować opisy nagłowna na stronie z pojedynczym wpisem należy użyć kombinatora
      .TytulKomentowanegoWpisu h2 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
      
    • Kolor linku tytułu notki na stronie głównej można zmienić przy kombinatorze
      .BlogWpisItemTytul a {
      color:crimson;
      }
      

Etykieta kategorii

  • Pojawia się dopiero wraz ze zmianami więc jej wygląd będzie niemal czysto przeglądarkowy: dodatkowy margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:1.75em;).
    • Proponuję najpierw opisać wg uznania wygląd elementu, przykładowo tak:
      #BlogKategorieWybranaTytul {
      font-size:1.2em;
      text-align:right;
      padding:1em;
      }
    • A następnie zneutralizować niepotrzebne dodatki przeglądarki:
      #BlogKategorieWybranaTytul h3 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
      

Boks z ostatnimi notkami na stronie z pojedynczą notką

Najwięcej problemów sprawić mogą ostatnie notki. Nie ma jednej prostej recepty na zapobieżenie ewentualnej katastrofie. Przede wszystkim problemu może w ogóle nie być. Najbardziej ogólne rozwiązanie to maksymalnie możliwa zgodność #SkomentujWazkaSzpalta z #BlogWazkaSzpalta.

  • #SkomentujWazkaSzpalta będzie znajdowało się zapewne mniej więcej w połowie kodu szablonu. Możesz odszukać ten fragment korzystając z wewnętrznej wyszukiwarki przeglądarki (Ctrl+F). Jeżeli jego opis jest taki sam jak #BlogWazkaSzpalta to zapewne nie będzie problemu. Zawsze możesz skasować cały opis #SkomentujWazkaSzpalta a selektor dopisać po przecinku obok #BlogWazkaSzpalta. Przy takim rozwiązaniu opis wąskiej szablony będzie dotyczył zarówno tej na stronie głównej jak i na stronie z pojedynczą notka.
  • Może być też tak, że wąska szpalta na stronie z pojedynczą notkę będzie potrzebowała własnego opisu, innego niż na stronie głównej. W taki przypadku opis dodaj tylko przy
    #SkomentujWazkaSzpalta {
    }
    

Jeżeli potrzebujesz bardziej skrótowego opisu albo wystarczy ci sam kod bez większych wyjaśnień to polecam notkę: Zmiany na Blox. Jest ona sumą porad eskey'a i s.z.y.m.o.na i moich własnych zmagań i doświadczeń z kodem. Oczywiście na bloksowej wiki również jest fragment na ten temat: Zmiany szablonów pod SEO.


Notki na podobne bądź powiązane tematy:

niedziela, 02 grudnia 2007

Staram się aby w niedzielne popołudnie pokazać wam szablony z których możecie skorzystać. Staram się aby były one zrobione przeze mnie. Staram się… Dobra mniejsza z tym o co się staram i tak nie zawsze mi wychodzi.

Dzisiaj w „linkowisku” zamiast katalogu szablonów robionych przez jedną osobę prawdziwa gratka – dwa szablony, każdy innego autorstwa. Każdy posiada inne zalety i co innego jest jego specjalnością. Oba za to są unikatowe i jedyne w swoim rodzaju. Polecam gorąco.

Na pierwszy ogień s.z.y.m.o.n i jego szablon z szablonowni.

szablonownia

Szablon jest prosty, elegancki i nowoczesny. Jasne tło, ładnie oddzielona wąska szpalta, spokojne kolory i mój ulubiony Trebuchet MS. To co najbardziej spodobało mi się w tym szablonie, gdy go pierwszy raz zobaczyłam, to sposób wyświetlania kategorii, wypozycjonowane nad tytuł. Szablon ładuje się szybko, nie posiada wielu „ciężkich” grafik i do tego jest jeszcze prawostronny. Niemal doskonałość. Szablon w użytkowaniu jest bardzo intuicyjny co jak najbardziej należy zaliczyć na plus. I na koniec mały smaczek pięknie, wyraźnie zaznaczone miejsce z RSS.

 

Mój drugi dzisiejszy szablonowy gość to „Liściasty” autorstwa deireadh.

liściasty

Szablon ten posiada swój własny, unikalny charakter. Nie każdemu on w smak będzie ale podziwiać każdy może. Mimo tak wyraźnej osobowości szablon zachowuje pewien stopień ogólności dzięki czemu może być wykorzystywany na przez wielu różnych blogerów na blogach o różnej tematyce. Pięknie dobrane kolory, jasne tło, prosta czcionka. W kontekście mojego ostatniego wpisu o czcionkach na uwagę zasługuje fajne połączenie różnych czcionek, zarówno tych posiadających szeryfy jak i tych prostych bezszeryfowych.

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...