Durch ein Google Badge könnt ihr euren Blog optimal mit einer Google+ Seite verbinden. Um die Aufmerksamkeit auf so ein Badge zu lenken, habe ich es mal testweise als Ribbon[=Band] gestaltet. Ihr seht es rechts oben im Blog. Wie das geht, beschreibe ich in diesem Post Schritt für Schritt.
Vorbereitung
Zunächst müsst ihr euch das Badge holen. Dazu gibt es eine Konfigurationsseite, auf der ihr eure Google+ Page ID eingeben müsst. Diese Page ID könnt ihr aus dem Browser auslesen - öffnet dazu eure Google+ Seite; oben im Browser findet ihr in der URL eine lange Zahlenkombination:https://plus.google.com/dashieristeurePageID
Auf der Konfigurationsseite bekommt ihr ein Link und eine HTML. Letzere packt ihr in ein HTML/Java Gadget - für die dynamischen Ansichten benütze ich ein Pseudo-Gadget, das ebenfalls dazu taugt. Holt euch die HTML für das 'Medium Icon' und schreibt dazu einen kurzen Text, dass sollte dann so oder so ähnlich ausschauen:
<div id="gplus"> <span id="text">5202 auf </span> <a href="https://plus.google.com/114218821965302140644?prsrc=3" style="text-decoration: none;"><img alt="" src="https://ssl.gstatic.com/images/ icons/gplus-32.png" style="border: 0; height: 32px; width: 32px;" /></a></div> </div>Gibt als Ergebnis dieses Badge:
Layout
Als erstes gestalten wir das Badge - Schrift, Schriftgröße und so weiter:#text { font-family: 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 1.25em; color: #333333; }Damit das Logo und die Schrift in die gleiche Zeile kommt, machen wir es zum
inline
Element und zentrieren es horizontal [weil das ganze Element später gekippt wird] und noch ein paar andere Änderungen.
#gplus img{ display: inline; vertical-align: middle; padding:0; background:transparent; border: none; }Schaut schon besser aus, oder?
Hintergrund
Wir geben dem Badge [das ja zum Ribbon werden soll] nun eine Breitewidth
und einen Hintergrund:
#gplus { width: 500px; background: rgb(255,255,0) text-align: center; }Das Badge wird nun schon mehr zum Band, ist aber mit dem durchgängigen Hintergrund langweilig.
Also spendieren wir dem Band einen Gradienten, der nach links 'auslaufen soll ...
#gplus{ background-image: -webkit-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -moz-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -ms-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -o-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); }Wer will, kann auch noch einen Filter plus Fallback für den Internet-Explorer schreiben - funktionieret allerdings zusammen mit dem Drehwinkel nicht besonders gut.
/* Internet Explorer */ *background: #ffff00; background: #ffff00\0/; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#ffffff00, endColorstr=#ffffffff);
Da kann sich jeder selber austoben, ich denke, bei einem Ribbon ist weniger mehr, also lassen wir es erst mal dabei bewenden.
Die Positionierung
Als erstes wird das Badge um 45º gedreht:#gplus { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
Das Badge wird
absolut
positioniert, womit es aus dem float
der einzelnen HTML Elemente genommen wird - mit top
und left
wird es genau in die Ecke eingepasst. Der hohe Z-Index ist nötig, damit das Badge später alle anderen Elemente überdeckt.
#gplus{ position:absolute; top:-30px; right:-240px; z-index:5000; }Zusammengefasst:
#text { font-family: 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 1.25em; } #gplus { position:absolute; top:-30px; right:-240px; text-align: center; width: 500px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); z-index:5000; background-image: -webkit-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -moz-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -ms-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: -o-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); background-image: linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); } #gplus img{ display: inline; vertical-align: middle; padding:0; background:transparent; border: none; }That's all! Das Ergebnis seht ihr oben - das Badge kann natürlich auch mit
rotate(-45deg)
nach links gedreht werden. Ob es wirklich Aufmerksamkeit erzeugt, weiß ich natürlich noch nicht, zumindest bin ich der erste, der ein Badge als Ribbon in den dynamischen Ansichten verbaut hat. Ist ja auch schon was :=).