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:
<script src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/threadedcomments-min.js' type='text/javascript'/>

4. Speichern!


5. Klicke auf Widget-Vorlagen komplett anzeigen.


6. Um es 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='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/glad.gif'/> :)
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/cry.gif'/> :(
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/ugh.gif'/> :-/
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/love.gif'/> :-*
<img alt='' class='bhacksmly' src='http://www.abload.de/img/twitchb6jkn.gif'/> :-O
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/angry.gif'/> X(
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/sweat.gif'/> :7
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/blink.gif'/> :-c
<img alt='' class='bhacksmly' src='http://cplove.de/static/CopyPasteLove/Scripte/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.

66 66 Kommentare

  1. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  2. Ihr seid doch voll scheiße!!!

    AntwortenLöschen
    Antworten
    1. Wieso kannst du das nicht begründen und unter deinem Namen schreiben? Ich finde strukturierte Kritik wäre angebrachter ^^

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

      Löschen
  3. Uiii vielen Dank für das tolle Tutorial =)

    AntwortenLöschen
  4. oh wie süß. ich mach Kätzchen :) :( :-/ :-* :-O X( :7 :-c ~X(

    AntwortenLöschen
  5. Ich wollte unbedingt solche Smileys haben!

    Danke danke danke! :)

    AntwortenLöschen
  6. Danke für das tolle Tutorial!

    :)

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

    AntwortenLöschen
  8. Wie cool :) Ich habe es sofort ausprobiert und DANKE ich wollte schon immer Smilies haben und werde euch auch verlinken!
    LG <3

    AntwortenLöschen
  9. Ihr hattet doch mal ne link Box wo finde ich die? :)

    AntwortenLöschen
  10. 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) !

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

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

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

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

    AntwortenLöschen
    Antworten
    1. Ok Bild kann man auch nur in der Box aber nicht in den Kommentaren ändern :(

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

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

    AntwortenLöschen
  17. Ohhh danke die Kätzchen sind sowas von süß! Und natürlich seit ihr verlinkt :)

    AntwortenLöschen
  18. Bei mir hat sich son komischer Smiley eingeschleicht überall wo das steht--> :D ist jetzt ein gelber Smilie :7 aber nur auf manchen Posts :(

    AntwortenLöschen
    Antworten
    1. ich glaub da hat sich in dem javaskript n fehler eingeschklichen - eine quelle verweist auf nen gelben Smilie

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

      Löschen
  19. 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! :-*

    AntwortenLöschen
  20. :) :-c Uh die sind süüüss!!!
    Muss ich mir merken. Steht auf der Liste ^^

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

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

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

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

    AntwortenLöschen
  25. lange hab ich das gesucht :)
    daaanke :-*
    :-c

    AntwortenLöschen
  26. Wie kann man ein Javascript bearbeiten? Geht das im normalen Editor?

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

    :)

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

    AntwortenLöschen
  29. Super Tutorial, aber wie änder ich das denn wenn ich andere Smilies nehmen möchte? :)

    AntwortenLöschen
  30. mich würde es auch interessieren, was mit anderen Smileys ist :)

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

    AntwortenLöschen
  32. wie ändert man den den Javascript code o.O

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

    AntwortenLöschen
  34. http://cplove.de/static/CopyPasteLove/Scripte/SmileyComments/Smly/Midnite/glad.gif

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

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

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

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

    AntwortenLöschen
  39. Jetzt habe ich es auch noch hinbekommen, Dankeschön :)

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

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

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

    AntwortenLöschen
  43. Uh jetzt hat mein Blog auch diesen tollen Smiley vielen dank :)

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

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

      Löschen
  45. Dieser Kommentar wurde vom Autor entfernt.

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

    AntwortenLöschen
  47. Kleine Warnung: Eure Upload Links funktionieren nicht mehr, vielleicht überarbeitet ihr das mal ;)

    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!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.