Sunday, 8 May 2011

BLOG ADVICE: How to make a blog button

I have found an amazing blog advice blog entitled Jenieshell's Design Challenge, I will post a couple of my favourite tutorials on here. It really is a very comprehensive resource which works!

Before we get started on the actual html code there are somethings you will need to do first:
  • First, you need to create an image. I made mine on Adobe Photoshop. There are several websites that specialize in buttons if you don't have photoshop. Google "Blog buttons or chiclets" in order to find these websites. You will then need to save your image to your hard drive!
  • Next, you will need to upload your image from your hard drive to the internet. You can do this by uploading it in a post on your blog. You can also use Picasa, photobucket or Flicker.
  • Then, you will need two URL addresses to insert into the html code. The first address is the site you're linking to. The second is the address where your image is located on the web. (To find this address, click on the image in your published post. Then right click on the image, scroll down, click on properties and copy the URL address.

Now we are ready to create the html code and to install it on your blog.
  • Go into the layout section of your blogger account and create a new Gadget.
  • Choose HTML/Java Script.
  • Copy the code below and paste it into the text section of your new HTML/Java Script Gadget.
<center><a href="URL address you're Linking to"><img src="URL address of your uploaded image"/></a></center>

  • Replace the sections in red with the two url addresses that meet your needs.
  • click save.
  • Enjoy your new button!
Hope these steps where helpful!! Let me know if this tutorial was useful, confusing or unclear!! Thanks

Now, if you want to learn how to make a scroll box under your button so others can grab your code GO HERE!

1 comment:

  1. You can follow these same steps to add social networking buttons to your blog, like the facebook & twitter ones you can see to the right of mine.