When you print any web page, your web browser will automatically add the URL of the site in either the footer or the header area of all the printed pages. This is useful because you will always remember the source website where you printed those pages from.
The problem is that web page URLs can be long and complex and people are likely to make errors typing them into the browser.
An alternative would be that you create a short URL (using bit.ly or goo.gl) and append it all your printed pages. The other more convenient option is that you add a QR code to the printed copy that will link the printed page to the source web page with a quick scan.
A QR Code in the print copy of a web page
You will be surprised to know how easy it is to add a QR code to any web page.
If you want to implement this amazing stuff in your site, just add the following snippet to your website template.
<style type="text/css">
@media print {
body:after{
content:url(http://chart.googleapis.com/chart?
cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<<URL>>)
}
}
</style>
*Replace URL with the actual URL of your web page
We are basically adding a QR Code image after the <body> tag and since the CSS media type is set to “print,” the QR Code will only appear in the printed version of the page. The QR Code is generated dynamically using the Google Charts API and will vary based on the URL.
WordPress – To add QR Code support in WordPress print stylesheets, open the template file of your WordPress (like header.php or even index.php) and copy-paste the following code anywhere inside the <head> tag:
<?php if (is_single()) : ?>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<?= the_permalink(); ?>)
}
}
</style>
<?php endif; ?>
Blogger – The equivalent code for classic Blogger templates would be something like this. If you are using the new XML based Blogger templates, you probably need to use data:blog.canonicalUrl (for the permalink) with the condition set as <b:if cond=’data:blog.pageType == “item”‘> since we are only displaying QR codes on individual post pages and not the archives.
<ItemPage><Blogger>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<$BlogItemPermalinkURL$>)
}
}
</style>
</Blogger></ItemPage>
.jpg)
Here’s what you’ll get with the Google Maps app:
