5202

ein Blog über technische Fragen zu Blogger

Blogger: Kommentar "Bubbles" mit CSS

von
Rechts neben meinen Überschriften seht ihr die Zahl der Kommentare in kleinen Symbolen, so genannte 'Bubbles'. Das ist auf vielen Foren, Blogs und Seiten inzwischen üblich - ich denke also, der Besucher versteht intuitiv, was damit gemeint ist.

Auf besonderen Wunsch hin erkläre ich heute, wie das gemacht ist (und noch ein paar Hintergründe dazu ...)

Test-Blog

Probiert das bitte zuerst in einem Test-Blog aus! Ein Layout ist schnell zerschossen ...

Layout Data Tags

Auf der Startseite möchte ich also die Anzahl der Kommentare anzeigen lassen und per Link direkt auf die Postseite springen. Das Layout Data Tag für 'Anzahl der Kommentare" ist numComments. Wenn ihr das in Blogger innerhalb der Posts verwenden wollt, schreibt sich das so:
<data:post.numComments/>
Das ganze wird nun mit einem A-Element umwickelt [gewrappt] - der Link zu den Kommentaren ist ein weiteres Data Layout Tag, nämlich post.url plus die Attribution #comments. Die Attribution meint den Punkt auf der Seite, zu der ihr mit der URL direkt springt.
<a class='bubble' expr:href='data:post.url  + "#comments"'><data:post.numComments/></a>
Okay, klingt kompliziert, ist im Grunde aber simpel ... als letztes müsst ihr das ganze nur noch dazu bringen, nur auf der Startseite angezeigt zu werden - dazu packt ihr das alles in ein konditionales 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>
Fertig!

Beachtet bitte, dass das Blogger Layout in XML und nicht HTML geschrieben ist - ihr müsst deshalb bei bestimmten HTML Zeichen auf die richtige Syntax achten.

Einbau

Um auf eurer Übersichtsseite den 'normalen' Link zu den Kommentare [5 Kommentare] wegzubekommen, blendet ihr am besten den Link mit CSS aus (Dank an Leserin melancholie für den Hinweis, das meine ursprüngliche Methode im neuen Dashboard GUI nicht funktioniert!):
.comment-link {display: none}
Dann setzt ihr unter HTML bearbeiten das kleine Häckchen bei Widget-Vorlagen komplett anzeigen.

Mit der Suchfunktion durch die Taste STRG und F durchsucht ihr nun euer XML nach dem Blog-Titel:
<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
Direkt _darunter_ kommt der Ausdruck von oben:
<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>
Mit dem Markup seit ihr fertig, alles weiter erfolgt mit CSS.

CSS

Ihr positioniert euer Bubbles absolute und platziert sie rechts außen:
.bubble {
  position: absolute;
  top: 0;
  right: 0;
}
Mit den Werten von top und left könnt ihr die Bubbles später noch fein justieren.

Ihr legt nun a bisserl Style auf die Bubbles:
.bubble {
  position: absolute;
  top: 0;
  right:0;
  display: block;
  width:40px;
  line-height:1.5;
  font-size: .7em;
  text-align: center;
  white-space:nowrap;
  font:  monospace !important;
  color:#fff;
  padding:0.2em  0;
  background:#111;  
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
}
Den charakteristischen 'Hacken' baut ihr nicht mit Grafik, sondern mit einem Pseudo-Element. Dabei ist alles mögliche möglich:
.bubble:after {
  content:"";
  position:absolute;
  bottom:-9px;
  left:11px;
  border-width:9px 9px 0px 0px;
  border-style:solid;
  border-color:#111 transparent;
  display:block;
  width:0;
}
Zusammengefasst mit allen Pseudoklassen, dem Pseudelement und Hover:
.bubble, .bubble:link, .bubble:visited {
  position: absolute;
  top: 0;
  right:0;
  display: block;
  width:40px;
  line-height:1.5;
  font-size: .7em;
  text-align: center;
  white-space:nowrap;
  font:  monospace !important;
  color:#fff;
  padding:0.2em  0;
  background:#111;  
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
}
.bubble:hover{background:#444;}
.bubble:after {
  content:"";
  position:absolute;
  bottom:-9px;
  left:11px;
  border-width:9px 9px 0px 0px;
  border-style:solid;
  border-color:#111 transparent;
  display:block;
  width:0;
}

Anmerkungen, Fragen?

Im Grunde eine einfache Bastelei - die Bubbles können natürlich noch viel 'detaillierter' gestaltet werden, seit kreativ! Falls es trotzdem Probleme damit gibt oder ihr eure superkreativen Bubbles der Welt mitteilen wollt - hinterlasst einen Kommentar! Falls ihr eine Frage habt, die thematisch partout hier nicht rein passt - dafür gibt's jetzt ein Forum.