Welcome! At Blogspot Blogger Guide we show you the easy way to customize your Blogger Blog and offer tips, tricks and fixes to take the technical headache out of blogging.

Showing posts with label Twitter Buttons for Blogger. Show all posts
Showing posts with label Twitter Buttons for Blogger. Show all posts

Tuesday, May 4, 2010

Add a Print Friendly Button to Blogger to Print Out Blog Posts

Attention Blogspot bloggers I have found a really easy way to allow visitors to my Blogger blogs to print out my articles. Today I am going to share with you this very easy trick which is absolutely free. It only takes a few minutes to install a printer friendly button at the foot of your Blogger posts or in the Sidebar and you will be adding a lot of functionality to your blog. (Updated as at 18 February 2022).

How to Add a Print Friendly Button to Blogger so Visitors Can Print Out Blog Posts

Advantages of Adding a Print Friendly Button to Blogger


  • The Print Friendly button is absolutely free
  • It creates an attractive print friendly version of your blog article that is print optimized.
  • There is an option to print in PDF format or save in PDF format
  • Removes unwanted content such as Google ads
  • Provides flexibility to remove unwanted text and only print out what is important to the reader
  • All images can be removed leaving only the text thus saving paper and ink
  • Minimizes the risk of readers copying and pasting your material because they don't know how to print out

How to Add a Print Friendly Button to Blogger with PrintFriendly

The PrintFriendly button is a very handy gadget. When a visitor clicks on the button it will take them to an article preview screen and offers some printing and sharing options. There is the option to print out the article directly with or without images. Alternatively the article can be downloaded as a PDF file or a link to the article emailed. PrintFriendly even lets you share the article via a Twitter Tweet button.


How To Add a Print Friendly Button to your Blogger blog


There are two ways to add a Print Friendly Button to Blogger.
  1. The first and by far the easiest way is to add a Print Friendly button to the sidebar or below your Blogger posts using an HTML / Javascript widget.
  2. The second is to hard code the Print Friendly button directly into your blog which will give you much greater flexibility in terms of placement.

Method 1 - To Add a Print Friendly Button to Allow Readers to Print Your Blog Posts

  1. Sign in to Blogger and select the blog you want to add the printer friendly button to.
  2. From the Blogger dashboard go to the Layout menu
  3. Decide where you want your gadget. The sidebar is an easy choice. Scroll down until your find the Sidebar section of your template
  4. Click on the Add a Gadget link in the sidebar
  5. Choose the HTML/JavaScript gadget

  6. How to Add a Free Print Button from Print Friendly to Blogger Using an HTML/Javascript gadget

  7. Open a new window in your browser and navigate to the PrintFriendly website.
  8. Scroll down to the bottom of the page and click on the Blogger icon
  9. Select the HTML radio button at the top left of the page
    How to Add a Free Print Button to Blogger Using an HTML/Javascript gadget - Make Sure HTML is selected and choose from a range of buttons on the PrintFriendly website

  10. Choose a PrintFriendly button by selecting the radio button beside it. Print Friendly offer at least 12 different buttons.
  11. Select the features you want from the Features Menu or go with the default settings displayed. You may decide to turn off email as a way to have more control of how your article is shared on the internet.
  12. Once you are happy with all the features settings copy the code that is displayed below the features.
  13. Now return to the HTML gadget and paste the code into the gadget
  14. Select Save
  15. Scroll to the bottom of the Layout Menu and click on the Preview Button
  16. You will now see your PrintFriendly Button as it will appear on your live blog.
  17. Click the back button of your browser to return to the Layout Menu
  18. If you are satisfied with the location of the button click Save at the bottom right-hand corner. If not you may need to play around with the positioning to get the optimal place in the sidebar.

Method 2 - To Add a Print Friendly Button to Allow Readeers to Print Your Articles


(Note: Before you attempt this make sure you have backed up your Blogger Template)

  1. Log in to Blogger and select the blog you want to add the printer friendly button to.
  2. From the Blogger dashboard click Theme from the side menu
  3. Select EDIT HTML from the drop down menu

  4. How to Add a Free Print Button from PrintFriendly to Blogger By Hard coding it into the Blogger template - Select Edit HTML to get started on this step by step walkthrough

  5. Click in the code box and then use CTRL + F to find the following code:
    <div class='post-footer'>
  6. Open a new browser window go to the PrintFriendly website
  7. Scroll down the home page until you see the Blogger icon, then click on it.
  8. Make sure the HTML radio button is selected at the top of the Button page
  9. Select the radio button for the PrintFriendly Button that you think will integrate best with your Blogger blog. (There are at least 12 to choose from).

  10. Choose from a range of Print Friendly button options
  11. In the Features menu select the features that you want your PrintFriendly button to have or go with the default. I suggest you think about whether you want readers to be able to email your posts.
  12. Copy the code snippet for your chosen button
  13. Then go back to your open Blogger window and find the code you identified in Step 4 of these instructions.
  14. Paste the code directly after the <div class='post-footer'> tag
  15. Save your changes to the Blogger template
  16. From the Dashboard click View Blog to see your PrintFriendly button beneath each post.

Summary

Today I introduced you to the PrintFriendly button - a completely free button that print optimizes your Blogger posts and allows readers to print directly from the post. I discussed some of the main advantages of adding the printer friendly button to Blogger and I provided you with comprehensive instructions to add the button to your Blogger template by either using an HTML/ Javascript gadget or by hard coding it into your Blogger HTML code.

If you found this article helpful please let me know by commenting below. I would be interested in your experience.

Related Links

