[UPGRADE][Blogger] Podstawy rozbudowy Bloggera

Blogger jak wiadomo nie oferuje dostępu do kodu uruchamianego po stronie serwera, co jest zresztą logiczne, lecz tym samym blokuje nam to możliwość jego rozbudowy jeśli chodzi o nowe funkcjonalności. Mamy za to jednak dostęp do trzech elementów, które nam na jako takie modyfikacje kodu pozwolą. Pierwszym z elementów jest kod samego szablonu, który możemy według własnych potrzeb dowolnie modyfikować, drugim jest dostęp do kanałów RSS generowanych przez Blogggera, z których to kanałów możemy pobierać dane w formacie JSON, trzecim natomiast jest widźet o nazwie HTML/Javascript. Zestawienie tych trzech możliwości pozwoli nam na co nieco zabawy z upgradem Bloggera. Na początek jednak przeprowadzić będziemy musieli kilka modyfikacji.

jQuery

1) Do bloga dołączyć musimy bibliotekę jQuery, o ile oczywiście jeszcze jej nie dołączyliśmy.
Wchodzimy w panelu w Szablon --> Edytuj kod HTML i otwieramy okno wyszukiwania CTRL - F.

Wpisujemy frazę:
[code]</head>[/code]
następnie zaraz przed </head> wklejamy poniższy kod:
[code]<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' />[/code]

Dołączanie nowego kodu

2) Cały kod skryptów z tutoriali umieszczać będziemy w widżecie HTML/Javascript Bloggera. Taki widżet dodamy w panelu administracyjnym w zakładce Układ -> Dodaj gadżet -> HTML/Javascript. Przy okazji napotkamy tutaj już na starcie na pierwszy z problemów, mianowicie - widźet taki umieścić musimy przed elementami, gdzie renderuje się nasze menu, a więc najlepiej zaraz za widżetem nagłówka.
Blogger domyślnie nie pozwoli na takie działanie (w panelu nie będzie takiej opcji - na górze strony widnieje jedynie widźet nagłówka) więc będziemy musieli użyć małego podstępu.
Wejdźmy w szablon naszego bloga - Szablon --> Edytuj kod HTML, kliknijmy na kodzie i wciśnijmy CTRL-F - pojawi się okno wyszukiwania.

Wpiszmy tam szukaną frazę:
[code]<b:section class='header'[/code]
Odnajdziemy linijke wyglądającą następująco:
 [code]
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='NAZWA NASZEGO BLOGA (nagłówek)' type='Header'>
          <b:includable id='main'>
[/code]

Następnie zmieńmy wartości:
- maxwidtgets - na 4
- showaddelement - na yes

Zapiszmy szablon i wróćmy do zakładki Układ - w magiczny sposób od tej pory możemy dodawać nowe widźety za nagłówkiem, dodajmy więc nowy HTML/Javascript.

Jest to absolutnie kluczowe przed zabawą z dalszą rozbudową, tak więc jeśli mamy to już za sobą to zapraszam do następnych artykułów o rozbudowie Bloggera.