Songtify - poradnik

Songtify to kolejny prezent od Nowalijki! Najpierw postawiła nam cały szablon, potem podarowała Fotograma, a teraz przychodzi z Songtify – no szalony człowiek <3 W każdym razie! Dzięki temu kodzikowi możesz zrobić postaci profil muzyczny: listę najpopularniejszych utworów miesiąca, ulubionych wykonawców i publiczne playlisty. Do posta wystarczy wkleić tylko poniższy kod.

Tak jak w przypadku Fotograma, wyłącz komentarze w opcjach posta, żeby stopka nie psuła ramki.

Kod jest trochę dłuższy, ale to zero stresu. Edycja wymaga na dobrą sprawę dwóch rzeczy:

• podmieniasz zdjęcia – to adres w cudzysłowie zaraz po src=; wklejasz tam link do swojego obrazka;
• podmieniasz teksty – to, co stoi pomiędzy znacznikami, np. username, Nazwa utworu czy Artysta.

Reszty (tych wszystkich <div>) możesz nie ruszać. W kodzie poniżej są podpowiedzi – to te zielone linijki z <!-- ... -->. Nie wyświetlają się na blogu, są tylko dla Ciebie.

Nowość względem Fotograma: lista utworów to tabela. Nie bój się jej – edytujesz ją tak samo, tekst po tekście. Żeby dodać utwór, kopiujesz jeden wiersz (od <tr> do </tr>); żeby usunąć – kasujesz taki wiersz.

Przejdź w edycji posta do widoku HTML i wklej całość:

songtify.html HTML

<!-- ===================================================== -->
<!-- SONGTIFY - profil muzyczny postaci                    -->
<!-- WAŻNE: w opcjach posta WYŁĄCZ KOMENTARZE              -->
<!-- bo inaczej będzie brzydka stopka                      -->
<!-- ===================================================== -->
 
