Tipps & Tutorials, tutorial

Smileys im Kommentarfunktion einbauen

Hallo ihr Lieben,

heute komme ich mit einem Tutorial, welches sich einige gewünscht haben. Wie man Smileys in Kommentaren einfügt (siehe Bild), werde ich euch erklären. Dazu habe ich mir dieses Tutorial von Netoops Blog und diese Emoticons von Domie1337 genommen und es abgeändert. Es hat zwar etwas gedauert, da ich mit Javascript nicht so vertraut bin, aber es hat funktioniert!

1. Öffne das Blogger-Dashboard. Öffne unter Vorlage den HTML-Editor.
 
2. Suche nach ]]></b:skin> (mit STRG+F) und füge diesen CSS-Code direkt darüber ein:
img.bhacksmly { 
vertical-align: middle !important;
margin:0 5px 0 15px;
}

3. Sucht nach </body> und fügt diesen Javascript-Code direkt darüber ein:

<!-- Smileys Script Start -->
<script type='text/javascript'>
//<![CDATA[
/*
 * CopyPasteLove by love Mira
 * url:lovemira.de
 *Thanks to
 * Mini.Kit Emoticons
 * bY Domie1337
 * Url:http://domie1337.deviantart.com/
 */

a = document.getElementById("comment-holder");
if (a) {
    b = a.getElementsByTagName("p");
    for (i = 0; i < b.length; i++) {
        if (b.item(i).getAttribute("CLASS") == "comment-content") {
            bh_b_smly = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:\(/gi, "<img src='http://www.abload.de/img/crymvj1e.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/~\X\(/gi, "<img src='http://www.abload.de/img/deadljkyj.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:-\//gi, "<img src='http://www.abload.de/img/ughbjjg6.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/\/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:-\*/gi, "<img src='http://www.abload.de/img/lovedmk1h.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:-\O/gi, "<img src='http://www.abload.de/img/twitchb6jkn.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/\X\(/gi, "<img src='http://www.abload.de/img/angry4hjd0.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:7/gi, "<img src='http://www.abload.de/img/sweatozky7.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:\)/gi, "<img src='http://www.abload.de/img/glad9uje2.gif' alt='' class='bhsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:-c/gi, "<img src='http://www.abload.de/img/blinkezjk0.gif' alt='' class='bhsmly'/>");
            b.item(i).innerHTML = bh_b_smly
        }
    }
};
//]]>
</script>
<!-- Smileys Script End -->

4. Speichern!

5. Klicke auf Widget-Vorlagen komplett anzeigen.




6. Um eine Vorschau der Smileys so zu haben wie im Bild: Sucht nach <div class=’post-footer-line post-footer-line-3’/> (am besten im Suchfeld nur post-footer-line-3 eingeben). Um es so zu haben wie bei uns, füge über <p class=’comment-footer’> den Code von Schritt 7 ein.

7. Sucht dann nach dem nächsten </b:includable> und füge diesen HTML-Code direkt darüber ein:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='netoopsblogysmile' id='ysmile' style=' background: #fff; border: 1px solid #ddd;width:90%; padding:20px; margin:auto;'>
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/glad.gif'/> :)
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/cry.gif'/> :(
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/ugh.gif'/> :-/
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/love.gif'/> :-*
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/twitch.gif'/> :-O
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/angry.gif'/> X(
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/sweat.gif'/> :7
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/blink.gif'/> :-c
<img alt='' class='bhacksmly' src='https://www.lovemira.de/assets/cpl_scripts/SmileyComments/Smly/Midnite/dead.gif'/> ~X(
</div></b:if>

8. Speichern.

9. Um das alles wieder zu entfernen, sucht nach den Codes, die eingefügt worden sind und löscht sie wieder heraus!

Achtung: Wenn ihr es so eingefügt habt, wie wir es hier haben, dann werden die Smileys in den Kasten erst angezeigt, wenn ein Kommentar geschrieben wurde. Bei der anderen Variante erscheint sie sofort.

Ich würde mich sehr freuen, wenn ihr uns verlinken würdet, da dieses Tutorial zwar einfach aussieht, aber eine Menge Arbeit von mir dahinter steckt. Zudem werden die Bilder und Codes von unserem Hoster für euch kostenlos bereitgestellt.

PS: Wer die Smileys austauschen möchte, muss sich sowohl den HTML-Code als auch den Javascript-Code vornehmen. Dafür ladet ihr euch meinen Javascript-Code herunter, ändert es und ladet es auf eurem Server hoch. Den HTML-Code könnt ihr so ändern. Beides fügt ihr wie hier beschrieben in euren HTML ein.

63 Comments

  1. Anonym

    30. January 2013 at 16:07

    Ihr seid doch voll scheiße!!!

    1. Paggy Duckless

      31. January 2013 at 16:38

      Wieso kannst du das nicht begründen und unter deinem Namen schreiben? Ich finde strukturierte Kritik wäre angebrachter ^^

    2. Ich

      6. February 2013 at 19:55

      Ja, voll scheiße, dass ihr uns tolle Tipps gibt & uns helfen wollt. ^.^

  2. ♥ M i s s C o c o G l a m ♥

    30. January 2013 at 16:55

    Uiii vielen Dank für das tolle Tutorial =)

  3. Elske

    30. January 2013 at 17:14

    oh wie süß. ich mach Kätzchen 🙂 🙁 :-/ :-* :-O X( :7 :-c ~X(

  4. Jacy

    30. January 2013 at 18:43

    Ich wollte unbedingt solche Smileys haben!

    Danke danke danke! 🙂

  5. Anne

    30. January 2013 at 19:01

    Danke für das tolle Tutorial!

    🙂

  6. Lena♥

    30. January 2013 at 20:07

    oooh geeeiiiiil :-c finde ich voll super *-* wie macht man smileys in posts denn? Würde mich interessieren…
    Lena♥

  7. lovely

    30. January 2013 at 21:02

    Wie cool 🙂 Ich habe es sofort ausprobiert und DANKE ich wollte schon immer Smilies haben und werde euch auch verlinken!
    LG <3

  8. lovely

    30. January 2013 at 21:10

    Ihr hattet doch mal ne link Box wo finde ich die? 🙂

  9. Hani

    30. January 2013 at 22:04

    OMG darauf warte ich seit EWIGKEITEN.
    Ich weiß gar nicht wie oft ich danke sagen soll <3 !!!!
    Habe nämlich von meiner alten homepage Reisbällchen Smilies x) !

  10. Jana

    30. January 2013 at 22:26

    Oh endlich! 🙂 Danke dafür!!

  11. Carry S.

    30. January 2013 at 22:38

    So meine vorherigen Fragen haben sich erledigt ^^

    Wie bekomme ich es hin, weitere Smileys einzufügen? Man kann zwar Bild ändern aber Befehl bekomme ich nicht hin

    1. Carry S.

      30. January 2013 at 22:53

      Ok Bild kann man auch nur in der Box aber nicht in den Kommentaren ändern 🙁

  12. Buchsüchtige

    31. January 2013 at 6:42

    Kompliment für deine Mühe und Arbeit. Toll, du uns so wunderbare Tutorials bietest. Für meinen Blog habe ich auch schon einige benutzt. Weiter so! 🙂

    LG
    Die Buchsüchtige

  13. Christin Müller

    31. January 2013 at 13:50

    Hach klasse 🙂 das is ja niedlich – aber wie geht dass wenn ich ein anderes Bild haben möchte – ich finde in einen Food-Blog kommen Erdbeeren ganz gut?
    Reicht es da wenn ich bei src='…' die andere Bildquelle angeb??

    vielen dank schonmal
    und viele Grüße,
    Christin

    Kurze´s Köstlichkeiten

  14. Lielan reads

    31. January 2013 at 14:02

    Ohhh danke die Kätzchen sind sowas von süß! Und natürlich seit ihr verlinkt 🙂

  15. lovely

    31. January 2013 at 17:18

    Bei mir hat sich son komischer Smiley eingeschleicht überall wo das steht–> 😀 ist jetzt ein gelber Smilie :7 aber nur auf manchen Posts 🙁

    1. Christin Müller

      1. February 2013 at 11:13

      ich glaub da hat sich in dem javaskript n fehler eingeschklichen – eine quelle verweist auf nen gelben Smilie

    2. lovely

      1. February 2013 at 15:23

      Ich hab danach gesucht aber finde die Quelle nicht 🙁
      Der gelbe Smiley stört mich total, der sieht so fies mit dem Gelache aus.

  16. Anonym

    31. January 2013 at 18:13

    Süß :-c :-* 🙂

  17. Hani

    31. January 2013 at 19:25

    Leider hat es bei mir nicht geklappt bzw. braucht es eine ladezeit? :-/
    tut mir leid für die umstände und nochmals vielen dank für die große mühe! :-*

  18. Myri

    1. February 2013 at 14:40

    🙂 :-c Uh die sind süüüss!!!
    Muss ich mir merken. Steht auf der Liste ^^

  19. Ayumi

    2. February 2013 at 11:05

    ]]>
    Das finde ich nur bei einem CSS-Code den ich gestern selbst eingefügt habe. Diesem:

    a.sidemenue1 {margin-bottom: 2px;
    letter-spacing: 0px;
    display: block;
    border-bottom: 2px solid #ddd;
    font-family: Gruppo;
    font-size: 18px;
    color: #ffffff;
    background-color: #ea9999;
    text-align: center;
    line-height: 20px;
    text-decoration: none;
    }]]>

    Aber da kann das ja nicht richtig sein oder?
    Sonst ist es wohl im ganzen Code nicht enthalten.

  20. K. D.M.

    2. February 2013 at 21:29

    Hallo,

    tolle Idee, ich wollte sie nur abändern mit den Blumentöpfen.. ich habe es nur leider nicht geschafft.. :/ ihr könnt mir nicht Zufällig eine E-Mail schreiben, wie ich das mit den Blumentöpfen Smileys machen kann oder? Ich habe die gifs. extra hoch gelafen und eingefügt, nur leider, mache ich wohl ein Fehler, weil es nicht funktioniert.

    Ich würde mich freuen, wenn ihr mir helfen könntet. 🙂

    k.demin@hotmail.de

    Grüße

  21. Jenny

    3. February 2013 at 10:51

    Könntet ihr vllt. auch mehrere Smiley-Arten machen ? Weil ich warte schon seit ewigkeiten auf so einen Tutorial, nur leider passen diese Katzen einfach nicht zu mir und meinem Blog. 🙁

  22. Julia Zucker

    3. February 2013 at 13:25

    Huhu. Erstmal vielen lieben dank für dieses tolle TUT !
    bei mir ist aber ein Fehler drin .. bei mir wird die liste nicht unter der Kommentarbox angezeigt sondern über meinen Posttitel ?! Wäre wirklich nett wenn mir einer helfen könnte
    http://ms-complicato.blogspot.de/

  23. patrizia

    4. February 2013 at 14:38

    lange hab ich das gesucht 🙂
    daaanke :-*
    :-c

  24. Carry S.

    4. February 2013 at 19:06

    Wie kann man ein Javascript bearbeiten? Geht das im normalen Editor?

  25. Nane

    5. February 2013 at 14:46

    Ich bekomme es einfach nicht hin. Ab Schritt 6 klappt es leider nicht mehr. Kann es daran liegen, dass ich von jemanden ein Design habe und es nicht selbst mit der Vorlage erstellt habe? Die Katzen würden sich bei mir gut machen.

    Liebste Grüße.

    🙂

    1. Nane

      5. February 2013 at 15:39

      Hat sich schon erledigt. :-*

    2. Anonym

      7. February 2013 at 13:03

      test, weil es bei mir nicht funzt… 🙂 :-/

  26. Koleen

    5. February 2013 at 15:14

    Hach was für eine tolle Sache :-*
    Gefallen mir richtig gut deine smileys!
    Aber ich traue mich einfach nicht, da was an meinem Blog zu ändern….

    LG

  27. feelgood

    6. February 2013 at 12:14

    Super Tutorial, aber wie änder ich das denn wenn ich andere Smilies nehmen möchte? 🙂

  28. Nikki N.

    6. February 2013 at 21:51

    mich würde es auch interessieren, was mit anderen Smileys ist 🙂

  29. Anonym

    7. February 2013 at 19:35

    Wieso sind die Smileys eigentlich bei mir nicht dort bei dem Kommentarfeld sondern ganz oben ? die sind regelrecht dort wo der header ist :-O

  30. Beautysarosh.com ♥

    10. February 2013 at 16:12

    wie ändert man den den Javascript code o.O

    1. Ida

      12. February 2013 at 16:07

      Das würde mich auch Interessieren 😉

  31. kerstin

    14. February 2013 at 18:21

    Das ist echt toll!!! Ich als totaler Anfänger hab es sogar geschafft, die Hintergrundfarbe des Kastens zu ändern!! 🙂
    (Dazu einfach

    <div class='netoopsblogysmile' id='ysmile' style=' background: #fff; border: 1px solid #ddd;width:90%; padding:20px;

    suchen und #fff zur gewünschten Farbe ändern. z.B. #000)

  32. Skye Zoé

    17. February 2013 at 18:13

    hm…wieso klappt das be mir denn nicht? Also das der smiley hier angezeigt wird…
    http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/cry.gif

  33. Ines Caranaubahx

    18. February 2013 at 17:04

    Im ernst… eingefügt sind die Smiley, die funktionieren auch, aber wenn ich nach dem Code suche um die Smiley zu entfernen finde ich den nicht?! häh?

  34. Ines Caranaubahx

    18. February 2013 at 17:10

    Ich habe grade mein ganzes HTML Feld so ohne die Suche durchgeguckt. Die Codes sind da defenitiv nicht mehr -.-"

  35. Claudia Sp.

    14. March 2013 at 19:24

    Jetzt habe ich es auch noch hinbekommen, Dankeschön 🙂

  36. Anonym

    15. March 2013 at 19:55

    hat super gefunzt 😀

  37. Anonym

    15. March 2013 at 20:20

    ok könntet ihr noch erklären wie man den javascript runterladen kann und diesen dann ändert?

  38. Jenny

    11. May 2013 at 15:32

    Was müsste man den bei dem Javascript-Code verändern, wenn man andere Smileys nutzen möchte ?

  39. Venustus Honest

    22. May 2013 at 16:33

    Uh jetzt hat mein Blog auch diesen tollen Smiley vielen dank 🙂

  40. Sunny ♥

    17. August 2013 at 21:07

    Es wäre echt toll, wenn ihr mir auch noch verraten könntet, wie man die Smileys über das Kommentarfeld bekommt und nicht über das 1. Kommentar! 🙂
    Ps: Kann man das leere weiße Feld auch noch mit einem Muster auffüllen so wie ich es bei meinem GFC-Gadget gemacht habe? 🙂
    Sunny ♥

    1. Sunny ♥

      19. August 2013 at 19:19

      Wenn man die Smileys ändern, muss man ja den HTML Code UND den Java Script Code ändern.. Wie man den HTML Code ändert weiß ich zwar, aber WIEE macht man das beim Java Script Code?!
      Bitte antwortet mir! 🙂
      Sunny

  41. Darkshadowroses S.

    12. June 2015 at 17:13

    Hey ich bin gerade auf die Seite gestoßen und probiere schon fleißig aus.
    Allerdings findet der bei mir so gut wie nie die Sachen die man bei Strg+F eingeben soll
    Deswegen funktioniert das alles nicht.
    Wie kann ich das denn ändern? Weiß das vielleicht jemand. Ich habe mal gelesen das man dazu auf Vorlage gehen muss, dann anpassen, erweitert und dann CSS hinzufügen.
    Aber was genau muss ich da eingeben? ich bin gerade etwas enttäuscht dass das bei mir alles nicht gefunden wird, aber vielleicht kann mir ja einer von euch helfen.

  42. Luise Müller

    10. September 2015 at 19:28

    Kleine Warnung: Eure Upload Links funktionieren nicht mehr, vielleicht überarbeitet ihr das mal 😉

Leave a Reply