How to Add Print This Post Button in Blogger - Hubuhs. Living and Sharing

Hubuhs. Living and Sharing

Hubuhs is spot for living, blogger, tech, sport, travel, auto and food

Let's review a topic about how to add print this post button on your blog. It's really necessary to Add Print Button to Blogger Post... nopict

How to Add Print This Post Button in Blogger

Let's review a topic about how to add print this post button on your blog. It's 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

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, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}#main-wrapper {width: 100%}</style>


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://www.hubuhs.com-->

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.
↩ Next Back to Top Prev ↪