Ginger Snap Crafts: teach me thursday {Making a Blog Button}

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFs5CKD5sKmZRHRUYWzwj9FA70B76dSVasEcR49Ikdyl9NHRMgGyjqSKP_0jEC6kiwoxFSEyyVshRooPk5wC3l19VVkdMLbWze85oHYRVG8hpR333j6v0IB5vbPvkpsG5Fdsu8ZobUEQ/s1600/bowie+button.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