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 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 CSS --></style>
No comments