Kommentar des Autors hervorheben ♥♥


In unserem heutigen Sonntagstutorial zeige ich euch, wie man den Kommentar des Autors hervorhebt. Bitte beachtet, dass nur der Autor, nicht der Blogeigentümer gemeint ist. Zum Beispiel bin ich die Blogeigentümerin und die Autorin von diesem Post, ich habe es zumindest erstellt und veröffentlicht - meine Kommentare werden hier hervorgehoben.
Schreibt zum Beispiel meine Kollegin Jen einen Post und ich schreibe einen Kommentar darunter, dann wird mein Kommentar wie ein normaler angezeigt, die von Jen werden dafür hervorgehoben.

Verstanden? Alles klar!

Dieses Tutorial ist ziemlich einfach und sollte keine Probleme machen, man sollte sich nur das ganze Tutorial genau durchlesen, so wie alle anderen auch, bevor man den anwendet.

0. Unter Einstellungen --> Posts & Kommentare --> Kommentare sollte die Kommentarposition als Eingebettet eingestellt sein.



1. Öffne den Dashboard (blogger.com), gehe auf Vorlage und dann auf HTML bearbeiten.

2. Sucht "</body" mit Strg+F bzw. Apfel+F und fügt folgendes direkt über </body> ein:
<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- ss highlight author starts -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', 'dashed #efefef 1px')
.css('background','#f0a2a2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- ss highlight author ends -->

3. Im Prinzip seit ihr jetzt fertig, ihr könnt jetzt aber noch anpassen. Wenn ihr ihn unverändert lässt, sieht es dann bei euch so aus wie hier im Bild (siehe oben). Wer noch was ändern möchte:

Der Kommentar ist mit einem Rahmen umrandet. Ändere dashed (=gestrichelt) zu dotted (=gepunktet) oder  solid (=durchgehend) um. Ändere #efefef um, um eine andere Farbe zu bekommen - Farbe kann man hier ermitteln. Ändere die Zahl von 1px um, um die Dicke des Striches zu bestimmen.

Dies ist ein transparentes Bild. Dadurch wird die Farbe etwas aufgehellt. Hier wird zum Beispiel aus einem kräftigen Rosa (#f0a2a2) ein pastelliges Rosa. Wer das nicht braucht oder will, kann diesen Teil löschen.

Die Farbe des Hintergrunds. Mit zB. Colorpicker könnt ihr die Hintergrundfarbe des Kommentars ändern.

Abstand zwischen Schrift und Rand des "Boxes". Wenn man sie auf Null setzen würde, wäre die Schrift direkt am Rand. Wer den Abstand vergrößern oder verkleinern möchte, möge diesen Wert ändern.

4. Speichern!

5. Um das wieder zu entfernen, sucht ihr nach </body> und den Code aus Schritt 2.

Im Laufe der nächsten Woche könnt ihr wie immer für das nächste Sonntagstutorial voten. Wer einen Vorschlag hat, darf sie gerne hier loswerden! Ich wünsche euch noch einen schönen Abend!

43 43 Kommentare

  1. Super Tutorial.Klappt super :)

    LG Maybe
    happyness-maybe.blogspot.com

    AntwortenLöschen
  2. Freut mich, dass es geklappt hat :)

    AntwortenLöschen
  3. Vielen Dank für dieses Tutorial :-* Habe es direkt einmal eingebaut.

    Liebe Grüße und einen schönen Sonntag

    AntwortenLöschen
  4. Einfach und tolles Tutorial und auch auch gleich super geklappt! Danke ♥

    AntwortenLöschen
  5. :) Super das hab ich gebraucht, vielen dank für das super Tutorial!

    Liebste Grüße
    Fräulein Schleifchen

    AntwortenLöschen
  6. Hat prima geklappt - besten Dank! ♥
    (allerdings habe ich keinen Rahmen!? Oder habe ich was falsch verstanden?)

    GLG Louise

    AntwortenLöschen
  7. Danke für die Anleitung! Klappt super. :-)

    AntwortenLöschen
  8. hat wunderbar geklappt :D 100 dank an dich du fleißiges bienchen!

    AntwortenLöschen
  9. Vielen Dank für diesen Beitrag! Seit ich auf GTBHC gestoßen bin, hab ich mich gefragt, wie das nur funktioniert...danke! :)

    AntwortenLöschen
  10. Versuch ich gleich mal :) Wahnsinn, was man alles mit HTML machen kann :)

    mein blog

    xx

    AntwortenLöschen
  11. Ich weiß das die Frage nicht viel mit dem Tutorial zu tun hat, aber ich weiß nicht wo ich sie sonst stellen soll...
    Also ich designe momentan mein Blog und möchte eine Vorlage von Wasserzeichen benutzen. Das Problem ist jedoch, dass man dort den Gadget-Hintergrund nicht transparent machen kann. Da ist jetzt ein weißer Kasten drum. Wie bekomme ich diesen am besten weg ?
    LG Sahra

    AntwortenLöschen
  12. Ich weiß das die Frage nicht viel mit dem Tutorial zu tun hat, aber ich weiß nicht wo ich sie sonst stellen soll...
    Also ich designe momentan mein Blog und möchte eine Vorlage von Wasserzeichen benutzen. Das Problem ist jedoch, dass man dort den Gadget-Hintergrund nicht transparent machen kann. Da ist jetzt ein weißer Kasten drum. Wie bekomme ich diesen am besten weg ?
    LG Sahra

    AntwortenLöschen
  13. Sobald ich auf Vorlage Speichern klicke, werden bei mir leider die ' zu '
    Weiß nicht woran es liegt :/

    AntwortenLöschen
    Antworten
    1. Das gleiche Problem habe ich auch, dass aus den '-Zeichen die Zeichen-Kombination & # 3 9 ; wird :(

      Löschen
    2. Genau das gleiche Problem habe ich auch. Und sobald ich es ändere und speicher, ändert es sich sofort wieder, wenn ich die Vorlage erneut aufrufe...

      Was kann man denn da machen?

      Löschen
  14. TUTORIAL WUNSCH!
    Könnt Ihr bitte herausfinden wie man die Labels verschiebt? Hätte es gerne wie bei Teenage Kicks auf dem Blog. Ihr wärt die coolsten wenn Ihr das Schaffen würdest! Ich verzweifle. Für die Vorlagen von 2006 dann. :-*

    AntwortenLöschen
  15. Wie habt ihr eure Suchleiste so schön angepasst? :) Verzweifle grad am Codieren, würde mich sehr über ein Tutorial freuen! Gruß

    AntwortenLöschen
  16. Ich weiß das die Frage nicht viel mit dem Tutorial zu tun hat, aber ich weiß nicht wo ich sie sonst stellen soll...
    Also ich designe momentan mein Blog und möchte eine Vorlage von Wasserzeichen benutzen. Das Problem ist jedoch, dass man dort den Gadget-Hintergrund nicht transparent machen kann. Da ist jetzt ein weißer Kasten drum. Wie bekomme ich diesen am besten weg ?
    LG Sahra

    AntwortenLöschen
  17. Von mir ebenfalls: Dankeschön :)

    AntwortenLöschen
  18. Danke, dass hat auf anhieb geklappt und sieht sehr gut aus. :)

    AntwortenLöschen
  19. oh sehr kuhl.
    Vielen Dank :D
    Werde ich zu mehr als 100% in mein neues Layout berücksichtigen. Aber erst, wenn es denn soweit ist ;)

    AntwortenLöschen
  20. Bei mir geht das in Zusammenhang mit dem Tutorial:
    http://www.copypastelove.org/2013/02/kommentare-gestalten.html
    leider nicht. Komisch. Weil hier auf dem Blog geht es ja auch??
    Kannst du mir sagen, woran es liegen könnte?

    AntwortenLöschen
  21. Ihr seit richtige Trendsetter =) kaum zeigt ihr so coole funktionen wie runde Bildchen oder kommentare vervorheben findet man es überall hehe :D

    AntwortenLöschen
  22. Besten Dank, habe es auch gleich gemacht :) Viel übersichtlicher.

    AntwortenLöschen
  23. Hallo - erstmal vielen lieben Dank für das tolle Tutorial. Klappt super - aber nur bei einem Kommentar...

    Wenn ich zwei oder mehrere Kommentare beantworte erscheint mein Kommentar zwar hervorgehoben, aber nicht mehr unter dem Kommentar den ich beantwortet habe. Sondern alle meine Kommentare erscheinen als Block unter allen anderen... Was mache ich denn da falsch :-( ...

    Vielen lieben Dank & Grüsse aus der Schweiz,
    Claudia

    AntwortenLöschen
  24. Ganz lieben Dank für dieses Tutorial. Ich habs gleich ausprobiert und es hat wunderbar geklappt. Auch bei dem Tutorial für runde Avatar-Bilder hat einwandfrei funktioniert. *Daumenhoch*

    Durch Euch ist mein Interess an HTML und CSS etc. enorm gestiegen und ich hab mich entschlossen mich mit der Matiere intensiver zu beschäftigen, wenn es meine Zeit zulässt.

    Liebe Grüße und weiter so!!

    Andrea von Pixie Scrap

    AntwortenLöschen
  25. Vielen Dank für die wirklich einfach verständliche Anleitung. Leider tut sich bei mir gar nix. Ich bin Schritt für Schritt vorgegangen - aber es passiert nichts.

    LG Sammy

    AntwortenLöschen
    Antworten
    1. Du solltest unter Einstellungen vielleicht noch die Kommentarfunktion auf eingebettet ändern, damit sie nicht im Extra Fenster gezeigt werden.

      Löschen
  26. Hallo. Ich danke euch! Hat wirklich super geklappt. Ich wollte aber fragen, obman den Aatar auch ganz entfernen kann? :D

    LiebeGrüsse <3

    AntwortenLöschen
  27. Dankeschön, das hat sofort wunderbar funktioniert! :)

    AntwortenLöschen
  28. Bei mir hat es leider nicht geklappt, da war der Code irgendwie falsch obwohl ich ihn kopiert habe.
    Liebe Grüße!

    AntwortenLöschen
  29. Ich liebe deine Tutorials! Danke dafür!!!

    Sanny von makeupcouture.de

    AntwortenLöschen
  30. Hat super geklappt! Danke! :D

    http://onthewaybeauty.blogspot.com/

    AntwortenLöschen
  31. mein "antworten" feld ist einfach verschwunden :((( need help!!

    AntwortenLöschen
  32. Ich finde den body code nicht... Trotz suchens... Was tue ich jetzt?

    AntwortenLöschen
  33. Hat super geklappt! Vielen Danke!

    Liebe Grüße
    Moony

    AntwortenLöschen
  34. Vielen Dank für das tolle Tutorials. Wieder eins von dir umgesetzt!

    Liebe Grüsse
    Ina

    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.