Aby dodać muzykę na blogu Tumblr, należy wkleić odpowiedni kod HTML odtwarzacza muzycznego bezpośrednio w edycji szablonu swojego bloga. Najczęściej wykonuje się to poprzez wklejenie kodu do sekcji „Edytuj HTML” w ustawieniach personalizacji bloga. Dzięki temu muzyka będzie odtwarzana na każdej stronie Twojego bloga lub w określonych miejscach, zależnie od tego, gdzie wkleisz kod.
Instrukcja krok po kroku – wklejanie kodu HTML z muzyką na Tumblrze
1. Znalezienie lub wygenerowanie kodu HTML z muzyką
- Najczęściej używa się internetowych generatorów odtwarzaczy muzycznych, takich jak SCM Music Player lub innych narzędzi umożliwiających wygenerowanie kodu HTML z odtwarzaczem i playlistą;
- Możesz też skorzystać z gotowych kodów do osadzenia muzyki z platform takich jak YouTube (iframe), SoundCloud lub własnych linków MP3.
Przykład prostego kodu HTML z muzyką:
<audio controls autoplay loop>
<source src="LINK_DO_TWOJEJ_PIOSENKI.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>
Zamień LINK_DO_TWOJEJ_PIOSENKI.mp3 na adres swojej piosenki, np. hostowanej na Dropbox, Google Drive lub własnym serwerze.
2. Przejście do edycji szablonu na Tumblr
- Zaloguj się na swoje konto Tumblr;
- Przejdź na swojego bloga;
- W prawym górnym rogu kliknij „Dostosuj” (lub „Customize”);
- W nowym panelu wybierz „Edytuj HTML” (lub „Edit HTML”) bloga.
3. Wklejenie kodu HTML w odpowiednie miejsce
- W edytorze HTML znajdź miejsce oznaczone jako
<body>– najlepsze do globalnego odtwarzania muzyki jest wklejenie kodu zaraz za otwierającym znacznikiem<body>.
Przykład:
<body>
<!-- Twój kod muzyki tutaj -->
<audio controls autoplay loop>
<source src="LINK_DO_MUZYKI.mp3" type="audio/mpeg">
</audio>
- Możesz również wkleić kod w inne miejsce, np. w stopce (
</footer>), aby odtwarzacz był mniej widoczny; - Po wklejeniu kodu kliknij „Zapisz” lub „Save”, a następnie zamknij edytor i wróć do bloga.
Przykłady zastosowań
| Cel | Gdzie wkleić kod | Co uzyskasz |
|---|---|---|
| Odtwarzacz na całej stronie | Na początku <body> |
Muzyka gra automatycznie, widoczny odtwarzacz na każdej podstronie bloga |
| Odtwarzacz w sidebarze | W miejscu przeznaczonym na sidebar w szablonie | Odtwarzacz stale widoczny z boku strony, nie zakłóca treści wpisów |
| W wybranym poście | W treści posta w trybie HTML | Muzyka/dźwięk tylko w konkretnym wpisie |
Wskazówki i najczęstsze problemy
- Muzyka z autoplay może być blokowana przez niektóre przeglądarki – użytkownik musi czasem ręcznie uruchomić odtwarzanie;
- Zbyt duża lub nagła głośność odtwarzacza może być uciążliwa dla odwiedzających – warto zadbać o czytelne ustawienia głośności w kodzie;
- Linki do muzyki muszą być publicznie dostępne i obsługiwane przez przeglądarkę (np. .mp3);
- Jeśli chcesz, by odtwarzacz był „przyklejony” do boku strony, wykorzystaj odpowiedni CSS:
<div style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
<!-- tutaj kod audio/odtwarzacza -->
</div>
Najciekawsze inspiracje i zaawansowane opcje
- SCM Music Player – zaawansowany odtwarzacz z playlistą, możliwością kolorystycznego dopasowania do bloga i obsługą wielu źródeł (YouTube, SoundCloud);
- SoundCloud Embed – łatwe dodanie pojedynczego utworu z SoundCloud bez konfiguracji playlisty;
- Ukryty odtwarzacz – z użyciem CSS można kompletnie ukryć interfejs odtwarzacza:
<audio autoplay loop style="display: none;">
<source src="LINK_DO_MUZYKI.mp3" type="audio/mpeg">
</audio>
Dodając muzykę w opisany sposób możesz wzbogacić estetykę swojego bloga lub podkreślić nastrój konkretnych wpisów, eksperymentując zarówno z widocznością, jak i rozmieszczeniem odtwarzacza. Pamiętaj – szanuj wygodę słuchaczy i patent na muzyczne tło dostosuj do potrzeb odbiorców Twojej strony!
