Niniejszy artykuł przedstawia w jaki sposób umieścić na stronie niezmienne logo ze zmieniającym się tłem. Obrazek w tle będzie zmieniać się co 10 sekund (ale oczywiście będzie można zmienić). Co najważniejsze rozwiązanie jest oparte całkowicie na javascript, a nie dodatkowych dodatkach. Czyni to rozwiązaniem, które zadziała w każdej przeglądarce.
Chociaż proces ten jest całkowicie bezpieczny. Warto przed przystąpieniem do prac wykonać kopię zapasową szablonu!
Taki baner / nagłówek możemy umieścić w dowolnym miejscu. Żeby znalazł się na stronie zamiast nagłówka należy znaleźć w szablonie obiekt div o id header-inner. Żeby tego dokonać wystarczy Wcisnąć Ctrl+F, wpisać header-inner i wcisnąć ENTER. Następnie w środku obiektu div wstawiamy:
Jednak, aby jako nagłówek był specjalny baner należy dodać style="display:none" do obiektu, który już tam był. Prostszym rozwiązaniem będzie ustawić, aby nagłówek na stronie się nie wyświetlał z poziomu układu.
Następnym etapem jest dopisanie kodu javascript na stronie. W Bloggerze można go dodać w zakładce Układ. Następnie w grupie np. Main dodać gadżet HTML/JavaScript. W nowym oknie zamiast w polu Tytuł sugeruje wpisać header (lub coś innego sensownego). Jako treść należy wkleić poniższy kod:
(2.) Ustalamy, które zdjęcie wyświetlamy (w informatyce pierwsze jest 0). (3.) Ustalamy listę zdjęć do wyświetlenia tj. adresu url zdjęć. Każdy adres zapisujemy w cudzysłowach " ", a kolejne adresy rozdzielamy przecinkiem. Przykładowo ["url1", "url2"]. (4.) Ładujemy zdjęcie. (5.) Funkcja nextPhoto(): (6.) zwiększa indeks wybranego zdjęcia, (7.) jeśli nie ma więcej elementów to wracamy do pierwszego. Ostatnie polecenie (8.) aktualizuje zdjęcie. (10.) Funkcja loadPhoto(): (11.) Ładuje zdjęcie do pola photoDisplay, które wcześniej dodaliśmy do szablonu. (13.) Ustalamy co ile ma się zmieniać obrazek w tle: tutaj 10000 oznacza co ile milisekund, dlatego do wartości w sekundach należy zawsze dopisać trzy zera.
Potrzebujemy teraz uzupełnić kod i obiekt właściwymi adresami url. W tym celu warto utworzyć nowy post i przesłać do niego zdjęcia. Potem kopiujemy adresy url wstawionych zdjęć. Następnie należy zmienić w szablonie wartość src obiektu photoDisplay (który dodawaliśmy) na obrazek, który ma być stałą częścią logo. Przykładowo może to być napis z przezroczystym tłem. Można to osiągnąć przesyłając na serwer zdjęcie w formacie *.png. Zdjęcia, które mają być w tle mogą być przesłane w dowolnym formacie. Ich adresy wpisujemy w kodzie javascript, który znajduje się w dodanym wcześniej gadżecie.
Teraz zamiast nagłówka powinien znaleźć się nagłówek ze zmieniającym się tłem.