Welcome Enjoy Tutorials

Liked us?

Showing posts with label Button. Show all posts
Showing posts with label Button. Show all posts

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

Saturday, March 30, 2013

Simple Trick to Add +1Botton to blogger

Simple shot of how the new Facebook

How to add the +1 Button to Blogger with simple trick?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </head>
  4. Paste the code below just above </head> 
----------------------------------------------------------------------------------------------
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
-------------------------------------------------------------------------------------------------
     5.   Check the "Expand Widgets Templates" Box at the top right corner. In order to place the button just below Post titles then search for this code <data:post.body>  and place the +1 button code given below just above it,
<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>

</div>
  • You can display it to "left" and "right" by adjusting left
  • You can change standard to medium, small or tall. Choose the size that may blend your template.
Tall, small, Medium Respectively Samples:
image
image
image
   

---------------------------------------------------------------------------------------------
6.  If you want the button to appear below blog posts then add the button code just below <data:post.body>
    7. Save your template to see it working. Have fun! :>


Other Method

To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.
Enhanced by Zemanta

Botones Isometricos de Social Media




Barra Lateral Fija