<!-- Opakowanie całości. Nie ruszaj! -->
<div class="songtify">
 
  <!-- GÓRA: zdjęcie profilowe + nazwa + liczby -->
  <div class="profile-songtify">
 
    <!-- ZDJĘCIE PROFILOWE - podmień adres po src= na link do obrazka -->
    <div class="pfp-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
 
    <div class="info-s">
      <!-- Napis nad nazwą (jak na Spotify). Zostaw jak jest. -->
      <div class="name-s">Profil</div>
 
      <!-- NAZWA PROFILU - zamień słowo username na nick postaci -->
      <div class="username-s">
        <span>username</span>
      </div>
 
      <!-- LICZBY - zamień zera na: liczbę playlist / obserwujących / obserwowanych -->
      <div class="numbers-s">
        <div class="posts-s">00 publicznych playlist</div>
        <div class="dot-s">•</div>
        <div class="followers-s">00 obserwujących</div>
        <div class="dot-s">•</div>
        <div class="followed-s">00 obserwowanych</div>
      </div>
    </div>
  </div>
 
  <!-- DÓŁ: przycisk + trzy sekcje (utwory, wykonawcy, playlisty) -->
  <div class="rest-s">
 
    <!-- Przycisk Obserwuj + ikonka. Możesz zostawić. -->
    <div class="buttons-s">
      <div class="button-s">Obserwuj</div>
      <i class="ph-fill ph-dots-three-outline"></i>
    </div>
 
    <!-- SEKCJA 1: NAJPOPULARNIEJSZE UTWORY (tabela) -->
    <div class="songs-s">
      Najpopularniejsze utwory w tym miesiącu
      <div class="more-s">Pokaż wszystko</div>  <!-- to dla ozdoby, nie klika się nigdzie -->
    </div>
 
    <!-- Każdy wiersz <tr> to jeden utwór. Za mało albo za dużo? Skopiuj lub usuń cały <tr>. -->
    <div class="songs-list-s">
      <table>
 
        <!-- utwór 1 -->
        <tr>
          <td style="width: 20px;">
            <div class="number-song-s">1</div> <!-- numer na liście -->
          </td>
          <td style="width: 45px;">
            <div class="pfp-song-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="40"/></div> <!-- miniaturka: podmień adres na adres obrazka src= -->
          </td>
          <td>
            <div class="credits-song-s">
              <div class="song-name-s">Nazwa utworu</div> <!-- tytuł -->
              <div class="artist-name-song-s">Artysta</div> <!-- wykonawca -->
            </div>
          </td>
          <td>
            <div class="album-song-s">Nazwa albumu</div> <!-- album -->
          </td>
          <td style="width: 35px; text-align: right;">
            <div class="time-song-s">00:00</div> <!-- długość -->
          </td>
        </tr>
 
        <!-- utwór 2 -->
        <tr>
          <td>
            <div class="number-song-s">2</div>
          </td>
          <td style="width: 40px;">
            <div class="pfp-song-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="40"/></div>
          </td>
          <td>
            <div class="credits-song-s">
              <div class="song-name-s">Nazwa utworu</div>
              <div class="artist-name-song-s">Artysta</div>
            </div>
          </td>
          <td>
            <div class="album-song-s">Nazwa albumu</div>
          </td>
          <td style="width: 35px; text-align: right;">
            <div class="time-song-s">00:00</div>
          </td>
        </tr>
 
        <!-- utwór 3 -->
        <tr>
          <td>
            <div class="number-song-s">3</div>
          </td>
          <td style="width: 40px;">
            <div class="pfp-song-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="40"/></div>
          </td>
          <td>
            <div class="credits-song-s">
              <div class="song-name-s">Nazwa utworu</div>
              <div class="artist-name-song-s">Artysta</div>
            </div>
          </td>
          <td>
            <div class="album-song-s">Nazwa albumu</div>
          </td>
          <td style="width: 35px; text-align: right;">
            <div class="time-song-s">00:00</div>
          </td>
        </tr>
 
        <!-- utwór 4 -->
        <tr>
          <td>
            <div class="number-song-s">4</div>
          </td>
          <td style="width: 40px;">
            <div class="pfp-song-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="40"/></div>
          </td>
          <td>
            <div class="credits-song-s">
              <div class="song-name-s">Nazwa utworu</div>
              <div class="artist-name-song-s">Artysta</div>
            </div>
          </td>
          <td>
            <div class="album-song-s">Nazwa albumu</div>
          </td>
          <td style="width: 35px; text-align: right;">
            <div class="time-song-s">00:00</div>
          </td>
        </tr>
 
        <!-- utwór 5 -->
        <tr>
          <td>
            <div class="number-song-s">5</div>
          </td>
          <td style="width: 40px;">
            <div class="pfp-song-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="40"/></div>
          </td>
          <td>
            <div class="credits-song-s">
              <div class="song-name-s">Nazwa utworu</div>
              <div class="artist-name-song-s">Artysta</div>
            </div>
          </td>
          <td>
            <div class="album-song-s">Nazwa albumu</div>
          </td>
          <td style="width: 35px; text-align: right;">
            <div class="time-song-s">00:00</div>
          </td>
        </tr>
 
      </table>
    </div>
 
    <!-- SEKCJA 2: NAJPOPULARNIEJSI WYKONAWCY (okrągłe zdjęcia) -->
    <div class="artists-s">
      Najpopularniejsi wykonawcy w tym miesiącu
      <div class="more-s">Pokaż wszystko</div>
    </div>
 
    <!-- Tu muszą być dokładnie 4 kafelki - nie dodawaj i nie usuwaj, tylko podmieniaj zdjęcie i nazwę. -->
    <div class="artists-list-s">
      <!-- wykonawca 1 -->
      <div class="artist-s">
        <div class="pfp-artist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div> <!-- zdjęcie -->
        <div class="artist-name-s">The Last Dinner Party</div> <!-- nazwa (to tylko przykład, podmień) -->
        <div class="bio-s">Wykonawca</div>
      </div>
      <!-- wykonawca 2 -->
      <div class="artist-s">
        <div class="pfp-artist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="artist-name-s">Anna von Hausswolff</div>
        <div class="bio-s">Wykonawca</div>
      </div>
      <!-- wykonawca 3 -->
      <div class="artist-s">
        <div class="pfp-artist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="artist-name-s">Radiohead</div>
        <div class="bio-s">Wykonawca</div>
      </div>
      <!-- wykonawca 4 -->
      <div class="artist-s">
        <div class="pfp-artist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="artist-name-s">Brodka</div>
        <div class="bio-s">Wykonawca</div>
      </div>
    </div>
 
    <!-- SEKCJA 3: PUBLICZNE PLAYLISTY (zaokrąglone kwadraty) -->
    <div class="playlists-s">
      Publiczne playlisty
      <div class="more-s">Pokaż wszystko</div>
    </div>
 
    <!-- Tu może być 4 lub mniej. Chcesz mniej? Usuń cały blok <div class="playlist-s">...</div> (i skasuj napis "Pokaż wszystko"). -->
    <div class="playlists-list-s">
      <!-- playlista 1 -->
      <div class="playlist-s">
        <div class="pfp-playlist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div> <!-- okładka: podmień src= -->
        <div class="playlist-name-s">Nazwa playlisty</div>
        <div class="bio-s">00 obserwujących</div>
      </div>
      <!-- playlista 2 -->
      <div class="playlist-s">
        <div class="pfp-playlist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="playlist-name-s">Nazwa playlisty ale dłuższa i w ogóle</div>
        <div class="bio-s">00 obserwujących</div>
      </div>
      <!-- playlista 3 -->
      <div class="playlist-s">
        <div class="pfp-playlist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="playlist-name-s">Nazwa playlisty</div>
        <div class="bio-s">00 obserwujących</div>
      </div>
      <!-- playlista 4 -->
      <div class="playlist-s">
        <div class="pfp-playlist-s"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>
        <div class="playlist-name-s">Nazwa playlisty</div>
        <div class="bio-s">00 obserwujących</div>
      </div>
    </div>
 
  </div>
