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.