Tuesday, August 21, 2012

How to make a blog button

As a new blogger, making a button has been one of my top priorities.  After some research I found out how and wanted to share!  There are tons of sites out there that will walk you through the steps but here is my version.

What you need:
A blog!
A picture you want to use as the button
Simple (plain) text editor (I used Notepad)

Step 1:

Find the picture you want to use and open it in Picmonkey

I had to resize mine because it was so large.

Crop it to be 125 x 125 (this is the recommended size for a button)

Then play around until you get it the way you want!

Step 2:

Upload your photo to Photobucket

When you highlight your picture a drop down menu appears.

Click Direct Link and it will automatically copy it for you

Step 3: The Code

After you have copied the direct link to your picture, open up Notepad (or whichever plain text editor you have) and copy it there.  Mine looks like this.

Okay, time for the code, don't freak out, it's easy!!

You are going to copy and paste the below into your plain text editor.

<img src="YourImageDirectLink" alt="YourBlogTitle" /><div style="width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;">&lt;a href=&#34;YourBlogLink&#34; target=&#34;_self&#34;&gt;&lt;img src=&#34; YourImageDirectLink &#34; alt=&#34; YourBlogTitle &#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

Replace YourImageDirectLink with the link you copied from Photobucket.
Replace YourBlogTitle with none other then your blog title!
Replace YourBlogLink to your blog URL.

You may have to double check the quotation marks.  If they are the ones with a curl (") they won't work for HTML.  They have to be the ones that are straight up and down (").  If you delete them in your plain text editor and re type them, they will be the straight ones.

Step 4: Adding it to your blog

Open up blogger and go to the Layout tab.  Select Add a Gadget from the sidebar.

Scroll down until you see HTML/JavaScript and select it.

Copy and paste the code you just created in the plain text editor.

Save it and then go check out what your button looks like!

This is mine :)

Now people visiting your blog can grab your button and put it on their blog to show they love it!

If this works for you I'd love to know and if it doesn't I'd love to know too!  Leave a comment below and I will do my best to try and help :)

No comments: