tag:blogger.com,1999:blog-39743832284782045132024-03-13T01:51:54.356-07:00Testing PurposeDinakar KRhttp://www.blogger.com/profile/10148152470155668711noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-3974383228478204513.post-24132042151522288992013-03-01T09:34:00.002-08:002013-03-01T09:37:54.240-08:00ಕನ್ನಡ ಬ್ಲಾಗ್ಗಿಂಗ್ ಪರೀಕ್ಷೆ<br />
ಕನ್ನಡ ಬ್ಲಾಗ್ಗಿಂಗ್ ಪರೀಕ್ಷೆ ಮಾಡುತ್ತಿದ್ದೇನೆ.<br />
ಬಲು ಸುಲಭ ಅಂತೆ.<br />
ಕ್ವಿಲ್ಪ್ಯಾಡ್ ವೆಬ್ಸೈಟ್ ಮೂಲಕ.<br />
<br />
<a href="http://www.quillpad.in/editor.html">Quillpad Editor. Try this!</a><br />
<br />
ಕೊಣನುರು ರಾಮಚಂದ್ರರಾವ್ ದಿನಕರ.<br />
<br />Dinakar KRhttp://www.blogger.com/profile/10148152470155668711noreply@blogger.com0tag:blogger.com,1999:blog-3974383228478204513.post-58200760606227364322011-07-20T22:03:00.000-07:002011-07-20T22:41:53.579-07:00Blogpost Print<span class="Apple-style-span" style="color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"></span><br />
<div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">As many of the posts here are tutorials, I thought it would be useful for readers to print off individual blog posts for future reference. Sure, it would be possible for a reader to choose the "print" option from their web browser window, but this would have printed the header, sidebars and other irrelevant sections of the blog, wasting paper and ink and time.</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Using a combination of CSS and JavaScript, I've developed a simple yet effective method of printing <span style="font-size: 1em; font-style: italic; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">only the blog post</span> (and comments) from each blog page.</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">In this post, I'll explain how you can also add <span style="font-size: 1em; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">effective print functionality to your Blogger posts in just two simple steps</span>.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfr0JWo4yiU2XPLpwW03vYe81DHTtIBqmx_TLJdgPS66JHZUu1uSItQ6oqFw1wwqWqImAgc3bXj28fcSitHimGJAhVTaK3TmX_R4Fa2eqTaKxhE29QQp4BZIY23rB-5p6YDcdFzimqyF97/s1600/a.bmp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfr0JWo4yiU2XPLpwW03vYe81DHTtIBqmx_TLJdgPS66JHZUu1uSItQ6oqFw1wwqWqImAgc3bXj28fcSitHimGJAhVTaK3TmX_R4Fa2eqTaKxhE29QQp4BZIY23rB-5p6YDcdFzimqyF97/s320/a.bmp.jpg" width="320" /></a></div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><br />
</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><br />
</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">To get an idea of what this post would appear like when printed, use the "Print Preview" function in your web browser. Whereas the current page appears colorful and includes the header, sidebars and other elements of this template, printed pages from this blog will appear like this instead:</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><br />
</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">As you can see in this example:</div><ul style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; line-height: 1.4; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 2.5em; padding-right: 2.5em; padding-top: 0px; text-decoration: none;"><li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">The header and sidebar sections do not appear</li>
<li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">Text is black printed against a plain white background</li>
<li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">The post spans the width of the printed page</li>
<li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">The post retains images and formatting</li>
<li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;"><span style="font-size: 1em; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Only the necessary areas will be printed!</span></li>
</ul><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></div><h3 style="background-attachment: initial; background-clip: initial; background-color: #dfdfdf; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; display: block; font-size: 18px; margin-bottom: 15px; margin-left: -5px; margin-right: -5px; margin-top: 20px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; position: relative; text-decoration: none;">How to install effective printing format for your Blogger posts</h3><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Although it took me a few attempts to ensure my posts would print in this way, I have created this tutorial to make it simple and fast for you to install in your own blogs.</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">There are only two steps to add this functionality to your own Blogger template:</div><ol style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">Add a few lines of CSS code (to make printed pages appear in this way)</li>
<li style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; font-size: 1em; margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; text-indent: 0px;">Add one line of JavaScript beneath your posts (which creates a link for readers to print the post)</li>
</ol><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">There are a few different options for the style of the print link, as I'll explain below.</div><h4 style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;">Add CSS Style Code to your Blogger Template</h4><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">To add the print styling code to your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and search for the closing <code style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></head></code> tag.</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Immedietly before this line, add the following lines of code (copy and paste this directly to your Blogger template):</div><div style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-decoration: none; width: 680px;"><code style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><style media='print' type='text/css'><br style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" />#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;}<br style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" />#main-wrapper {width: 95%}<br style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" /></style></code></div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">If you like, you can preview your blog before saving. On this preview page, you'll be able to see the print preview displays only your blog posts (not the sidebar or other unwanted areas).</div><div style="font-size: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Finally, save your template.</div><h4 style="font-size: 1em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;">Add a "Print this post" link</h4>Dinakar KRhttp://www.blogger.com/profile/10148152470155668711noreply@blogger.com0tag:blogger.com,1999:blog-3974383228478204513.post-38277408901419239302008-03-03T09:11:00.001-08:002008-03-03T09:41:38.180-08:00हिन्दी ब्लोग्सहम हिन्दी मे ब्लोग्गींग करेगा<br />टेस्ट ब्लॉग हैDinakar KRhttp://www.blogger.com/profile/10148152470155668711noreply@blogger.com0tag:blogger.com,1999:blog-3974383228478204513.post-1079843830531033832007-12-23T22:08:00.000-08:002007-12-23T22:09:54.791-08:00Test for htmlTesting for html and javascript mousetrail text.Dinakar KRhttp://www.blogger.com/profile/10148152470155668711noreply@blogger.com0