How to add a Print button in a blogger?

How to add a Print button in a blogger?

A “Print this Post” button would be a lot of helpful on journal posts(especially on tutorial and instruction blogs). Before adding the Print this button to your journal, you have got to form your journal Printer Friendly. you'll be able to try this by adding some CSS to your blogger model. you'll be able to decide what components of your journal page ought to be written and that components shouldn’t be. as an example, it'd be higher if your blog’s header, sidebars, and comments do not seem within the prints. we are able to win this adding some printer specific CSS. If you would like you'll be able to investigate however this page can look once written, Click File Menu of your Browser and click on Print Preview. you'll notice that the header, footer, sidebars comments, and different unimportant text won't seem within the print. I even have hidden all victimization CSS. Here are the steps to implement identical to your journal.

Making your journal Printer-Friendly


1. Login to your blogger account and visit Layout > Edit hypertext markup language and appearance for


</head><br>


2. Just higher than this line, we'll insert our CSS which can outline however the page ought to be written, and what all shouldn’t be written thereon. (you will additional modify it in step with your desires.you can decide that selectors ought to be displayed and that shouldn't)


<style type="text/css" media="print"><br>
#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,.dontprint 
.post,#content-wrapper,#main-wrapper,#main</style><br>


3. Save the model and look at your journal. currently from the File menu of your Browser Click on the Print Preview

4. Adjust the CSS (hide a lot of selectors) till all unwanted parts are hidden on the Print Preview Page.

5. Now your journal is Printer Friendly.

Adding The Print This Link


1. visit Layout > Edit hypertext markup language and click on the Checkbox to expand the gadget templates.

2. Look for


<data:post .body/>



and below that paste the subsequent code


<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<span style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpDooQvXM_wxARJayXLugLgDkn6WXQNhAhCdBx3zfJAOkFCsAmnDCQU0Z0mqHZ2_NMoN22mcCYDxW_ljavdP6O2EH1LidPDDGK8rfQ2SGdj3m0aZXegTZR3eJYQrvOOmD86r74SgZYjg/s1600/print-this.png) left no-repeat; padding-left: 25px;display:inline;'><a href='javascript:window.print()' rel="nofollow" >Print this post</a></span>
</b:if>



Print this post

By this Print, the button will appear on your post

Bugs:


1. The whole page isn't obtaining written. It prints the primary page solely and truncates the remainder.

Solution: - If your model uses the CSS properties float and overflow, then this downside may arise. a technique to mend this is often to reset the float and overflow sorts of the selectors to the default values none and visual respectively(reset the selector designs within the printer CSS)


Read More: