Montag, 16. Februar 2009

Blogger-Hacks: Blog-Links als QR-Code anzeigen

Die Berliner Sparkasse fährt momentan eine große Werbekampagne für ihr neues Kontogebührenmodell. So weit, so gut.
Aber was kann man auf den zahlreichen Plakaten in der Stadt noch sehen? Einen QR-Code.
Ich hatte ja hier schon mal kurz etwas darüber geschrieben: Es geht um diese netten Schwarz/Weiß-Codes, die mittels geeigneter Software ihren Inhalt (Text, Links, etc.) preisgeben.
Diese Software ist in Form des “Barcodescanners” auf den meisten Nokia-Geräten mit Symbian S60 schon vorinstalliert. Im alten Blog-Layout hatte ich einen statischen Code in der rechten Seitenleiste, der auf die Homepage verwies. Nachdem die Geschichte mit den quadratischen Barcodes aber anscheinend langsam massentauglich wird (siehe oben oder auch die Codes in der WELT kompakt :-) ), habe ich hier pro Blog-Artikel einen eigenen Code installiert, der unter dem jeweiligen Artikel abrufbar ist.
Wenn ihr wissen wollt, wie das geht, lest einfach weiter …

Zur Erzeugung der QR-Codes benutze ich den entsprechenden Webservice der Schweizer Firma Kaywa, die auch ein kostenloses Programm zum Lesen der Barcodes zur Verfügung stellt, den Kaywa Reader.
Jedenfalls kann man auf der Homepage von Kaywa auch QR-Codes generieren und diese Möglichkeit habe ich in meinem Blogger-Template folgendermaßen eingebunden:

<!-- QR-Codes --> 
<span class='post-qrcode'>
           <a expr:href='&quot;http://qrcode.kaywa.com/img.php?s=7&amp;d=&quot; + data:post.url' target='qrcode'>QR-Code</a>
</span>
<br/>

Die CSS-Klasse “post-qrcode” habe ich natürlich vorher definiert, am besten ihr kopiert einfach eine, die dem Design ähnlich ist, das ihr mit dem Link haben wollt – bei mir waren es eben die Links unter dem Posting (post-footer-line).
Hier mal meine CSS-Deklaration:
.post-qrcode { 
        background:url(http://link.zum.Icon) no-repeat;
        margin:0;
        padding:0 0 0 18px;
}
Dann die Stelle im Quellcode suchen, an der die Links wie Kommentare etc. definiert werden, bei mir beginnt sie mit:
<p class='post-footer-line post-footer-line-1'>
Dort dann den Quellcode von ganz oben hineinkopieren und das Ganze ausprobieren. Eine 100%ig sichere Anleitung kann ich hier leider nicht veröffentlichen, da die finale Platzierung davon abhängt, wo ihr die Links einblenden wollt. Es gibt diverse Möglichkeiten und jedes Blogger-Template hat so seine Eigenheiten.

Aber wer im Blogger-Quellcode rumfummelt, der hat sicherlich ein laienhaftes Grundwissen und wird’s schon hinbekommen :D

Trotzdem: Bei Fragen fragen!

blog comments powered by Disqus

Design von Dicas Blogger, angepasst durch Mario Ruprecht