Tipps & Tutorials, tutorial

Link-Me Box selbst machen

 

Diesmal gibt es eine Schritt-für-Schritt Anleitung, wie ihr sich eine Link-Me Box selbst machen könnt. 🙂

Wofür ist sie gut? So eine Box ist vielseitig, in der Bloggerwelt wird sie aber gerne dazu genutzt, um sich gegenseitig zu verlinken – wie zB. als Blogging Friends.

Dazu braucht ihr natürlich erst einmal ein Bild, ihr später als Banner nehmen könnt. Gängige Größen sind 100x80px & 200x60px, aber ihr könnt damit auch experimentieren. Falls ihr schon eins habt, sehr gut, dann könnt ihr gleich anfangen! Wenn nicht, müsst ihr euch erst eins machen.
 
Hier seht ihr, wie ihr eine GIF-Animation erstellt, ein guter Startpunkt für ein eigenes Banner, obwohl ihr nicht unbedingt eine Animation nehmen müsst, ein “normales” Bild reicht auch 😉
 
Grundsätzlich reicht es den Blognamen in einer interessanten Schrift in ein kleines Bild zu pressen, das geht mit eigentlich allen Bildbearbeitungsprogrammen, auch Paint reicht aus.

Nun denn, wenn ihr das lest, vermute ich mal, dass ihr ein Bild habt und wir beginnen können. 🙂
Grundsätzlich ist eine Link-Me Box nur das Bild und unten eine Box mit dem HTML-Code für das Bild.

Ich versuche jetzt mal so gut es geht den Code zu erklären, den ihr benutzt.

<center>
<a href="https://www.lovemira.de/">
<img src="http://i1021.photobucket.com/albums/af334/Inhji/CopyPasteLoveBanner1.gif" /></a><br />
<textarea style="font-size: 10px; color: #aaa;" rows="6" cols="25" onclick="this.select();">
<a href="https://www.lovemira.de/">
<img src="http://i1021.photobucket.com/albums/af334/Inhji/CopyPasteLoveBanner1.gif" target="_blank" />
</a>
</textarea>
</center>

Ersetzt das https://www.lovemira.de/ mit eurem Bloglink. Das http://i1021.photobucket.com/albums/af334/Inhji/CopyPasteLoveBanner1.gifmit dem Bildlink. (Achtet darauf, dass ihr keine Anführungszeichen davor oder dahinter “verschluckt”!) Die unterstrichenen Werte könnt ihr auch ändern, probiert es einfach aus, wenn ihr Lust habt.

So, das ganze fügt ihr jetzt in ein HTML/Java-Script Gadget oder in einem Post ein und fertig ist eure Link-Me Box! 🙂


 
4.7.2013 // letztes Update von Mira

22 Comments

  1. Daniela Jost

    4. July 2013 at 15:21

    Yay danke ich wollte das schon immer mal ausprobieren! (:

    xoxo ♥

  2. Anonym

    4. July 2013 at 15:35

    Hmm ich überleg mir mal ob ich mir sowas anschaffe 🙂

  3. Sooyoona

    4. July 2013 at 15:45

    Hey, Vielen Dank für das tolle Tutorial 🙂 Sowas wollte ich mir auch schon lange einmal machen, wusste aber nicht wie 🙂

  4. Andrea

    4. July 2013 at 17:21

    Super. Vielen Dank. Hab ich gleich eingebaut…. 🙂

  5. Anonym

    4. July 2013 at 18:29

    Super erklärt, wie immer! 🙂

    Allerdings hab ich das Problem, dass wenn man den Link aus der Box einfügt, das Bild nichtmehr mittig ist. 🙁 wenn ich center einsetze, dann wirds auch nicht mittig. Hilfe?! 🙁

    1. lovemira

      4. July 2013 at 18:50

      Versuch es damit:

      <center>
      ….
      </center>

    2. lovemira

      4. July 2013 at 18:51

      Oh, Blogger nimmt kein Unicode an…

      Du kannst einfach jedes beliebiges HTML in Unicode umwandeln und dann den Teil zwischen < textarea>…< / textarea> ersetzen.

      http://rishida.net/tools/conversion/

  6. Lulu Sowieso

    5. July 2013 at 4:41

    Das werde ich heute abend gleich mal austesten 🙂

  7. strawberryred

    5. July 2013 at 10:10

    Juhu es hat diesmal funktioniert :):)
    Dankeschöön!

    Liebe Grüße
    strawberryred

  8. Leeri

    5. July 2013 at 16:28

    Tolles Tutorial,vielen Dank!

  9. Hanni Gurke

    1. August 2013 at 7:55

    Super Tutorial,doch irgentwie funksioniert das bild bei mir nicht!
    lg

  10. Verena C.

    5. August 2013 at 11:43

    Mir gehts genau so – bekomme kein Bild zustande… 🙁

    1. lovemira

      5. August 2013 at 11:55

      Hast du das Bild auch hochgeladen und die URL richtig eingebunden?

  11. Nirasavetheworld

    5. September 2013 at 8:53

    (Mein Problem hat sich nun schon erledigt)

  12. Allie Bie

    12. September 2013 at 14:54

    ausprobiert und… gefällt mir 🙂
    Hab es gleich mal auf meinen Blog gesetzt und dich gleich mit auf der Seite verlinkt!
    Vielen Dank

    alliesbeautyworld.blogspot.de

  13. Anne G.

    7. October 2013 at 8:40

    Das funktioniert im Sidebar bei mir leider nicht. Ich schreibe den HTML gehe auf Rich text und alles ist gut aber dann gehe ich auf speichern und übrig bleibt nur die leere Textarea mit meinem Banner oben drüber der auch überhaupt nicht mehr zentriert ist 🙁

  14. Nadine Stumm

    14. October 2013 at 23:35

    Super tolles tutorial! Hat beim 1. mal geklappt 🙂 allerdings stört mich das diese html- box nicht weggeht.. kann man da was machen oder wird das immer angezeigt?

  15. Meermädchen

    19. December 2013 at 2:15

    Danke für dieses tolle und wirkliche einfach Tutorium.
    Habe mir nun auch endlich einen Banner erstellt!
    Danke ♥

    Liebe Grüße,
    Franziska

    http://www.tinterotundfreiheit.blogspot.de

  16. Anonym

    26. April 2014 at 11:08

    Leider will WordPress so eine Box nicht, aber Danke für die Idee 🙂

  17. Rosa Schminktisch

    30. April 2014 at 17:47

    Das schaut richtig professional aus auf meinem Blog. Vielen Dank !!! 🙂

  18. Natalie im Holunderweg

    27. October 2014 at 21:22

    Hey, danke für das Tutorial, leider funktioniert es bei mir nicht :/ Ich möchte die Link me-Box in einen Post einfügen, aber es wird dann nur der Code angezeigt. Irgendwo mache ich bestimmt einen dummen Denkfehler…
    Das Bild habe ich ins Picsa-WEbalbum hochgeladen.

    Viele Grüße
    Natalie

  19. Fräulein-Liebling

    6. June 2015 at 10:27

    Tolle Anleitung, vielen Dank! 🙂

    LG, Judith

Leave a Reply