How To Add Print Button to Blogger Posts

This tutorial explains how to add a small print button below the post titles to print It is really necessary to Add Print Button to Blogger Posts, if there were any visitors or viewers want to print one or more posts in a blog.
Like this below :

Click Here to See the Example (scroll at the end of post to find printer button icon)

How to Add Print Button to Blogger Posts ? ...

First Step

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :
</head>

you can use (Ctrl+F) to find easily



4. Right before </head> place code of HTML below :

<style media='print' type='text/css'>#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer,#comments, #blog-pager,.feed-links, #backlinks-container, #navbar-iframe, #navbar-section, .subscribe_notice, .noprint {display: none;}.post,#content-wrapper,#main-wrapper {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.

Second Step

1. Find code of HTML below :

<data:post.body/>

you can use (Ctrl+F) to find easily

2. Right after <data:post.body/> place code of HTML below :

<!--Print-Button-BEGIN-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><a href='javascript:window.print()' style='text-decoration:none;' target='_blank'><img src='http://www.iconarchive.com/icons/artua/dragon-soft/24/Printer-icon.png' style='margin-bottom:-12px; cursor: pointer; border:none;-moz-box-shadow: none;-webkit-box-shadow:none;box-shadow:none;'/><span style='color:#1A67B8; font: normal bold 15px Arial.Helvetica,sans-serif; letter-spacing: 0.85px;'><i>Print This Post</i></span></a></b:if>
<!--Print-Button-END- http://atoz-networking.blogspot.in/ -->

NOTES :
you can change word-phrase Print This Post into other word-phrase, such as Click to Print or, anything you like.

3. Click save template and done.

Now you've already added print button in the bottom of your blogger posts.

Comments

Popular posts from this blog

Linux File and Directory Permissions

How to Disable SSL for Webmin

INSTALL CISCO VPN CLIENT ON WINDOWS 10 (32 & 64 BIT). FIX REASON 442