Obviously I enjoy editing my blog. Sometimes too much, but I love variety, so I will keep editing and learning. One of my favorite changes I've made recently is using small pictures instead of a navigation bar. Like this business right here:
I couldn't fit all of the buttons, but this gives you an idea.
The steps for creating this are easy, but it takes some patience and work to get it.
Step One: Create Images
As usual, I used PicMonkey to edit my pictures. I'm sure people adept at using photoshop could use that, but alas, I am not adept at photoshop by any means. I created five pictures that were each 200 x 200 pixels. I think it would have been awesome to make them round, but you can't do that on PicMonkey unfortunately. But hey, you can't beat a free, simple, online editing program.
Step Two: Host Images
You can see how to host images in this post under the "save image" section. Basically, you're going to upload them on a tester blog (you can also use flickr, but I don't know how to), and then copy the portion of html code that corresponds to your picture.
Step Three: Write Code
Using the HTML practice website, you can copy and paste this code. You will need to copy and paste it for as many pictures as you have. So since on my sidebar, I have five pictures, I had to copy this code five times.
<a href="http://secondhandcouture.blogspot.com/search/label/d.i.y."><img src="http://3.bp.blogspot.com/-_vxp0LgjqvA/UC5TEi4L5zI/AAAAAAAABds/JbA_i02m7eo/s1600/diy200.jpg" alt="d.i.y." /></a>
You will need to plug in your information to the code.
orange text = website the button will go. On mine, the d.i.y. button will take you to the d.i.y. labels. All of my crafty posts are labeled with a d.i.y. text, and when I click on the label it will show all of those posts. I copied the web address that pops up when I click that button.
 |
| My list of labels. You can create a list by adding a gadget on your design page. |
pink text = the name of your button. This information won't show up--but on some web browsers, the pictures don't load, so the name of the button will show up instead.
Step Four: Paste Code in HTML Gadget
Copy and repeat that process for each of your buttons. You will next add an html gadget on your sidebar (near the top of the page is best so readers can easily find your categories), and copy and paste your code into it. All of the code can go into the same gadget. Double check your links to make sure they work well. If there is a problem, usually retyping in the link will fix it.
Let me know if you have any questions! If they are complicated, I'm sure I won't know the answer, but I've become an expert googler (googler? I either sound like somebody talking baby talk or a creeper stalker...), so I can try to find it out for you.