0
This tutorial explains how to add a small print button below the post titles to print. This post explains two version of adding print button: "Using a custom designed print button" & "Using a third party print button(BEST)".

How To Add Print Button To Only Print Blogger Post?
Printing can be important to people, who are lazy to read it online or in a hurry to read it right there. Not just reading it right there, but some readers prefer to keep the blog post as a reference. It is wise to give freedom to the readers by placing a nice print button on the post. We know that Blogger is known for its great customization techniques, but unfortunately there had been great challenges to designers to produce a code to print just the posts. Today, we are going to look at two versions of adding the print button: Custom Designed Print Button and the Third Party Print Button(Without Bugs). Printing is also a mode of taking backup for your blog posts in the form of hard copies.

You might also like:
1. Converting blog posts to pdf
2. Sending blog articles as pdf via E-Mail.

Lets starts discussing the 2 versions:

Important: Backup the template before you proceed!

Version 1: Adding a simple custom print button 


Customizing the Blogger blog printer friendly:

Step 1: Go to Blogger control panel of your target blog.
Click "Template" > Click "EDIT HTML"

Step 2: Search(Ctrl+F) for:

</head>

Paste the below CSS before </head> :

CSS code:
<style type="text/css" media="print">
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #backlinks-container, #navbar-iframe,.noprint {display: none;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>

Note: The above CSS code hides header, sidebar, footer, date header, comments, feed links, backlinks and navbar from your blog.
To hide more elements from your blog which are not required, please add all those element id or class names along with the above ones.

Step 3: Before saving the template, you can preview it and have a look.
Finally, Save the template.

Adding the print button:(End of post or Below Post title)



Step 1: Go to Blogger control panel of your target blog.
Click "Template" > Click "EDIT HTML" > Click "Expand Widget Template".

Step 2: Find(Ctrl+F) for:

<data:post.body/>

Step 3: Just after <data:post.body/>  |||||||||[This step will create the button end of post]
OR
Just before <data:post.body/> add the below code: |||||||||[This step will create the button below post title]

Button Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<span style='background: url(http://1.bp.blogspot.com/-Mb4-GV4oQWg/T3dJoGapyrI/AAAAAAAAC_Y/VcQicRYQcW0/s1600/print-icon1.png) left no-repeat; padding-left: 25px;display:inline;'><a class="noprint" href='javascript:window.print()' rel="nofollow" >Print This Post</a></span>
</b:if>

Once you are up with the button code. It would look something similar to the one shown below:
DEMO BELOW


PROBLEMS USING VERSION 1:
1. Prints only first page
Reason: If the site uses the CSS attributes float and overflow.
Fix: Change the values to none and auto respectively.
2. Prints many blank pages
Reason: If all the elements are not hidden properly.
Fix: Hide all the elements on your page individually.


Version 2: Adding a third party print button 

This version of the print button plugin is a better one because, it is powered by a third party vendor. Lets see how this can deliver things for us.

Step 1: Visit http://www.printfriendly.com/button

Step 2: Choose Blogger/Blogspot from there.

Step 3: Choose your style.

Step 4: Click on either "Install Blogger widget" from there OR "Add code directly to template".
Note: I would prefer you to go with the second option of obtaining the code and manually inserting it on to your Blog template. Reason: We can add the code below the title/below post or any other place in the post.
[If you are lazy or scared to do it manually go for the first option]

A SAMPLE CODE FOR YOU:

<b:if cond='data:blog.pageType == "index"'>
<a expr:href='data:post.url + "?pfstyle=wp"' style="margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF">
<img style="border:none;" src="http://cdn.printfriendly.com/button-print-blu20.png" alt="Print Friendly and PDF"/>
</a>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<a expr:href='data:post.url + "?pfstyle=wp"' style=" margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF">
<img style="border:none;" src="http://cdn.printfriendly.com/button-print-blu20.png" alt="Print Friendly and PDF"/>
</a>
<b:else/>
<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script>
<a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF">
<img style="border:none;" src="http://cdn.printfriendly.com/button-print-blu20.png" alt="Print Friendly and PDF"/>
</a>
</b:if>
</b:if>

Insert the code before/after <data:post.body/> in your template as in the first version.

Step 5: Save the template.

You are done! The third party plugin is nice and can be used to print the post and as well take the PDF format of the post.

Disadvantage:
It can slow down the post pages a bit because the JavaScript and the icon images needs to be fetched away from your site. Otherwise, it is really nice.

Please let us know, what can be improved and your suggestions via comment section.
Hope you enjoyed this tutorial. Thanks for reading this article. Catch you again with more useful tutorials and articles. Have a good day. Please take some time to subscribe to our RSS feeds.

~iTechColumn

Post a Comment

 
Top