Dostosowujemy szablon - Projektant szablonów

Dziś mały tutorial oraz opis możliwości projektanta szablonów. W sieci jest mnóstwo szablonów do blogera - w rzeczywistości nie różnią się one niczym poza grafiką.

Rys.1

Wszystko pozostałe jest na jedno kopyto pisane, ale projektom tym brakuje wielu funkcji i możliwości jakie daje nam projektant szablonów.  Dziś dodamy je do dowolnego szablonu z sieci, a raczej odwrotnie ;) szablon projektanta zmienimy na wzór tego z sieci...
Pisałem już o tym na forum że to nie takie trudne - szablon do dostosowania był banalnie prosty, a samo dostosowanie zajęło mi kilka minut dosłownie - wiec może coś bardziej skomplikowanego.

Zatem... Google: blogger tempalates search i pierwszy wynik z brzegu Tutaj jest DEMO niezbyt skomplikowany ale ciekawy, w sam raz na przykład :)

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Lightbox Image Viewer - przeglądarka zdjęć w naszym blogu

Coraz częściej padające pytanie jak zrobić by nasze obrazy pojawiały się jak w tym blogu - odp. bardzo prosto zainstalować Lightbox Image Viewer

rys.1

Aktualnie można już używać Lightboxa wbudowanego w Blogera. 
Sprawdź jak to zrobić czytając tego posta.

Ale jak? wiec zabieramy się do roboty... Na początku zaglądamy na stronę dynamicdrive.com skąd pobierzemy pakiet lightbox v2.03a rozpakowujemy go i zamieszczamy na dowolnym serwerze FTP - jeśli ktoś niema może skorzystać z mojego ale nie gwarantuje że pliki będą tam wiecznie leżeć :P
Tak więc po publikacji gdzieś na ftp-ie naszych plików dołączamy stosowne wpisy do kodu HTML szablonu
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Poprawek w kodzie kilka ;)

Dziś nie będzie poradnika - pomocy żadnej też nie... czasem trzeba coś zrobić też ze swoim blogiem :) tak więc poprawek kilka w kodzie.

1. wyszukiwarka - poprawka na puste strony gdy nie było wyników w blogu - projekt już dawno napisany na innych blogach tylko w moim nie zwracała wyników wyszukiwania :( wiadomo szewc w ... i tak dalej.
2. ujednolicenie stylów w IE - kilka drobnych poprawek dla IE który nadal nie spełnia standardów CSS.
3. optymalizacja kodu - w celu zmniejszenia wagi :), kilka drobnych korekt tagów, nazw, stylu itp.
4. statystyki - dodany raport graficzny ruchu

w tym blogu to by było na tyle więc teraz kolejny ...
pozdrawiam... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Edytujemy szablon - opis dostępnych edytorów

Jak bezpiecznie edytować szablon aby w razie wynikłych problemów nie stracić całej naszej pracy z blogiem? oraz czego potrzebujemy, czyli słów kilaka o narzędziach przydatnych podczas edycji.

Wszelkie próby edycji należy przeprowadzać za pomocą projektanta szablonów, problem pojawienia się błędu prawie nie występuje, a dostępne opcje w stopniu zadowalającym pozwalają nam na zmianę prawie wszystkich ustawień wizualnych w blogu. Aby jednak z nich korzystać musimy posiadać szablon kompatybilny z projektantem szablonów, a że takowych jest mało w sieci więc wybrać dowolny z projektanta i dostosować.


1. Dodajemy własny arkusz CSS przy pomocy projektanta szablonów.

Opcji projektanta chyba nie ma sensy tutaj opisywać bo interface nie jest bardzo skomplikowany, a praca z nim odbywa się intuicyjnie. Jednak wszystkie jego opcje działają tylko z szablonami przystosowanymi do projektanta.
Opisze więc tylko sposób na dodawanie własnych arkuszy CSS za pomocą opcji Dodaj arkusz CSS

rys.1

