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!

42 Kommentare

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

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

    AntwortenLöschen
    Antworten
    1. Ach, das liegt nur dran, dass sie pink sind xD
      Dankeschön :)

      Löschen
  3. 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 :)

    AntwortenLöschen
    Antworten
    1. Ich habe das selbe Problem und habe deinen verlinkten Post berherzigt.


      Spruso

      Löschen
    2. Wenn es ein Mehrzeilenblock ist, versucht mal nur die erste Zeile zu suchen, vielleicht findet ihr sie dann. :)

      Löschen
  4. Ganz doofe Frage ... wo genau muss ich denn die CSS, die das ganze gestaltet einfügen? oO

    AntwortenLöschen
    Antworten
    1. Ich zitiere:

      Sucht wie immer nach:

      ]]></b:skin>


      Und darüber davon, kommt die CSS rein.


      ^^

      Löschen
  5. 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: www.sammys-wollgedoens.blogspot.de

    LG Sammy

    AntwortenLöschen
    Antworten
    1. Inwiefern nicht bei jedem Post?
      Magst du mir einen Post zeigen, wo's nicht geht?

      Löschen
    2. Na, z. B. hier: http://sammys-wollgedoens.blogspot.de/2013/08/heie-phase-und-entspannungsprojekt.html#links

      Löschen
    3. 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>

      Löschen
    4. 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

      Löschen
    5. 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: www.carrysbeautyblog.de

      Löschen
    6. 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.

      Löschen
  6. 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.

    AntwortenLöschen
    Antworten
    1. 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.

      Löschen
  7. Und jetzt ist mein Kommentarfunktion komplett weg :-(((

    AntwortenLöschen
  8. 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

    AntwortenLöschen
    Antworten
    1. 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 :)

      Löschen
  9. 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

    AntwortenLöschen
  10. 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.

    AntwortenLöschen
    Antworten
    1. Jetzt habe ich doch noch die Lösung gefunden =)

      Löschen
  11. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  12. Ich habe gerade festgestellt dass sich da was mit dem http://www.copypastelove.de/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?

    AntwortenLöschen
    Antworten
    1. Seltsam...
      versuch mal den Kommentarlink oberhalb des h3-Tags einzufügen anstelle unterhalb. Vielleicht hilft das was.

      Löschen
  13. 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!

    AntwortenLöschen
  14. 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

    AntwortenLöschen
    Antworten
    1. Mein Link:
      http://katiesfanstasticdystopia.blogspot.de/

      Löschen
  15. 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

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

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

      Löschen
    2. Bei mir lässt sich übrigens der Kommentarlink nicht entfernen....
      http://juliiastars.blogspot.com

      Löschen
    3. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    4. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
  17. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  18. 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

    AntwortenLöschen
  19. Ä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?

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!