Welcome Enjoy Tutorials

Liked us?

Wednesday, May 1, 2013

How to Include a Print Button on Each Blog Post?

Depending on what type of blogs can make much sense to print a button associated with each entry. Imagine a blog of recipes or craft blog. Besides we can also print PDF download post.

Of all the services I recommend PrintFriendly evaluated (click to see the print button standard service). You can customize the button and get a code for Web, Blogger and WordPress. Once set, clicking opens a new window PrintFriendly as if it were a preview. The user can choose to print, export to PDF or send by email. You can even remove text. We also explain how to put it on the blog (step 7 later in this tutorial).

Once seen, if the result is what you expect you're done. If instead you want to improve the code or customize the icon with another chart keep reading.

Steps to improve PrintFriendly code and add a custom icon


    1.Get the print icon. I recommend the service www.iconfinder.net
    2. Choose either the size of the icon, I select is 24px * 24px
    3.Download in PNG format to your computer
    4. Now we host the PNG. I recommend Google Sites (as we saw when we talk about social icons on the blog), which allows you to create a website and host files and then access them from the blog, follow these steps:
  • Enter Google Sites
  •  Open your site or create a new one (remember that the site you have to be public)
  • Go to Manage Site option from which you can upload attachments.
  • Add the printer icon you have chosen.

    5.Now look at the PrintFriendly Enhanced HTML (a single bond):

        <a expr:href='"http://www.printfriendly.com/print?url=" + data:post.canonicalUrl' target='_blank'> <img alt = 'Print or Export PDF' src = 'https://sites.google.com/site/iniciablog/PDF24.png' /> </ a>

             As selected in the red since indicate the url of your site and the PNG
       
    6.Copy the snippet of HTML to a notebook to customize it.
    7. When you have it, copy it and go to the Template tab and then HTML Editor
    8. For safety make a copy of the template "Download Full Template".

    9.Search <b:include data='post' name='shareButtons'/> (use internal search ).Press CTRL + F
    10.Paste the code you copied right below the line you have found.
    11.Save the template and view the blog.


On my case the meaning of that button is that you can serve you and apply it successfully. Leave your comments. Thank you.

PrintFriendly Extension for Google Chrome
If you are using Google Chrome, you might like to assess the extent corresponding to PrintFriendly to add it to your browser.
Enhanced by Zemanta

No comments :

Post a Comment

Botones Isometricos de Social Media




Barra Lateral Fija