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="http://copypastel0ve.blogspot.com/">
<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();">
&lt;a href=&quot;http://copypastel0ve.blogspot.com/&quot;&gt;
&lt;img src=&quot;http://i1021.photobucket.com/albums/af334/Inhji/CopyPasteLoveBanner1.gif&quot; target=&quot;_blank&quot; /&gt;
&lt;/a&gt;
</textarea>
</center>

Ersetzt das blaue mit eurem Bloglink. Das rote mit 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

23 Kommentare

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

    xoxo ♥

    AntwortenLöschen
  2. Hmm ich überleg mir mal ob ich mir sowas anschaffe :)

    AntwortenLöschen
  3. Hey, Vielen Dank für das tolle Tutorial :) Sowas wollte ich mir auch schon lange einmal machen, wusste aber nicht wie :)

    AntwortenLöschen
  4. Super. Vielen Dank. Hab ich gleich eingebaut.... :-)

    AntwortenLöschen
  5. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  6. 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?! :(

    AntwortenLöschen
    Antworten
    1. Versuch es damit:

      <center>
      ....
      </center>

      Löschen
    2. 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/

      Löschen
  7. Das werde ich heute abend gleich mal austesten :)

    AntwortenLöschen
  8. Juhu es hat diesmal funktioniert :):)
    Dankeschöön!

    Liebe Grüße
    strawberryred

    AntwortenLöschen
  9. Super Tutorial,doch irgentwie funksioniert das bild bei mir nicht!
    lg

    AntwortenLöschen
  10. Mir gehts genau so - bekomme kein Bild zustande... :(

    AntwortenLöschen
    Antworten
    1. Hast du das Bild auch hochgeladen und die URL richtig eingebunden?

      Löschen
  11. (Mein Problem hat sich nun schon erledigt)

    AntwortenLöschen
  12. 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

    AntwortenLöschen
  13. 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 :(

    AntwortenLöschen
  14. 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?

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

    Liebe Grüße,
    Franziska

    www.tinterotundfreiheit.blogspot.de

    AntwortenLöschen
  16. Leider will Wordpress so eine Box nicht, aber Danke für die Idee :)

    AntwortenLöschen
  17. Das schaut richtig professional aus auf meinem Blog. Vielen Dank !!! :)

    AntwortenLöschen
  18. 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

    AntwortenLöschen
  19. Tolle Anleitung, vielen Dank! :)

    LG, Judith

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!