How to Add Print It Button in any Blogger Template?

Print button and option for blogger template

data:blog.title
Print it

Blogger has tailored with all kinds of featured but still it is depended on third party widget. There are many simply but effective option like printing article is very significant. But this option is not included in Blogger so we have to add this option in different way.

Formerly printing option was not very important factor in Blogger Template but now a days most of the professional web developer adding print option in their designed template. And users can print the content by clicking on Print icon. Though we can print any webpage by the help of built-in option but it would be great if we can add Print page option at the end of article. To implement this option I will use simple code with CSS styling and attractive icons.

For adding Print It option into your Blogger template just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl+F 

Step 4 Paste the below code  Above/before ]]></b:skin>  

.BSPrintTXT span {
float:left;
font-size:150%;
text-transform:uppercase;
font-family:sans-serif;
font-weight:bold;
color:#ffffff;
padding:5px!important;
background:#333333;
margin-right:5px!important;
margin-bottom:5px!important;
}

Step 5 Now Find any code from below by Pressing Ctrl+F

<div class='post-footer'>
Or
<data:post.body/>

Step 6 Its time to add main code. So Paste the below code  Above/before <div class='post-footer'> or Below/after <data:post.body/>

<div class='BSPrintTXT'>
<span>Print It:</span>
<div style='float: left; padding-left: 10px;'>
<a href='javascript:window.print()' rel='nofollow'><img src='http://1.bp.blogspot.com/-GUgBm22x1Dk/VG2E3r3DXJI/AAAAAAAAIMw/O8AM1Oesh4c/s1600/BS%2BPrint1.png'/></a>
</div></div>
<div class='clear'/>

Styling the Print Icon

In this part we will use alternative Print icons if you don’t like the default Printer icon. So from the step 6 change the Image link only for showing different Printer icons.

Style 1


printer

Replace the above image code by any of one from below. For better performance I suggest you to host/upload image in your blog or hosting server and then use the image.

Style 2


article print

Style 3


print file

Style 4


color print

I think You have successfully added the printer option with your desired icons. This option is very useful for royal readers. Because if they found anything important then then can print the article/news/content by one click for further use. And this option also useful for new users those who don’t know how to print article from Browsers default menu. Beside of this if you have little CSS knowledge you can customize the widget looks in different way. If you have any suggestion or query about this Print widget then you can share with us.

Open Comment Box
Aslam Parvez says: 11/24/2014

nice button (Y)

Contact Form

Name

Email *

Message *