Skapa en följelista på Tumblr

En följelista visar alla Tumblrbloggar du följer som klickbara länkar. Besökare kan klicka för att se de andra bloggarna och följa dem vidare. Inte alla Tumblr‑teman har inbyggt stöd för följelistor (även kallade blogrolls), men du kan lägga till en lista i vilket tema som helst genom att anpassa koden. Din följelista kan placeras i sidofältet och formateras med anpassad CSS.

Teman med inbyggt stöd för följelistor

1. Logga in på Tumblr och klicka på kugghjulsikonen i instrumentpanelen för att öppna kontosidan.
2. Välj den blogg du vill lägga till följelistan i och klicka på Justera.
3. Klicka på Bläddra bland teman och välj "Gratis teman" i rullgardinsmenyn.
4. Välj ett tema som t.ex. Redux, Fluid eller Minimal som har inbyggt stöd för följelistor. För att kontrollera stödet kan du klicka på temats miniatyr och titta på förhandsgranskningen till höger.
5. Klicka på Använd när du hittat ett passande tema.
6. Scrolla ned i "Justera"‑listan och se till att alternativet Visa följande eller Visa "Jag följer"‑widget är aktiverat.
7. Klicka på Spara och sedan på Avsluta för att byta till det nya temat som visar din följelista.

Teman utan inbyggt stöd för följelistor

1. Logga in på Tumblr och gå till kontoinställningarna via instrumentpanelen.
2. Välj din blogg och klicka på Justera i "Tema"‑sektionen.
3. Klicka på Redigera HTML för att öppna temakällan och leta reda på "Sidebar"‑sektionen. Placeringen kan variera mellan teman; vissa, som Vacant, markerar sidofältet tydligt med kommentarer i koden.
4. Lägg till en ny rad där du vill att följelistan ska visas, t.ex. under profilbilden eller ovanför sociala medielänkar.
5. Lägg till följande kod för att skapa widgeten och ge den id:n "followlist":

<div id="followlist">
  <h3>Jag följer</h3>
</div>

6. Lägg till nedan kod för själva följelistan (den här länken skapar portrett‑miniatyrer):

<script>
  // Tumblr följelista‑script – skapar en lista med portrett‑miniatyrer
  (function() {
    var list = document.querySelector('#followlist');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.tumblr.com/services/api/0/user/following?api_key=YOUR_API_KEY');
    xhr.onload = function() {
      if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        var ul = document.createElement('ul');
        ul.style.listStyleType = 'none';
        ul.style.padding = '0';
        data.following.forEach(function(blog) {
          var li = document.createElement('li');
          li.style.float = 'left';
          li.style.marginRight = '0.5em';
          var a = document.createElement('a');
          a.href = 'https://'+blog+'.tumblr.com';
          var img = document.createElement('img');
          img.src = 'https://api.tumblr.com/v2/blog/'+blog+'.tumblr.com/avatar/200';
          img.alt = blog;
          img.width = 50; // justera storlek efter behov
          a.appendChild(img);
          li.appendChild(a);
          ul.appendChild(li);
        });
        list.appendChild(ul);
      }
    };
    xhr.send();
  })();
</script>

7. Klicka på Uppdatera förhandsgranskning för att se ändringarna. Följelistan visas, men portrett‑miniatyrerna placeras vertikalt – detta styrs av CSS. 8. Klicka på Spara och sedan på tillbaka‑pilen för att stänga HTML‑redigeraren. 9. Scrolla ned i "Justera"‑fönstret och klicka på Avancerade alternativ. 10. Lägg till följande CSS för att justera miniatyrernas placering i en rad:

ul#followlist { list-style-type: none; padding: 0; }
ul#followlist li { float: left; margin-right: 0.5em; }

11. Klicka på Spara för att göra ändringarna permanenta och skapa din följelista på Tumblr.

Tips

Om du följer för många bloggar för att rymmas i sidofältet kan du lägga till följelistkoden på en egen sida. Lägg sedan till en länk till den nya sidan i sidofältet för enkel åtkomst.

URL:https://sv.whycomputer.com/internet/1014019019.html