Jak dodać aplikację Tumblr do paska bocznego

Wprowadzenie

Wiele serwisów oferuje gotowe widgety, które można osadzić w blogu, otwierając wiele możliwości personalizacji. Jeśli Twój motyw Tumblr posiada pasek boczny, wystarczy wkleić jedną linię kodu HTML w odpowiednie miejsce, aby wyświetlić wybrany widget.

Krok po kroku

Krok 1 – Wybór widgetu

Odwiedź strony takie jak Widgetbox, ShareThis lub Tumblring. Znajdziesz tam różnorodne widgety – od przycisków społecznościowych, przez odtwarzacze muzyki, po wyszukiwarki.

Krok 2 – Dostosowanie i generowanie kodu

Wybierz interesujący Cię widget i ustaw dostępne opcje (układ, kolory, czcionki itp.). Niektóre, np. odtwarzacze muzyki, mogą wymagać dodatkowej konfiguracji, takiej jak utworzenie playlisty. Po zakończeniu kliknij przycisk „Generate HTML” (lub podobny) i skopiuj wyświetlony kod.

Krok 3 – Przygotowanie kopii zapasowej motywu

Wejdź w panel Dashboard Tumblr, kliknij ikonę koła zębatego i wybierz swój blog. Następnie przejdź do Customize → Edit HTML. Skopiuj cały kod HTML motywu i wklej go do notatnika, zapisując plik pod nazwą np. „Tumblr_HTML_Original.html”. Dzięki temu łatwo przywrócisz pierwotną wersję, jeśli popełnisz błąd.

Krok 4 – Znalezienie znacznika paska bocznego

W edytorze HTML naciśnij Ctrl+F i wpisz sidebar. Szukaj fragmentu takiego jak <div id="sidebar">. To otwarcie znacznika paska bocznego; jego zamknięcie wygląda </div>.

Krok 5 – Wstawienie kodu widgetu

Wklej skopiowany kod widgetu pomiędzy otwierający i zamykający znacznik <div id="sidebar"> … </div>. Nie wstawiaj go wewnątrz samych nawiasów < > – po prostu umieść kod pomiędzy nimi.

Przykład:

<div id="sidebar">
    
</div>

Krok 6 – Zapis i podgląd

Kliknij Update Preview, aby zobaczyć, jak widget prezentuje się w pasku bocznym. Jeśli wszystko wygląda dobrze, naciśnij Save. W razie potrzeby możesz przywrócić pierwotny kod z pliku zapisanego w kroku 3.

Wskazówki

• Dodając kilka widgetów, wklejaj je w kolejności, w jakiej mają się wyświetlać.
• Spacje i wcięcia nie mają znaczenia – Tumblr automatycznie sformatuje kod.