TutZone » Blogger Tricks And Tutorials » How To Add A “Print This” Button In Your Blog

March 22, 2010

TEXT SIZE minus plus

How To Add A “Print This” Button In Your Blog

by Bariski 14 Comments
Advertisement
You Might Be Interested In Our Popular Article
  • Most Essential Free Softwares After Windows Installation

    • It depends on your blog or website if having a print button in your blog is good. For most blogs its a good option to have it. Readers of TutZone appreciate this button, because they can print the articles they like.

    If you think its a good idea to have one, here is the procedure:

    You may also want to go through previous Resources:

    For WordPress Users:

    Note: Do take backup of your theme before you try this.

    01. Go to Appearance => Editor.
    editor

    02. Then choose single.php file from right hand side and add below code just where you want the print button to appear
    single.php

    <a href="javascript:window.print()" rel="nofollow">Print This!</a></span>


    03. Save file and you are done.

    04. You can also use a different stylesheet for printed pages. A example is shown below:

    body, input, textarea, select {
    color: #000;
    background: none;
    }

    ul.primary-links, ul.secondary-links,
    #header-region, .sidebar {
    display: none;
    }

    body.sidebars, body.sideber-left, body.sidebar-right, body {
    width: 640px;
    }

    body.sidebar-left #center, body.sidebar-right #center, body.sidebars #center,
    body.sidebar-left #squeeze, body.sidebar-right #squeeze, body.sidebars #squeeze {
    margin: 0;
    }

    #wrapper,
    #wrapper #container .breadcrumb,
    #wrapper #container #center,
    #wrapper #container #center .right-corner,
    #wrapper #container #center .right-corner .left-corner,
    #wrapper #container #footer,
    #wrapper #container #center #squeeze {
    position: static;
    left: 0;
    padding: 0;
    margin: 0;
    width: auto;
    float: none;
    clear: both;
    background: none;
    }

    #wrapper #container #header {
    height: 130px;
    }

    #wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
    text-shadow: none;
    color: #000;
    }


    For New WordPress Users:

    You can try out following recommended plugins:

    PrintFriendly
    Or
    WP-Print

    Further Resources:

    5 Solutions to Common WordPress Problems

    That concludes this simple and useful tutorial. Hope you like it.



    at 2:42 pm
    Print

    About the Author

    When I was born I was so shocked I didn't speak for a year and half...... My brain has 2 parts, Right and Left, The Right one has nothing left in it and the Left one has nothing right in it......Who says Nothing is Impossible?? I've been doing nothing for years......