</div>
 
<!-- more -->
 
<!-- === STYL - wkleja się razem z resztą, na samym końcu === -->
<style>
  :root {
    /* Tu wklej :root z karty postaci (KP), żeby profil miał kolory z kapejki */
  }
 
  h3.post-title, .post-footer, h2.date-header {
    display: none;
  }
 
  .post-outer {
    outline: 1px solid var(--color8);
    border: 5px solid var(--color10);
    border-radius: 10px;
    overflow: hidden;
    padding: 0px 20px 0px 20px!important;
  }
</style>

A teraz omówimy sobie całość, sekcja po sekcji, żeby na stówkę wszystko było jasne.

Góra profilu (profile-songtify):

• zdjęcie – podmień src w pfp-s (proporcje nieważne, samo się dopasuje do koła);
• napis Profil (name-s) – to etykieta jak na Spotify, zwykle zostawiasz;
• nazwa profilu – zamień username na nicka postaci;
• liczby (numbers-s) – tu wpisz liczbę playlist, obserwujących i obserwowanych.

Przycisk Obserwuj (buttons-s) – wraz z ikonką. Dekoracyjny guzik, nie musisz nic ruszać.

Najpopularniejsze utwory (songs-list-s) – to ta tabela. Każdy wiersz (<tr>) to jeden utwór, a w nim po kolei: numer, miniaturka, tytuł i wykonawca, album oraz długość (00:00). Masz gotowe pięć utworów. Chcesz inną ich liczbę? Skopiuj albo usuń cały wiersz od <tr> do </tr> – numerki (1, 2, 3…) poprawiasz ręcznie.

Najpopularniejsi wykonawcy (artists-list-s) – cztery okrągłe kafelki. W każdym podmieniasz zdjęcie i nazwę (przykładowe nazwy zespołów są tam tylko po to, żeby było widać, co gdzie wpisać).

Publiczne playlisty (playlists-list-s) – cztery kafelki z zaokrąglonym kwadratem. Podmieniasz okładkę, nazwę i liczbę obserwujących. Potrzebujesz mniej? Usuń cały blok <div class="playlist-s">…</div>. Pilnuj, żeby każdy <div> był domknięty, bo struktura bloga się rozjedzie. Ale jeśli się rozjedzie, to bez paniki - przyjdę i pomogę.

Napisy „Pokaż wszystko" (more-s) są dla ozdoby – nigdzie nie prowadzą, więc nie musisz się nimi przejmować i jeśli nie chcesz ich mieć, wystarczy je usunąć z otaczającymi je tagami.

Znacznik <!-- more --> to bloggerowa przerwa „czytaj dalej". Nic nie ruszaj.

Kolory – na samym końcu, w bloku <style>, jest puste :root. Wklej tam paletę ze swojej kapejki, a cały profil songtifajowy nabierze Twoich barw. Ta część chowa też tytuł, stopkę i datę posta i robi z niego zaokrągloną ramkę, więc tej końcówki nie ruszaj.

I gotowe – Twoja postać ma własny profil na Songtify :3