Today I'm going to show you a quick and easy way to put a blog button and grab box up on your site.
I saw these on so many blogs and it took me ages to work out how to do it. There are a lot of tutorials out there on the net but many of them were quite complex and assumed I knew things I didn't. So I put together an easy guide for people without any HTML skills whatsoever. I hope it's helpful!
First of all you need to design your button - I won't go into detail about that here but if you need any help with this please let me know!
Tip: Make sure you design your blog button in the right size - there's nothing worse than seeing stretched, squished or blurry buttons on a blog. It looks incredibly un-pro, so if you're not sure how to do this, ask for help.
So this tutorial is going to start with the understanding that you have your blog button ready to go. Ready? Ok. Let's do it!
Step 1 - Uploading your button to an image hosting site
a) To make a button available for others to grab and put on their site you need to host the image somewhere. I use
Photobucket for this but there are many options. I've found Photobucket to be really easy so if you don't already have an image hosting account you can register for a free account with Photobucket
here.
b) Once you're logged in, click on the green 'Upload' button in the menu bar and then click the green bar that says Select Photos and Videos. A window will open from where you can select your button image file from your computer.
Once selected, you'll get rudely interrupted by an advertising video (I guess it's a free service afterall!) so just ignore this and scroll down to where your image sits. Here you can give it a title and a description. I always put the image size in the title so you can tell at a glance what size it is, because it's likely you'll end up with various sized buttons that all look similar. It'll look something like this.....
Now just select the image by clicking in the little box underneath it and click on the long blue button that says Save and continue to my album.
c) In your album, all you need to do now is hover your mouse over the image and a box will pop up (this sometimes take a few seconds). In the window you'll have various sharing options and four codes in boxes. You want to click in the box of the second one, Direct Link. Once clicked it will automatically copy it. It's a good idea to paste this somewhere where you can easily access it later.
Step 2 - Putting your button into Blogger
a) Now go to your Blogger dashboard and decide where you want your button to go. Most people put them in a side bar or on a separate page entitled Buttons. I use a separate page, but the process is essentially the same wherever you want to put it. I'll go over both here to make it simple.
b) If you're putting it in a page, open the Pages tab and click edit on your Buttons page (create a buttons page first if you don't have one, which you probably don't if you're doing this tutorial!).
If you're putting the button on your sidebar, open the layout tab and select new gadget in the place you want to put it. Scroll down and select Add Text. The main box is where you'll put your code. You can add a title, such as Grab A Button, if you wish!
c) In the Buttons page or the Add Text box, click on the HTML button (next to compose) so that you can enter your own HTML code.
Now you need to enter the following code, but of course, you need to change the highlighted text to your own details. The easiest thing to do is copy the code from here and paste it straight into your blog. The carefully delete the coloured bits and add your own details. Don't worry about the colours - it makes no difference in HTML, I just use them to keep it clear and simple.
<div align="center"> <a href="
http://redparka.blogspot.com" target="_blank"><img alt="
Red Parka Diaries" src="
http://i1184.photobucket.com/albums/z325/redparka/SquareRPBlogButtondesign.jpg" /></a> </div> <div align="center"> <form><textarea rows="4" cols="14"><center><a href="
http://redparka.blogspot.com" target="_blank"><img alt="
Red Parka Diaries" src="
http://i1184.photobucket.com/albums/z325/redparka/SquareRPBlogButtondesign.jpg" /></a></center></textarea></form> </div>
- Change the writing in red to your blog's URL.
- Change the writing in green to the direct link you copied from Photobucket.
- Change the writing in blue to the text that you would like to show when someone hovers over your button.
Click back to Compose (next to the HTML button you clicked previously) to check that it worked - you should see it now exactly as it will look on your site, like the image below. You can see that I have written the size above the image so that it's clear for anyone who might want to grab the button.
If it looks right, then save it and check your site to be sure it all works and looks good!
How did you go?
Please let me know if you use this tutorial and if you have any issues so I can help fix them!
Goodluck and happy button making!
Jen x
