Generating the Code for a Blog Button

Hi Everyone,

I have a quick tutorial for you today on how to put your blog button in your sidebar OR how to add your giveaway button to your blog post.

Adding a custom blog botton to your sidebar

Lots of bloggers like to have their button in their sidebar for other bloggers to grab.  

Here's mine:

Once you make your button (using PowerPoint, Photoshop Elements or however you choose) you need to upload it to a photo sharing site such as flickr, Zooomr or Photobucket.

After you've uploaded it to your favourite photo site be sure to grab the direct link code. It will look something like this:

http://i1230.photobucket.com/albums/ee496/ellenleyne/Attribution.png

You also need the url of your blog.

Take those two links and pop them into this code:

<center><a href="YOUR BLOG URL" target="_blank" title="TITLE OF YOUR BLOG"><img alt="TITLE OF YOUR BLOG" src="URL OF IMAGE SOURCE"/></a> <center>

</center>

<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="YOUR BLOG URL"><img border="0" src="URL OF IMAGE SOURCE"/></a></center></textarea></center></center>

Put your blog url into the blue areas.

The name of your blog goes into the green area.

And your image source (the one you got from flickr, Zooomr or Photobucket) goes into the red areas.

Go to Design/Layout of your blog and click on "Add a Gadget":

Chose HTML/JavaScript:

Place your code in the box that pops up. Save and voila! Your button and code box will appear in your sidebar.

Adding a Giveaway Button to Your Blog Post

A couple of weeks ago I had a giveaway and I put this button directly into my post.

This is kind of cool because anyone who wants to grab my button and share it on their blog just has to grab the code and away they go.

But how do you get the button and code into your post?

Super easy.  Make your button then follow the directions above to make the correct code. Instead of the name of your blog, you may want to put in the name of your giveaway. Your choice :)

Now go ahead and start a new post. Type away as usual, but when you're ready to add your button, click on HTML in the upper left.

This will change the look of your post to some funky looking coding (you can see it below).

But don't be nervous. Just look for the text you'd like your button to come AFTER. Here's what it looked like in my giveaway post.  I looked for "It's super easy..." (highlighted in pink) because I wanted my button to show up after that.

</center>

<center style="text-align: left;">

It's super easy to enter and you have 7 days!</center>

<br />

</center>

<center>

</center>

<center>

<a href="http://www.rubyslippersblogdesigns.com/" target="_blank" title="Ruby Slippers Blog Designs"><img alt="Ruby Slippers Blog Designs" src="http://i1230.photobucket.com/albums/ee496/ellenleyne/RubyGiveaway.png" /></a><center>

</center>

<center>

<textarea cols="13" id="code-source" name="code-source" rows="3"><center>

<a href="http://www.rubyslippersblogdesigns.com"><img border="0" src="http://i1230.photobucket.com/albums/ee496/ellenleyne/RubyGiveaway.png"/></a></center>

</textarea></center>

<center>

</center>

The <br/> means "break" so I just popped my code (blue area) in right after (copy/paste).

Now click on "Compose" so that your post looks "normal" again.

Here's what the above looks like in "Compose":

Notice my button shows up right after "It's super easy to enter and you have 7 days!" That's exactly where I wanted it.

Now go ahead and finish your post and publish.

If you've grabbed someone's code because you're wanting to share THEIR button on your blog, just do the same thing. Switch over to "HTML", paste in the code, back to "Compose" so you can see that it worked and you're done!

Hope that helps someone.  

Have a good one!