Kommentare als Bubbles anzeigen ♥♥♥♥

Hallo :D
Hier ist mal wieder Myri, frisch aus dem KreaTief, mit einem neuen Tutorial im Gepäck.
Ich hab ja vor einer Weile hier auf CPL ein Tutorial zur Datumsanzeige geschrieben (hier) und wurde dort auch immer wieder mal gefragt, wie ich denn die Kommentaranzeige mit den Bubbles gemacht habe, die man auf meinem Vorschaubild sehen konnte.


Da diese Frage auch aufgetaucht ist, als ich die Bubbles noch aktuell in meinen eigenen Designs drin hatte, hab ich heute beschlossen, dass ich euch das eigentlich auch mal noch erklären könnte.
Dieses Tut hat Schwierigkeitsstufe 4, aber eigentlich nur deswegen, weil gewisse "blogger-interne" Ausdrücke verwendet werden. Ansonsten ist es eigentlich fast hürdenfrei. Und weil ich nicht erzählen will, dass es meine Idee ist, lass ich jetzt mal noch einen Link zu Olivers Originaltutorial zu diesem Thema da, er erklärt wie man Sprechblasen machen kann. Wer also noch ein alternatives Beispiel haben will, klickt auf den Link um seine CSS anzugucken :)

Okay, wie immer ist das eine HTML/CSS-Sache.
Die Grundfrage ist: Wie kriegen wir den Kommentarlink aus dem Postfooter nach oben?

1. Kommentarlink bauen

Macht wie immer alles zuerst in einem Testblog!

Nun, die Grundidee ist nicht, das ganze zu verschieben und umzuschreiben, sondern einfach den alten Link auszublenden und dafür einen neuen hinzuzufügen.
Der Link soll genau die gleichen Dinge tun wie der ursprüngliche Kommentarlink auch:

1. Beim Klicken zum Kommentarformular führen
2. Anzahl Kommentare anzeigen
3. Nur auf der Startseite angezeigt werden

Nun, wenn ihr mal auf den Link klickt und euch die URL anseht, steht da eigentlich nur die Post-URL und ein #comments dahinter. Da muss unser Link hinführen. Das schreiben wir mit einer expression. Und zwar so:

<a expr:href='data:post.url + &quot;#comments&quot;'>CommentNumber</a>

Okay, nur CommentNumber hilft uns nicht weiter. Was wir nun als Linkinhalt angeben ist folgendes:

<data:post.numComments/>

Danach brauch unser Link noch eine Klasse (in diesem Fall "bubble"), damit wir ihn spezifisch gestalten können. Der komplette Link schaut jetzt also so aus:

<a class='bubble' expr:href='data:post.url + &quot;#comments&quot;'><data:post.numComments/></a>

Damit der Link immer nur auf der Startseite angezeigt wird und nicht auch auf der Postseite, müssen wir den Link jetzt noch in einen Tag packen, der Blogger sagt, dass wir das nur auf dieser Seite wollen. Das geht mit einem conditional tag:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='bubble' expr:href='data:post.url + &quot;#comments&quot;'><data:post.numComments/></a>
</b:if>

Und schon haben wir unseren Link gebaut!

2. Einbauen

Okay, als nächstes wird der Kommentarlink eingebaut. Da unser Bubble eigentlich oben platziert wird, tun wir das auch mit der Linkplatzierung in der HTML so. Dafür müssen wir als erstes in unserem Blog die HTML bearbeiten. Unter Vorlage -> HTML bearbeiten



Sucht nach folgendem Auszug:

<h3 class='post-title entry-title' itemprop='name'>

Den werdet ihr zwei Mal finden. Wenn ihr von ganz oben die Suche gestartet habt, müsst ihr beim zweiten Suchergebnis weiterfahren.

Unterhalb von dieser Zeile fügt ihr den Kommentarlink, den wir eben gebaut haben, ein:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='bubble' expr:href='data:post.url + &quot;#comments&quot;'><data:post.numComments/></a>
</b:if>

