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.

Get Your 3D Social Icons With Spin 360 degrees

3D Social Icons With the Css rotate when you place your cursor over each icon they spin 360 degrees, they then spin back 360 when the cursor is removed (Cool eh).I also have a slight opacity hover effect on the icons.So in this post I will show you how to add the icons to your blog, linked to your social profiles and feeds.

Add The Social Icons With Css Effects To Your Blog Like This sample:

OK so I have two tutorials, one for Blogger and one for Wordprtess.

Wordpress Tutorial

1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code

Widget Code
--------------------------------------------------------------------------------------------------------------------------
   <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTSOIhGbl5poxLc-5FkrhFTWtEc9ZqEDU9uPUpF2WHcT6U3rLhuhNyzeJGlzY4wxiEfpCh8S_Ot9rsubF7Xrttsf9PU2ev2KuTCUIwKJQ1Qy2ykT-SKwI34S6uRO6aXB6nRrIDc9fbziR/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Dcn-4uN-Ow6bPyX53a8g5P8LNdatq8MFRaTTPujdyVUr_4-3j2ocDQ20IjLu6qJS5ROLX1C4V6LLRCqIlubiV9aL1K6JQlkuDOvSevgD4w-ZBulX8T4dz1e-ARuZKN9WBE86R6sry_ZW/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62hdjOKdNS9xuS5KCzOGsieixeFMoltP8fjRBhKWphfCRgKZZ1T1Gey8nDRgjx6Hs2-Lyylh9pF6agzqfV0k1rxhsuOJEbwIT0C-Il2SSeQTfr_84YbT4JqgQNA6wJynMaW_b34gXI2s9/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TKBaHcvx-8KYCF3ddSX65kMISoBqOlpVfLz-rKK04p9Bo4MNf_gwUjV2EiwfKHSrJfLRxK6UofoVEdZHUf1k1zVleQcwt0Ah-f9ITlaIKo1CByBB6Vaex6fR3_ByXz3YIFzIZV07eMc8/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6pJcZAo24I7Azo43W1nocI_c3vuffo6TSMSxsFBP13fJ4-zQnLpvFSSIvHwEy-ChZIn5MFbPR9LYdcvA_60WH0wjNJbZ-AWa23ySe_9_fOe1U36dM5rpSvhoqkIXuPxl0mWBa4vqosOg/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xi0QuRG7gJFjsA7UTY5JoBzm900BmM-YTd33XOOsAd9euBgbIjz7Sne59O7FuUpYUj_UaAzfIIN2bH6Dr8dWYlF8aSzvAHoqT8fBpqZHROvAdx0eyAi9wRFbI7sgBJpNzDaJRWei_zyA/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>
------------------------------------------------------------------------------------------------------------------------

Important - Replace the yellow sections with your social profiles and feed URLs.

Note - If your familiar with Wordpress you can off course add the Css to your theme stylesheet.

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...

Blogger Tutorial

1) In the new Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code as shown in the video :


Widget Code:
------------------------------------------------------------------------------------------------------------------------

    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTSOIhGbl5poxLc-5FkrhFTWtEc9ZqEDU9uPUpF2WHcT6U3rLhuhNyzeJGlzY4wxiEfpCh8S_Ot9rsubF7Xrttsf9PU2ev2KuTCUIwKJQ1Qy2ykT-SKwI34S6uRO6aXB6nRrIDc9fbziR/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Dcn-4uN-Ow6bPyX53a8g5P8LNdatq8MFRaTTPujdyVUr_4-3j2ocDQ20IjLu6qJS5ROLX1C4V6LLRCqIlubiV9aL1K6JQlkuDOvSevgD4w-ZBulX8T4dz1e-ARuZKN9WBE86R6sry_ZW/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62hdjOKdNS9xuS5KCzOGsieixeFMoltP8fjRBhKWphfCRgKZZ1T1Gey8nDRgjx6Hs2-Lyylh9pF6agzqfV0k1rxhsuOJEbwIT0C-Il2SSeQTfr_84YbT4JqgQNA6wJynMaW_b34gXI2s9/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TKBaHcvx-8KYCF3ddSX65kMISoBqOlpVfLz-rKK04p9Bo4MNf_gwUjV2EiwfKHSrJfLRxK6UofoVEdZHUf1k1zVleQcwt0Ah-f9ITlaIKo1CByBB6Vaex6fR3_ByXz3YIFzIZV07eMc8/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6pJcZAo24I7Azo43W1nocI_c3vuffo6TSMSxsFBP13fJ4-zQnLpvFSSIvHwEy-ChZIn5MFbPR9LYdcvA_60WH0wjNJbZ-AWa23ySe_9_fOe1U36dM5rpSvhoqkIXuPxl0mWBa4vqosOg/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xi0QuRG7gJFjsA7UTY5JoBzm900BmM-YTd33XOOsAd9euBgbIjz7Sne59O7FuUpYUj_UaAzfIIN2bH6Dr8dWYlF8aSzvAHoqT8fBpqZHROvAdx0eyAi9wRFbI7sgBJpNzDaJRWei_zyA/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

-----------------------------------------------------------------------------------------------------------------------
Important - Replace the yellow sections with your social profiles and feed URLs.

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...