How I Made My Blog Button

How I Made My Blog Button

I was really excited to finally add my very own blog button last week!  And, because Im cheap thrifty, I made it by myself instead of hiring a designer.  I figured that a simple button would work (I actually prefer simple graphics - its just more my style).  So with that in mind, I headed over to Pixlr.com to spend some quality time with my laptop.  I am a complete novice so it took a little time to get used to (well actually, I made my header first - which was a little challenging.  Making this button was easier once I was a little more familiar with Pixlr).  And since Picnik is going away (boo), I knew that Id needed to learn something new anyway.  Heres my step-by-step Pixlr instructions - just in case you want to jump into button making too.

To start, I found an image to work with.  I just did a Google Image search for burlap.  Once I found an image that I liked, I saved it to my computer.  Another alternative is to use free digital scrapbooking images.  A quick Google search will bring up lots of options.

I went to Pixlr.com - and chose "Open Image from Computer".

Heres my uploaded burlap pic - 

A standard blog button is 125 x 125 and my picture is 320 x 320 so I needed to adjust the image size.  I opened the drop down menu under "Image" and clicked "Image size..."

A new box popped up allowing me to type in my new size (125 x 125) - 

Then I clicked "OK".  Now I wanted to add text.  To do this, I clicked on the "A" in the tool menu.

I typed "my covered bridge" in the pop up box.  Now the fun part - making it look pretty.  I started by picking a font.  I clicked the drop down menu to see all of the options - 

Once I chose a font (Gungsuh), I adjusted the font size.  

Using the sliding scale, I ended up at 25.  I then needed to change the text color.  I clicked on the color box which brings up another pop up - 

I played around with some different colors and finally chose #4a6a94.  Then hit "ok". The last step was to move the text where I wanted it.  I made sure to use the "Move" tool located at the top of the Tools box - 

Once I had it where I liked it, I hit "ok" on the text box pop up.  Then I saved my button from the "File" drop down menu - 

Thats it!  I hope this tutorial helps some of you - and remember that if I can do this, so can you!  Pixlr isnt so scary once you play around with it.

Want to know how to install your new button?  Heres my tutorial for installing a button with a grab box.

Ive shared this post here -

Creations by Kara
Saved by Love Creations
Night Owl Crafting
The Shabby Creek Cottage
My Romantic Home
30 Handmade Days

How I Made My Blog Button

How To Install A Blog Button

How To Install A Blog Button

Yesterday, I explained how I made my own blog button in Pixlr.  I really love Pixlr because its free and it can do a ton of things.  I used it to create my button and header.  Ive been playing around with it a lot and starting to become more comfortable with the program.  Its a lot of fun (and sometimes a great source of frustration, if Im being completely honest).  But since were losing Picnik (which was so user-friendly), learning a new program is essential.  Ill share more of my Pixlr creations soon.  Ill even show you how I made my header (and how I centered it, and eliminated the padding, etc).  But, today Im going to show you how to install a blog button in blogger.  Ill give you step-by-step instructions for putting it in your sidebar, so others can take it!

To start, you need to find a host for your new button.  I use Photobucket.  Its easy to use and has worked well for me.  Just open an account -

Next, upload your picture - 

Once its uploaded, click "view album" to see your picture.  If you hover over the picture, a drop down menu will appear.  You will need to find the HTML Code in a minute so make sure you can find it.

Now, head back to your blog (you may want to open a new tab).  In the upper right hand corner, choose "Design".  Look in your sidebar, and choose "Add a Gadget" - 

In the pop-up box, choose "HTML/Javascript" - 

If you want to add a title, you can (I added "Grab My Button!") but it isnt necessary.  In the larger box, you need to add the following - 

<center>

<a href="http://mycoveredbridge.blogspot.com"target="_blank" title="My Covered Bridge"><img alt="My Covered Bridge" src="http://i1180.photobucket.com/albums/x414/kristenW4/mycoveredbridgebutton.jpg"/></a><center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://mycoveredbridge.blogspot.com"><img border="0" src="http://i1180.photobucket.com/albums/x414/kristenW4/mycoveredbridgebutton.jpg " /></a></center></textarea></center>

</center>

BUT you need to make the following changes - 

1. There are 2 lines in red.  This is your blog address.  Insert YOUR URL in place of mine - in both places.

2. There are 2 lines in green.  This is where your picture is located.  If you head back to Photobucket, and hover over the picture that you want to use, the drop down box will have an option titled "HTML Code".  Just click on it to copy.

Now replace the 2 green lines with YOUR HTML code.

3. There are 2 lines in blue.  Just replace them with your blog name.

Now click "Save" and "View Blog".  Your new button and grab box should be nicely centered on your sidebar.  If it isnt, just go back and check the code - it may just be missing a quotation mark or other character.  Unfortunately, HTML code needs to be very accurate.  Hopefully, it works for you.  And remember, Im not an expert and I did it.  You can do it too!

Ive shared this post here - 

My Romantic Home

30 Handmade Days

How To Install A Blog Button