Dann speichert ihr eure Vorlage.

3. Alten Kommentarlink entfernen

Als nächstes kommt wie immer mein Lieblingsteil, die CSS.
Bevor wir allerdings unseren bubble-Link gestalten, möchten wir den ursprünglichen Kommentarlink entfernen. Das geht mit einer einzigen CSS-Anweisung.
Die CSS füg ich wie immer im HTML ein. (kann aber auch im Vorlagendesigner gemacht haben.)
Sucht wie immer nach:

]]></b:skin>

Und darüber davon, kommt die CSS rein.
Das ist der Schritt, bei dem die meisten Fehler passieren.

Im neuen Editor, rutscht gerne mal die geschweifte Klammer (}) nach unten und die ganze CSS wird innerhalb einer anderen reinkopiert. Das funzt dann natürlich nicht. Achtet also darauf, dass ihr wirklich oberhalb von

]]></b:skin>

kopiert. Falls ihr also folgendes habt:

}]]></b:skin>

Stellt sicher, dass ihr einen Zeilenumbruch nach der geschweiften Klammer macht.

Okay, so viel dazu. Jetzt zur Entfernung des alten Kommentarlinks.
Wir blenden ihn ganz einfach aus:

.comment-link{
display: none;
}

4. Kommentarlink gestalten mithilfe von CSS

Okay, nun zur CSS unseres neuen Links. Wie immer geb ich euch meine CSS, zusammen mit Erklärungen daneben, damit ihr versteht was jede Zeile macht.

.bubble, .bubble:link, .bubble:visited { /*angesprochen wird Link allgemein, sowie besuchte Version des Links*/
position: absolute; /* absolute Positionierung */
top: 93px; /* Abstand von Oben */
left: -55px; /*Abstand von Links*/
display: block; /* Blockdisplay, ist nicht weiter wichtig */
width:30px; /* Breite des Links */
height: 30px; /* Höhe des Links */
font-size: 25px; /* Schriftgrösse */
text-align: center; /* Zentrierung des Texts */
color: #f9f9f9; /* Schriftfarbe (weisslich) */
padding:10px; /* Abstand nach aussen */
background-color: rgba(209, 62, 77, 1); /*Hintergrundfabe (pinklich) */
-webkit-border-radius:100px; /* Abrundung zu einem Kreis */
-moz-border-radius:100px; /* Dito */
border-radius:100px; /* Dito */
text-decoration:none; /* keine Textunterstreichung (für Links automatisch) */
letter-spacing: 1px; /* Abstand zwischen Zeichen */
-webkit-box-shadow: -1px 0px 2px 1px rgba(0, 0, 0, 0.7); /* Schatten um den Link */
box-shadow: -1px 0px 2px 1px rgba(0, 0, 0, 0.7); /* Dito */
}

.bubble:hover{ /* Link im Zustand, wenn die Maus drüberfährt */
text-decoration:none; /* keine Unterstreichung */
color: #000; /* Schriftfarbe (schwarz) */
}

Besonders bei der Positionierung kommt es ganz drauf an, wo ihr den Link haben wollt. Probiert hier einfach verschiedene Werte aus. Wenn ihr zufrieden seid, speichert die Vorlage und ihr seid fertig.

Allgemein sind euch keine Grenzen gesetzt, ihr könnt den Link so gestalten, wie ihr wollt. Mit CSS ist alles möglich. (und im Notfall, kann auch ein Bild dahinter platziert werden mit background: url(BILDURL);)

Fragen?

Wie immer stehe ich für jegliche Fragen zur Verfügung. Schreibt sie in einen Kommentar oder in mein Kontaktformular und ich werde so schnell wie möglich eine Antwort schreiben.
Ich versuche natürlich so gut es geht zu helfen. Auch wenn die Schwierigkeitsstufe eher hoch ist, soll euch das nicht davon abhalten, es zu versuchen. Mein Ziel ist es, dass es am Ende alle verstehen, also probiert es ruhig!