Make A Blog Photo Sharing Button In Blogger For Others To Feature on Their Blog Sidebar!

255X255

125X125

Tutorial: Make a Personalized Blog Sharing Button with Picture for other Blogs to easily place on their Site Sidebar that people can click to visit your Blog. Increase Viewership!

255X120

Instructions

First create a nice clear photo with the name of your shop or Blog on top of it in your favorite photo software. Make it 125X125 pixels wide for very small button, or 255x255 pixels for larger.
Most sites prefer
125X125
255X120
255X255
Try all of these and offer them, see which ones get used.
I used the sizes I did because I was just trying to get the button to work, I will eventually resize into more standard sizes.

1. • Upload your image to your online photo album (such as picasa which is where your blogger pictures are stored anyway). Save the picture into it's own album and be sure to "share" the album so the "embed" option shows up on the column on the right.
   • Click on the picture itself in the album and then then click on "Link to this picture" in the column on the right.
     
     You will be given two options, choose "embed image" 

     Under "Select Size" click on the options and select "Original size" 

     copy the resulting text in the embed box.

      Very important! below the embedding text there are two options, click "Image Only (no Links)

     
     
   • Paste the button's photo code onto a word document to save it until you need it. Leave this document open to paste the code below into if you want to format your code in the document, then paste into the blogger html box.
   • Go to your Blogger blog and click on Layout.
   • Choose to Add a Gadget. Scroll down to "Add HTML/Javascript" and select it. A Dialog box will open where you can paste some code.
   • Type something like, "Share My Button" in the title box.
   • Copy this code and place it in the html text box.
     
     <center><a href="http://yourblogaddress.com/" target="_blank" title="YOUR TITLE"><img alt="YOUR TITLE" src="embeddedpicturecode"/></a> <center>
     </center>
     <center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://yourblogaddress.com/"><img border="0" src="embeddedpicturecode"/></a></center></textarea></center></center>
   • Replace the yourblogaddress with the address of your blog (no spaces, no caps or punctuation, be sure to just replace what is between the quotes and nothing more! You can copy paste you home page address but be sure that you don't have http:// twice or .com, just the clear straightforward address between the quotes "  ".
     
     

     
     

     Plug in your YOURTITLE where indicated (Your Title can have capitals and spacing, but no punctuation)
     
     Copy the entire embeddedpicturecode from your picasa photo itself, (not the album) and paste the ENTIRE address in the correct location indicated, no spaces, caps or punctuation being sure to leave the "  " quotes intact.
     
     
   • Save this gadget and position it where you'd like it to be.
   • Save your changes and click View Blog. Refresh your page at least two times to make sure that if it doesn't show up yet it just isn't still thinking about it and not quite ready to display yet. Hopefully it will be up and running for you right away!
   • VERY IMPORTANT! After placing on your page Click on your new button to make sure it takes you to the home page of your blog.
     
     NEXT AND ALSO VERY IMPORTANT!
     Copy the code from the box you want to share and try to add the button to your blog, you can remove it after the test, but your links must work or people will be mad at you!
     
     To do this simply highlight and copy the code from the text box that is now visible on your blog. Then under Layout, add a HTML gadget and paste the code into the text box. Save changes and view your blog. This "new" button will not have the text box underneath (this is what your button will look like on other people's blogs.) Click on the button to make sure it brings up your blog's homepage.
     
     If you fail, try starting over with a fresh copy of the code. It can be frustrating, but it you just try again with fresh code, you soon will get the hang of it. I have left the testing of my code up on the sidebar of my site so you can see the results of properly formatting your code and that the code works. If you have problems, comment me copy pasting your code and I will help you with it.
   • Enjoy spreading the word about your blog. Let your readers know you now have a button that they can copy and place on their blogs.
     
     Feel free to share this article if you like, it will help others and we all can use a little help now and then, maybe you could share my button on your site and provide a link back to me here at Earth Goods 4 The Spirit if it helped you!