How to Add a Welcome Message to a Blogger Homepage
How to Change the Color of the Blogger Navbar or Remove It in Layout
How to Unlock or Delete Locked Blogger Widgets
How to Put a Twitter Icon on Blogger Next to Blog Post Title
How to Delete a Google Blogger Blogspot Blog in 2022
How to Add a Copyright Notice to a Blogger Blog


Monday, October 5, 2009

How to Put a Twitter Follow Me Button Icon on a Blogger Blog

Would you like your Blogger blog visitors to be able to follow you on Twitter? Or perhaps just provide the option to Tweet something about a post you have written. It's easy when you put a dedicated Twitter follow button on your Blogger blog (Blogspot blog). Let me show you how.
How to Put a Twitter Follow Me Button Icon on a Blogger Blog

Latest Update: Updated on 26 February 2022

Just follow the instructions below to add a Twitter follow me button to Blogger to encourage your readers to follow your Twitter tweets. This is an easy way to attract new traffic to your blog and it only takes a few minutes.
Instructions on how to Put Share and Follow Twitter Buttons and Icons on Blogger

This Blogger tutorial is easy and doesn't involve changing your Blogger template.
How to Add a Free Twitter Follow Button to a Blogger Blog

How to Put a Twitter Icon on Blogger (Blogspot)

There are lots of Twitter icons to choose from. Below are several to get you started. Remember you can change this Twitter icon or button for another if you find a better one simply by changing the URL address of the image.

  1. Log in to Blogger
  2. At the Dashboard go to Layout 
  3. Click Add a Gadget in the sidebar or where ever you want to place your Twitter icon
  4. Choose the HTML/Javascript gadget
  5. Copy and paste the following HTML code for the icon into the content box

    Free Twitter Button 1 - How to Put a Twitter Follow Me Button Icon on a Blogger Blog
    <a href="https://twitter.com/Your-Twitter-Username"><img width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKc2rGote0bsR7VtHMulwHQpU8j_uN7DAPLAd14imYUigB7liNS71vKsbIzcaHPPs4cZkcyclOAkvZ39_456ZdNW0gE9BRm3DspfzCrrrSb7YZPN0bexZcpSG1Xi-JTWHuNuu-85Dc_l1T/s320/twitter-34c.png" height="124" title="Follow Me on Twitter"/></a><br/>


    Free Twitter Button 2 - How to Put a Twitter Button Icon on Blogger
    <a href="https://twitter.com/Your-Twitter-Username"><img width="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJp9fr_mYowcPC2G4bqOscUVrK4RP1vZFZjNJbSoH1wSh6cBhp1uQZ9o5DqHmGLgK1rHqDEyMSNYJtGs8-senOFPp34DDavnpl3ujD6s-IT6CJQDOM941DjIbThyphenhyphenKoTd2zOd0sg3VoLeW/s320/twitter8gif.gif" height="81" title="Follow Me on Twitter"/></a><br/>


    Free Twitter Button 3 - How to Put a Twitter Button Icon on Blogger
    <a href="https://twitter.com/Your-Twitter-Username"><img width="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisZPXqyqkhq8XmTBBhfrBULTJxvvsLWCOue17LfvcrTlM14XY1gxDOK8-sF_E-ZgL9vcxw65BIONtfVNH7qjs95iXIlgpFVGQRQSSn1rppZaKhSwmU9HpORs4ZPF53kUIwHdAsc9_rOjnF/s320/nt11.png" height="68" title="Follow Me on Twitter"/></a><br/>
  6. Change Your-Twitter-Username for your own Twitter username
  7. Click Save
  8. View your blog to see the Twitter icon in your Blogger sidebar


Twitter Follow Me Buttons

There are heaps of free Twitter Follow Me buttons to download from the internet. My advice is if you find an icon or button you like be sure to check the licensing arrangements before using it on your Blogger blog. Many icons are only free for personal use rather than commercial use and therefore not suitable if your intention is to monetize your blog. In your search look for the phrases like public domain, no attribution required and Creative Commons (CC0) to ensure you have permission to use the icon or button commerically.
How to Search for Free Twitter Follow Me Buttons

You may be tempted to just download a button in a search of Google images but be aware that you will need a PNG file with a transparent background for your button not just a jpeg or jpg. Also your button will need to be hosted somewhere. You can upload it to Blogger or Google Drive for instance and then just use the same code above in your Blogger gadget and simply change the URL of the image.
Twitter Follow Me Button

If you are not looking for anything too fancy you could just use the buttons provided by Twitter. You can get the code from Twitter for a simple follow button with the option to display a count of your Twitter followers.

Twitter Share Buttons

Another option if you want sharing buttons rather than follow buttons beyond what Twitter offers is to use free services like AddThis and ShareThis. These sites provide code that you can quickly add to Blogger to create a bank of buttons including Twitter similar to what you see on this site.
Free Twitter Follow buttons for Blogger

For sharing content and embedding tweets you can also go to Twitter to put the button displayed here on your post somewhere so readers can go directly to Twitter and immediately tweet something about your post if they are signed in.



Summary

Today you have learned how to add a dedicated Twitter follow button to your Blogger blog. If you follow the instructions above you will have your Twitter button or badge up and running in no time. You also learned how to add a tweet button from Twitter. If you want other button designs for the follow button you can still use the method above but you will need to have the image hosted on the internet somewhere or else upload it to Blogger yourself and then just change the url of the image.


Related Links

How to Change the Color of the Blogger Navbar on a Blogspot Blog
How to Remove or Hide the Blogger Navbar on a Blogspot Blog
How to Add a Copyright Notice to a Blogger Blog
How to Turn Off the Labels Counter on a Blogger Blogspot Blog
Easy Ways to Put Banners on Blogger
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement