7.5.13

How to optimize your blogger blog for print

To add the CSS code, go to ‘Template’ on the new Dashboard, press "Customize", then "Advanced", "Add CSS" and paste the code in the box – if you have other CSS customizations saved here, add the print CSS preferably at the bottom, to make this the last thing the browser reads and renders on the page.

------------------------------

@media print {
/* hide Blogger bar */
#navbar-iframe { 
 display: none; }
/* Reset colors to black text on white background and background images */
.header, .footer-outer, .post-outer { 
 background-color: white; background-image: none; 
 color: black; text-shadow: none; }
/* Hide Pages, sidebars, embedded videos & iframes */
.tabs-outer { 
 display: none; }
.sidebar { 
 display: none; width: 0%; }
iframe, object { 
 display: none; }
.blog-pager, .quickedit, .post-feeds, .post-share-buttons, .comment-replybox-thread { 
 display: none; }
/* Reset post width to fill the entire page */
.main-inner, .columns {
   padding-left: 0px !important;
   padding-right: 0px !important;
   width: 100%; }
.content-outer { 
 margin: 0px; width: 100%; }
.content-inner { 
 padding: 0px; width: 100%; }
.post-outer { 
 border: none; width: 100%; }
/* Specific for my blog */
#footer-2-1, #footer-2-2, #sharenav, .buttonlist, .videocontainer { 
 display: none; }
}

No comments: