Nach etwas längerer Zeit habe ich beschlossen, wieder einmal ein Tutorial zu schreiben. Und zwar zu einem Thema, das mich selbst bei meinem Blog sehr beschäftigt hat. Was ist die beste Möglichkeit, damit Blogbesucher ein Feedback hinterlassen können? Immerhin möchte nicht jeder gerne Kommentare schreiben. Deshalb wird von Blogger die Funktion "Reaktionen" bereitgestellt. Allerdings hat mir die Position und das Aussehen dieses Gadgets anfangs nicht gefallen. Deshalb habe ich mich ein wenig informiert und auch meinen Code entsprechend bearbeitet, bis ich mit der Darstellung zufrieden war. Dieses Wissen würde ich nun gerne weitergeben, damit sich jemand, der auch dieses Gadget auf seinem Blog hinzufügen oder ändern möchte, leicht etwas findet.
Also dann, legen wir los!
Reaktionen hinzufügen
So, wie fügt ihr die Reaktionen zu eurem Posts hinzu? Ganz einfach: Ihr müsst euer Blogposts-Gadget bearbeiten. Dazu geht ihr unter Blogger → Layout → Blogposts-Gadget → bearbeiten. Es öffnet sich ein Fenster und hier scrollt ihr bis zu "Optionen für Post-Seite" zu dem Feld "Reaktionen:". Vor dieses Feld setzt ihr einen Haken, um die Reaktionen-Buttons freizuschalten. Gefällt euch das Feld "Reaktionen:" nicht, dann könnt ihr auch andere Begriffe wie "Rüchmeldung" oder dergleichen einfügen. Danach könnt ihr rechts davon eure Wunschreaktionen angeben, zum Beispiel "Mehr davon", "Gefällt mir" und so weiter. Ganz unten könnt ihr noch die Elemente anordnen, das heißt: Wo sollen die Reaktionen stehen? Ich habe sie an das Ende gesetzt, damit jeder direkt nach dem Lesen ein Feedback geben kann. Vergesst dann nicht auf speichern zu klicken!
Wenn euch wie mir aber etwas nicht gefällt, könnt ihr auch etwas ändern, dazu müssen wir aber in den HTML-Code.
Reaktionen bearbeiten
Die Reaktionen haben ein vorgefertigtes Design. Das Einzige, das mir bei dem Standarddesign nicht gefiel, war eben das Feld "Reaktionen:". Ich wollte es komplett weg haben und nur die Reaktion-Buttons anzeigen. Leider muss aber etwas in dem Feld drinstehen, deshalb müssen wir zum HTML-Code wechseln und diesen leicht verändern. Ich empfehle euch immer, vorher eine Sicherung zu machen, damit ihr, falls etwas schief geht, darauf zurückgreifen könnt. Öffnet nun eure HTML Designvorlage:
Blogger → Design → HTML bearbeiten
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/> </td>
</tr></table>
</b:if>
</span>
Kurz zur Erklärung:
span ist hierbei ein Container, damit die Elemente reaction-label und die reaction-buttons gruppiert sind. Nach dem gelben Teil haben wir gesucht, deshalb habe ich ihn gelb markiert. Es folgt eine Abfrage ob die Reaktionsbuttons angehakt sind, das haben wir schon gemacht, könnte man aber auch im Code auf true setzten.
Danach folgt eine Tabelle zur schönen Anordnung. Der rote Teil ist unsere erste Zelle, hier befindet sich das Label, also wie ihr eure Reaktionen genannt habt. Wollt ihr nichts dort stehen haben, dann löscht diesen Teil einfach raus, oder kommentiert ihn mit <!-- am Anfang und --> am Ende aus. Wie ihr das Label stylen könnt, folgt im nächsten Abschnitt.
Der Grüne Teil sind unsere Buttons. Diesen Teil solltet ihr als HTML-Anfänger nicht verändern, da die Funktionen sonst nicht mehr funktionieren könnte.
Label stylen
.reactionLabel {color: #ff0000;...}
Meine Klasse heißt reactionLabel. Ihr könnt sie natürlich nennen wie ihr wollt. Vergesst aber den Punkt davor nicht und merkt euch den Namen für später. In diese Klasse fügt ihr nun statt den drei Punkten euer gewünschtes Design ein. Falls ihr euch mit CSS nicht so richtig auskennt, gibt es wirklich zahlreiche Internetseiten, wo ihr schnell fündig werdet, wie ihr zum Beispiel die Schriftfarbe, -art oder -größe ändern könnt. color steht hier schon für die Schriftfarbe.
Nun navigiert ihr wieder zurück zu "reaction-buttons". Den Teil class='reactions-label-cell' löscht ihr und statt class='reactions-label' schreibt ihr class='reactionLabel' beziehungsweise ersetzt reactionLabel mit dem Namen eurer CSS-Klasse. Das ganze sollte dann so aussehen:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td> <span class='reactionLabel'> <data:top.reactionsLabel/></span> </td> <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/> </td> </tr></table>
</b:if>
</span>
Das Gute beim Erstellen und der Sinn der CSS-Klasse ist, dass man den Style getrennt von HTML hat und nicht alles vermischen anfängt. Wenn ihr im Nachhinein etwas stylen wollt, braucht ihr einfach nur die CSS-Klasse ändern.
Ich finde, Reaktionen sind eine tolle Möglichkeit, um uns Bloggern ein Feedback zu geben. Immerhin muss man nur einen Haken setzten, das dauert wirklich nicht lange und ist viel schneller als einen Kommentar zu schreiben. Natürlich freut sich aber jeder Blogger über einen Kommentar viel mehr!
Hoffentlich hat euch das Tutorial geholfen!
