teach me thursday {Making a Blog Button}

Blog buttons are hard,
tough, pull your hair out,
who-comes-up-with-this-stuff,
keep you up all night kind of projects!
{At least it was for me!}

So this post is mainly for me,
just in case I ever forget
how I made my blog button.

I think I tried every how-to
out there but the one that
worked for me I found here.

First, you need an image.
An image size 125 x 125 works best.
That’s the perfect size for a blog button-
not too big & not too small.
Post this image somewhere on your blog.
I’m making this button for our family blog.
So I just went ahead & added it onto
my first post way back in 2007.
After you’ve publish the post,
right click on the picture.
Select properties.
Then you’ll see address/URL:
Copy that whole code.
You’ll need it in a minute!
Now here’s the html code that I use:
[center][a href=”http://YOUR WEB ADDRESS/” target=”_blank” title=”BLOG TITLE“][img alt=”BLOG TITLE” src=”http://IMAGE WEB ADDRESS“/][/a][center]
[/center]
[center][textarea id=”code-source” rows=”3″ name=”code-source”][center][a href=”http://YOUR WEB ADDRESS/”][img border=”0″ src=”http://IMAGE WEB ADDRESS“/][/a][/center][/textarea][/center]
Where it says IMAGE WEB ADDRESS
you’ll paste the address/URL code for your picture.
{Tip: Make sure you don’t have two http:// in a row!}
[center][a href=”http://YOUR WEB ADDRESS/” target=”_blank” title=”BLOG TITLE“][img alt=”BLOG TITLE” src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][center]
[/center][center][textarea id=”code-source” rows=”3″ name=”code-source”][center][a href=”http://YOUR WEB ADDRESS/”][img border=”0″ src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][/center][/textarea][/center]
Now were it says YOUR WEB ADDRESS type in the web address of your blog.
Since I’m making our family blog button, this will be bowiebunch.blogspot.com
[center][a href=”http://bowiebunch.blogspot.com/” target=”_blank” title=”BLOG TITLE“][img alt=”BLOG TITLE” src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][center]
[/center][center][textarea id=”code-source” rows=”3″ name=”code-source”][center][a href=”http://bowiebunch.blogspot.com/”][img border=”0″ src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][/center][/textarea][/center]
Now you fill in the BLOG TITLE.
For me this will be Bowie Bunch.
[center][a href=”http://bowiebunch.blogspot.com/” target=”_blank” title=”Bowie Bunch“][img alt=”Bowie Bunch” src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][center]
[/center][center][textarea id=”code-source” rows=”3″ name=”code-source”][center][a href=”http://bowiebunch.blogspot.com/”][img border=”0″ src=”http://gingersnapcrafts.com/wp-content/uploads/2011/05/bowiebutton-1.jpg“/][/a][/center][/textarea][/center]
Now for the last & most important step:
All of the front brackets [ will need to be replaced with < and all of the back brackets ] will need to be replaced with >.
Once you do that you will have an active blog button code.  When you copy & paste it as HTML/Java Script Box on your blog sidebar it should look something like this:

Bowie Bunch

 
Let me know if it works for you!

 

Fancy This

Leave a Reply

Your email address will not be published. Required fields are marked *