Tipps & Tutorials, tutorial

Kommentare als Bubbles anzeigen ♥♥♥♥

Hallo 😀

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!

38 Comments

  1. Verena

    13. September 2013 at 23:23

    Du bist die Beste! Danke für das tolle Tutorial!
    Liebe Grüße und ein schönes Wochenende,
    Verena

    1. Myriam Kreatief

      14. September 2013 at 13:40

      Danke dir 🙂
      Gleichfalls ^^
      Myri

  2. Oliver Doetsch

    14. September 2013 at 18:25

    Besser erklärt, als ich es jemals könnte :D. Außerdem sind deine Bubbles viel schöner .. Neid .. Yeah :)! ^^

    1. Myriam Kreatief

      14. September 2013 at 20:34

      Ach, das liegt nur dran, dass sie pink sind xD
      Dankeschön 🙂

  3. Isabella

    15. September 2013 at 12:38

    Der Tutorial ist toll! Ich wollte ihn machen, aber bei der neuen Vorlage finde ich die Zeile
    ''
    nicht. Ich habe mit Strg+F gesucht, aber immer kam 'keine Ergebnisse'gefunden. Hab es jetzt schon ein paar Mal probiert! Könnt ihr mir weiterhelfen?

    Liebe Grüße 🙂

    1. Spruso von Spruso

      21. September 2013 at 19:17

      Ich habe das selbe Problem und habe deinen verlinkten Post berherzigt.

      Spruso

    2. Myriam Kreatief

      22. September 2013 at 8:38

      Wenn es ein Mehrzeilenblock ist, versucht mal nur die erste Zeile zu suchen, vielleicht findet ihr sie dann. 🙂

  4. Tin

    15. September 2013 at 16:38

    Ganz doofe Frage … wo genau muss ich denn die CSS, die das ganze gestaltet einfügen? oO

    1. Myriam Kreatief

      15. September 2013 at 17:55

      Ich zitiere:

      Sucht wie immer nach:

      ]]></b:skin>

      Und darüber davon, kommt die CSS rein.

      ^^

  5. SAMMY

    15. September 2013 at 17:18

    Hallo! Erstmal vielen Dank für die enorme Arbeit. Das muß auch mal gesagt werden! Aber es gibt ein kleines Problem: Es hat alles funktioniert – nur, die Bubbles funktionieren nicht bei JEDEM Post. Wenn Du mal schauen magst: http://www.sammys-wollgedoens.blogspot.de

    LG Sammy

    1. Myriam Kreatief

      15. September 2013 at 17:53

      Inwiefern nicht bei jedem Post?
      Magst du mir einen Post zeigen, wo's nicht geht?

    2. Myriam Kreatief

      15. September 2013 at 19:27

      Ach so, das liegt daran, dass wir den Link nur auf der Startseite anzeigen lassen. Wenn du die Bubbles überall haben willst, musst du den HTML-Code verändern, einfach den konditionalen Tag weglassen:

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

    3. SAMMY

      16. September 2013 at 12:37

      Huhu! Erstmal vielen Dank für die schnelle Rückmeldung. Leider funktioniert es immer noch nicht. Das Problem tritt tatsächlich auf der Startseite auf. Richtig gezählt wird – aber anklicken kann ich nur bei einigen Posts.

      LG Sammy

    4. Carry S.

      15. December 2013 at 10:34

      Schließe mich hier an, sobald ich zwei Posts am selben Tag veröffentliche sieht man die Bubbles nur am aktuellsten Post des Tages. Wie lässt sich das beheben?

      Falls du schauen magst: http://www.carrysbeautyblog.de

    5. Myriam Kreatief

      15. December 2013 at 16:02

      Das ist kein Problem des Tutorials, sondern Blogger-Intern. Das sähe genauso aus, wenn du ein normales Datum hättest. Blogger zeigt immer nur das Datum des ersten Posts mit dem gleichen Datum an. Das liesse sich nur dadurch beheben, dass du das Datum-Tag durch einen TImestamp ersetzt, aber der Aufwand lohnt sich meiner Ansicht nach nicht.

  6. Frau Schewtschenko

    20. September 2013 at 4:35

    Bei mir gehts nicht 🙁 Die Kommentare hab ich iwie verschwinden lassen..aber nicht über HTML, weil ich dieses "]]>" nicht finde..nur das normale…dann füg ich es oben drüber ein..speichere. Und?Das erscheint vor meinem Header rechts in schwarzer Schrift 🙁

    Das hab ich dann bei CSS hinzugefügt..so Kommentare iwie weg..dann tu ich den Link für die Bubbles Form auch bei CSS rein..funktioniert nix.

    Den 1. Link "h3 Code" find ich nur 1x mal..nicht zwei mal…

    Oh man. Das mit dem Datum war iwie einfach und jetzt bei den Kommentaren komm ich nicht weiter.

    1. Myriam Kreatief

      20. September 2013 at 9:15

      Das ist das normale. Und dort kommt nur die CSS rein, nicht der Link. Wenn du ihn nur einmal findest, dann füg den Kommentarlink unter dem einen Ergebnis ein.

  7. Frau Schewtschenko

    20. September 2013 at 4:51

    Und jetzt ist mein Kommentarfunktion komplett weg :-(((

  8. Anonym

    25. September 2013 at 12:32

    Toller Beitrag. Klappt auch alles soweit, aber ich möchte gerne den 'Bubble' unter dem Post auf der Posttrennerlinie (so wie hier: http://sodapop-design.de/) haben. Mit einem "Bubble" klappt das natürlich, aber da Post ja immer unterschiedlich lang sind, kann man ja nicht immer dieselbe Position wählen. Geht es irgendwie, dass man die 'Bubble' am dem Posttrenner fixieren kann?

    Wäre super, wenn mir jemand helfen kann 🙂

    lg Laura

    1. Myriam Kreatief

      25. September 2013 at 18:54

      Das ist machbar, müsste man aber anders platzieren. Das würde dann im Post-Footer platziert werden, also der gebaute Kommentarlink ist dann irgendwo unter post-footer (da gibt es eine Klasse zu, ich weiss nur gerade nicht, wie sie heisst) und die CSS müsstest du dann auch anpassen. Ich erklär jetzt mal nicht im Detail, sondern frag einfach mal wie gut deine Kenntnisse sind und wie sehr ich ins Detail gehen muss. Falls du gute Kenntnisse hast, reicht das hier vielleicht schon, ansonsten kannst du mir gerne eine Mail schreiben und ich schick dir dann die Erklärung zu 🙂

  9. Franziska Bierbaum

    31. October 2013 at 5:48

    Hallo, die Zahl für die Kommentare befinden sich jetzt im Posttitel- aber ich kann leider die Bubble nicht ändern!!! Wo ist mein Anwenderfehler? Die CSS befindet sich oberhalb von ]]> …

    Lieben Gruß Franzi

  10. Sakura Clow

    13. November 2013 at 15:24

    Erstmal finde ich dein Tutorial wirklich super, auch das du es hier rein gestellt hat und eigentlich ist es auch total einfach und trotzdem ändert sich rein gar nichts auf meinem Blog.
    Zwar ist es kein Problem den alten Kommentarlink zu entfernen, aber bei dem neuen habe ich irgendwie Probleme und ich weiß nicht woran das liegen könnte.

    1. Sakura Clow

      13. November 2013 at 19:40

      Jetzt habe ich doch noch die Lösung gefunden =)

  11. Jennifer

    31. December 2013 at 14:35

    Ich habe gerade festgestellt dass sich da was mit dem http://www.lovemira.de/category/tipps-tutorials/2013/02/anfangsbuchstabe-des-posttitels.html Tutorial beißt.
    Der veränderte Anfangsbuchstabe wird nur gezeigt, wenn ich den "gebauten Kommentarlink" lösche. Sobald der Code drin ist, sieht die Überschrift wieder normal aus.

    Kann man da was machen damit beides geht?

    1. Myriam Kreatief

      31. December 2013 at 16:07

      Seltsam…
      versuch mal den Kommentarlink oberhalb des h3-Tags einzufügen anstelle unterhalb. Vielleicht hilft das was.

  12. Schnubbeldupp

    13. January 2014 at 20:14

    Ich finde das Tutorial super. Erst wusste ich nicht so recht, wo ich den ersten Punkt hinschreiben soll. Aber ich habs einfach ausgetestet.
    Nun hab ich auch so schicke Bubbles, allerdings hoffe ich nun, dass meine "Besucher" die Bubbles auch als Kommentarfunktion erkennen 😉

    Danke!

  13. Katie Ki-Gö

    28. February 2014 at 11:37

    Vielen Dank für dieses tolle Tutorial.=) Es hat zwar soweit geklappt, aber irgendwie wird die Bubble bei mir immer nur beim obersten Beitrag angezeigt und bei den anderen nicht! =(
    Kannst Du mir erklären woran das liegen könnte?

    Ganz liebe Grüße
    Katie

    1. Myriam Kreatief

      9. March 2014 at 12:52

      Ich kann's überall sehen.

  14. Sandra Süsser

    31. March 2014 at 18:45

    Vielen Dank für das tolle Tutorial <3

    Habe es hier zusammen mit den Kommentar-Bubble-Tutorial ausprobiert und es funktioniert einwandfrei 🙂

    http://sandras-artblog.blogspot.de/

    lG

  15. Julia Stars

    23. April 2014 at 21:59

    Ich habe alles so angewendet, wie oben beschrieben, allerdings wird bei mir immer eine 0 angezeigt, egal ob ich Kommentare habe oder nicht.

    1. Myriam Kreatief

      23. April 2014 at 22:01

      verwendest du G+-Kommentare? Dann funktioniert dieser Weg nicht. Das ist nur für die alte Kommentarfunktion gedacht.

    2. Julia Stars

      23. April 2014 at 22:10

      Bei mir lässt sich übrigens der Kommentarlink nicht entfernen….
      http://juliiastars.blogspot.com

  16. Nicole tta

    2. May 2014 at 18:34

    habe irgendwo einen fehler 🙁

  17. Eva Jasmin

    1. January 2015 at 22:33

    Bei hat jetzt alles super geklappt, nur leider kann ich die Zahl nicht mittig im Kreis platzieren, beim Datum geht das ja mit den jeweiligen Padding-top oder Padding-bottom werten, habe ich gerade rausgefunden, wie geht das denn bei den Kommentaren? 🙂
    eva-jasmin.blogspot.de

  18. Emma Grey

    4. March 2016 at 21:02

    Ähm wenn ich jetzt auf die Bubble klicke, kann man leider gar nicht mehr kommentieren, das Kommentarfeld inkl. Kommentare sind einfach weg :'D Was kann ich tun?

Leave a Reply