Przechodzimy do Projektanta szablonów [rys.1] i klikamy na zakładkę zaawansowane następnie Dodaj arkusz CSS w polu z prawej wklejamy kod stylu oczywiście pomijając tagi <style></style>
w taki sposób dodany styl jest umieszczany automatycznie we właściwym miejscu i zachowuje się podobnie jak umieszczony w gadżecie HTML/JavaScript.
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Nowa strona - Edytor

Piszemy nową stronę na blogu.

rys.1

W interfejsie Bloggera nie ma bezpośredniego odsyłacza do utworzenia pierwszej nowej strony, ot taka mała wpadka programistów. Aby przejść do jej utworzenia musimy kliknąć edytuj strony [rys.1] a następnie utworzyć nową. [rys.2]

rys.2

Strony piszemy podobnie jak posty  w blogu przy pomocy takich samych narzędzi. Blogger umożliwia nam napisanie 10 stron - jeśli nam ich zabraknie wystarczy skorzystać z tej sztuczki aby mieć ich nieograniczoną ilość.

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Test sondy

Sonda w poście - czemu nie...
Poniższa ankieta została usunięta po jej konfiguracji z projektu bloga i jak widać nadal działa. Czyli fizycznie jej nie ma już w projekcie jednak blogger ją sobie zapisuje, a usunięcie nie powoduje automatycznie jej skasowania:) Ciekawe dlaczego?


Czy ten blog jest ci pomocny?


Proszę o oddawanie głosów sprawdzimy jak długo będzie tak pięknie działać. Kod widgeta umieściłem w poście analogicznie do umieszczania widgetu kalendarza

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Szerokość bloga - Projektant szablonów

Projektant szablonów daje nam wiele możliwości personalizacji wyglądu bloga - minn. szerokości. Właśnie dziś się tym zajmiemy. Ustawiamy większą niż 1000px szerokość bloga w projektancie szablonów. Czasami trzeba szerzej :

zatem do dzieła: Wyszukujemy w kodzie HTML szablonu type='length' zobaczymy coś takiego:

<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='200px'/>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

SlideArchiveList

Dzisiaj postanowiłem popracować nad dawno już poruszanym tematem archiwum postów w formie Slidera - efekt mojej pracy widać na pasku obok. Jeśli się podoba lub chcecie kod tego gadżetu to zapraszam do komentowania 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Header Roller efect

Ukrywamy nagłówek bloga - efekt zastosowany w moim blogu pozwalający na ukrycie wysokiego nagłówka w blogu i zapamiętanie tej opcji ustawień dla odwiedzającego.
Mały ale bardzo pomocny efekt oszczędzający nasz czas i rolkę myszy :)

Rys.1

Zasada działania: wpis do cookie odp ustawień oraz ich odczyt na następnych stronach bloga.
Umiejscowienie: dowolne miejsce na blogu - w moim przypadku jest to gadżet strony i jego pierwsza pozycja. [Rys.1]

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Stylizowanie tytułu posta

Mały myk odnośnie zmiany koloru tytułu posta, czcionki itp... - czasami trzeba zaszaleć w jednym z postów, niekoniecznie zmieniając cały szablon. Przepis jak tego dokonać poniżej...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Niespodzianka dla natręta - część II

Jeśli nagminnie kserują twojego bloga wypróbuj Universal Page Coder - czyli kolejne utrudnienie dla ksero-blogerów :)

W pierwszej części podałem sposób na blokadę kopiowania zawartości, tutaj nieco inna metoda ochrony swojej własności.

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Kalendarze Google w poście

Święta Polskie, Święta Amerykańskie oraz kalendarz F1 w jednym kalendarzu - czyli osadzamy kilka kalendarzy w jednym gadżecie w dowolnym poście :) zadanie dość skomplikowane wiec do dzieła...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Styl dla stron

Aby nasze strony automatycznie zmieniały wygląd użyjemy stylu warunkowego osadzonego w szablonie.
W kodzie szablonu wyszukujemy </head> i dopisujemy nasz warunek stylu CSS

<b:if cond='data:blog.pageType == "static_page"'>

<style>

body {background: url(http://www.blogger.com/img/bg_draft.png) repeat center center;} 

</style>
</b:if>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110