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!