How to create print friendly CSS for blogger blog

In the current print media digital world, printing is perhaps not an enormous priority for somebody building a website, as well as for small- to medium-sized blogs. However, some users would possibly need to take a hard copy of some articles, thus it’s nice to supply an avid layout for printing of post page. Blogger templates don’t supply native print support CSS, as it’s largely a distinct segment feature most blogger blog owners wouldn’t evoke. So, I began to teach you how to create a print friendly CSS for your blog and sites.

The idea is pretty simple: you primarily wish to reset colors, background pictures, content width, page size and more to a lot of print-safe black & white and conceal all page components that don’t add up in an exceedingly static medium as print, particularly navigation menu, left and right sidebars and widgets, sharing buttons, the footer content, videos snapshot and comment box etc. However the task is formed tougher by the method Blogger templates handle sidebars, with a combination of margins and padding CSS, in all probability to stay the simplest compatibility with Mozilla Firefox browser.

So we do some work for it, write down which parts of your blog hide when taking a print like menu bar, left and right sidebars and widgets, sharing buttons, footer content, comment form etc.

Now open your blog in Mozilla browser and right click on page, open “Inspect Element” window. In inspector view (HTML view) find out all ID’s and CSS Classes associated with components which one you want to hide during printing. Other thing is content size, post content cover page width during print, in this case most of blogger template have same id that is #main-wrapper and #content-wrapper.

In my case I am using following media print CSS for my blog:

/* Media Printing By LabLance.Com */
@media print { #nav, #nav-top, #menutopx, #navinti, #search-form-feed, #sidebar-wrapper, #sidebaratas, #footer-wrapper, #related-postsx, #comments, #sidebar-atas, .sidebar section .linesx, .jump-link, .post-footer{ display: none;}
#main-wrapper, #content-wrapper, #content-atas, .menu-xitem {width: 100%;}}
/* End Media Print */

How to add the CSS code inside your template:

1. Go to your Dashboard on Blogger

2. Click on >> Template

3. Click on >> Edit HTML

4. Search for </b:skin>

5. Paste below CSS code afther </b:skin> tag and save template.

<style type="text/css">@media print { #nav, #nav-top, #menutopx, #navinti, #search-form-feed, #sidebar-wrapper, #sidebaratas, #footer-wrapper, #related-postsx, #comments, #sidebar-atas, .sidebar section .linesx, .jump-link, .post-footer{ display: none;} #main-wrapper, #content-wrapper, #content-atas, .menu-xitem {width: 100%;}}</style>