0 Print Your Blog Posts

Add the print facility on your blog to make reading easier to print your blog posts. On this post i want to explain how to adding print facility on your blog so you or readers of your blog able to print your blog contents by one click.

Yes you can print your web page that you open from your own browser, but this way would print the hwole web page even the web header, sidebar other irrelevant sections of the blog,  it wasting your paper and ink and time.

But now i'll explain how to print your blog contents, only the articles in it, we'll use css and javascript structure to make this facility on your blog, and you'll put this "print post button" under your blog post to make readers easier to see your print facility.

How to :
Loggin to blogger >> Design >> Edit HTML >> Check the box expand widget templates

/* Adding CSS */

First add the following css to your blog template, place it before the closing </head> tag

<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: 95%}
</style>

/*   Next you'' need add the print button under your blog post */

How to :

• Find this line

<p><data:post.body/></p>

 And paste one of the following code after the previous line code :

          1. Print this post (link)
Print this post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

2. Print This Post Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>
</b:if>

.










3. Print this page (with image URL)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(backround url print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'><img border="0" src="print image url.gif" /> </a></span>
</b:if>

.








Now you can save your setting, open your blog and look at the  link or printing button under your blog post.

please try