Tipps & Tutorials, tutorial

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 Comments

  1. Maybe

    17. February 2013 at 18:52

    Super Tutorial.Klappt super 🙂

    LG Maybe
    happyness-maybe.blogspot.com

  2. Mira Ho

    17. February 2013 at 19:04

    Freut mich, dass es geklappt hat 🙂

  3. Sooyoona

    17. February 2013 at 19:06

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

    Liebe Grüße und einen schönen Sonntag

  4. Janine

    17. February 2013 at 19:11

    wuhuu hat geklappt 🙂

  5. Beauty Mango

    17. February 2013 at 19:20

    Einfach und tolles Tutorial und auch auch gleich super geklappt! Danke ♥

  6. Fräulein Schleifchen

    17. February 2013 at 19:25

    🙂 Super das hab ich gebraucht, vielen dank für das super Tutorial!

    Liebste Grüße
    Fräulein Schleifchen

  7. Anonym

    17. February 2013 at 21:09

    Hat prima geklappt – besten Dank! ♥
    (allerdings habe ich keinen Rahmen!? Oder habe ich was falsch verstanden?)

    GLG Louise

  8. Raine

    17. February 2013 at 21:28

    Danke für die Anleitung! Klappt super. 🙂

  9. Ina

    18. February 2013 at 8:04

    hat wunderbar geklappt 😀 100 dank an dich du fleißiges bienchen!

  10. brifarile

    18. February 2013 at 9:41

    Vielen Dank für diesen Beitrag! Seit ich auf GTBHC gestoßen bin, hab ich mich gefragt, wie das nur funktioniert…danke! 🙂

  11. nata

    18. February 2013 at 14:50

    Versuch ich gleich mal 🙂 Wahnsinn, was man alles mit HTML machen kann 🙂

    mein blog

    xx

  12. Anonym

    18. February 2013 at 15:51

    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

  13. Sahra

    18. February 2013 at 15:59

    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

  14. Vita Kranz

    18. February 2013 at 17:52

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

    1. AnWi

      17. March 2013 at 16:15

      Das gleiche Problem habe ich auch, dass aus den '-Zeichen die Zeichen-Kombination & # 3 9 ; wird 🙁

    2. Marie

      17. March 2013 at 16:39

      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?

  15. Grinsebacke

    18. February 2013 at 19:14

    Hat super geklappt, DANKE! 🙂

  16. Anonym

    18. February 2013 at 20: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. :-*

  17. Nina

    19. February 2013 at 8:40

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

  18. Anonym

    19. February 2013 at 21:28

    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

  19. Helen

    19. February 2013 at 23:34

    Von mir ebenfalls: Dankeschön 🙂

  20. K. D.M.

    20. February 2013 at 14:56

    Danke, dass hat auf anhieb geklappt und sieht sehr gut aus. 🙂

  21. Gitte

    20. February 2013 at 19:26

    oh sehr kuhl.
    Vielen Dank 😀
    Werde ich zu mehr als 100% in mein neues Layout berücksichtigen. Aber erst, wenn es denn soweit ist 😉

  22. Glam Bee

    20. February 2013 at 21:39

    Bei mir geht das in Zusammenhang mit dem Tutorial:
    http://www.lovemira.de/category/tipps-tutorials/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?

  23. Isa

    24. February 2013 at 17:12

    Ihr seit richtige Trendsetter =) kaum zeigt ihr so coole funktionen wie runde Bildchen oder kommentare vervorheben findet man es überall hehe 😀

  24. Milchschoki

    24. February 2013 at 20:03

    Besten Dank, habe es auch gleich gemacht 🙂 Viel übersichtlicher.

  25. cleh-creationen

    1. March 2013 at 10:04

    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

  26. Andrea Lauer

    5. March 2013 at 22:04

    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

  27. SAMMY

    26. March 2013 at 13:41

    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

    1. Mira Ho

      26. March 2013 at 13:50

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

  28. Selina

    1. April 2013 at 16:16

    Hallo. Ich danke euch! Hat wirklich super geklappt. Ich wollte aber fragen, obman den Aatar auch ganz entfernen kann? 😀

    LiebeGrüsse <3

    1. Mira Ho

      1. April 2013 at 19:03

      Alle oder nur der des Autors?

  29. Liv

    6. April 2013 at 12:07

    Dankeschön, das hat sofort wunderbar funktioniert! 🙂

  30. Lena

    26. May 2013 at 19:54

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

  31. San Pi

    6. August 2013 at 7:23

    Ich liebe deine Tutorials! Danke dafür!!!

    Sanny von makeupcouture.de

  32. Lydia

    11. August 2013 at 16:56

    Es hat geklappt! Danke!!!

  33. choolee

    2. November 2013 at 12:23

    mein "antworten" feld ist einfach verschwunden :((( need help!!

  34. thelittlediamonds

    20. November 2013 at 20:24

    Wirklich ein richtig tolles Tutorial ^^

    xx Alina
    mein blog: thelittlediamonds

  35. Anonym

    18. March 2014 at 12:45

    Ich finde den body code nicht… Trotz suchens… Was tue ich jetzt?

  36. FullmoonShadow

    28. April 2014 at 10:31

    Hat super geklappt! Vielen Danke!

    Liebe Grüße
    Moony

  37. Ina S.

    19. June 2015 at 11:17

    Vielen Dank für das tolle Tutorials. Wieder eins von dir umgesetzt!

    Liebe Grüsse
    Ina

Leave a Reply