This
shows how to use HTML to add a button to your blog so that others can copy and
paste the html code to promote your blog on their site with your blog button.
The
instructions are for blogger/blogspot, as that is what i use for blogging, and have made
my button successfully... but the html will work for any site, its
just a matter of how it is applied on the site. You will need to check your blog host's
instructions on how to add gadgets and code to see how to apply this to the
site you use.
(1) BUTTON: You need a picture or logo which
becomes your button, I used Microsoft Paint for mine, and made a square that is
180 * 160 pixels. You don't want it too big otherwise it will just be a
nuisance on your site and the site of others as it will be too huge! I added
text and a pic onto my square and saved it on my computer as a jpg. (it
probably doesnt matter what image type you save it as, i just chose jpg, which
worked well ... so I know that will work!)
(2) URL FOR PICTURE: i created my pic for the
blog and then uploaded it as my profile pic , this is because the image needs
to be hosted online somewhere and not just on your computer, it was easier for
me to just use the image I already have online. Then you right click on the picture
to copy the image URL.
.....................................................................................
The
following is how to add your button if you use blogger.com.
(3) ADD GADGET: in your blog page, get into the
Design window , where you can fiddle with your page design, choose LAYOUT, you
will then see the skeleton of your page where it is marked out. on one of the
side areas where you will see the word GADGET, click ADD GADGET.
A
small window pops up with a menu, you need to choose BASIC, then scroll into
the list of gadgets till you come to the one called HTML/Javascript. Click on
that one!
(4) CREATING THE BUTTON CODE: in the title field
type something relevant like ADD MY BUTTON, you don't have to put anything in
this field if you don't want to.
In
the box below is a place to shove the HTML
(5) HTML:
leave the quotation marks in as they are a part of the HTML, where i have
BLOG URL that is where you paste the URL for your blog, and BUTTON URL is where
you place the URL for your button.
<a border="0" href=" BLOG URL " target="_blank"><img src=" BUTTON URL "a>
you
may want to preview it to ensure that its working and you can see your picture
on the sidebar!
SAVE
IT!
(6) ADD THE CODE FOR OTHERS TO USE: The whole idea of this button is so others
can take it to add to their sites, pages, blogs and promote your blog, so you
need a place where they can come and copy your button code.
Go
back to where you see the skeleton layout of your blog, click on add gadget
just like you did before.. its becoming repetitive isn't it??
Find
that HTML/Javascript gadget again .. this time DO NOT WRITE IN THE TITLE FIELD,
we want that code to hang out under your button image neatly, so don't put a
title on this gadget.
..ALSO note that the
middle line of this code is the HTML you prepared earlier.. so make sure you
replace the words BLOG URL with the real URL of your BLOG, and BUTTON URL with
the actual URL of your picture.
<textarea rows="4" cols="20">
<a border="0" href=" BLOG URL " target="_blank"><img src=" BUTTON URL "a>
</textarea>
(8) Back in the window that shows the layout of your blog make sure that the button gadget is above the html code gadget.
(7)
HTML FIELD FOR OTHERS TO COPY: in the box below the title field that you did
not type in... you will see once again the box for HTML...
<textarea rows="4" cols="20">
<a border="0" href=" BLOG URL " target="_blank"><img src=" BUTTON URL "a>
</textarea>
SAVE IT
(8) Back in the window that shows the layout of your blog make sure that the button gadget is above the html code gadget.
PREVIEW...
if
the button sits on top of the code field all is well
SAVE
IT
APPLY
IT TO YOUR BLOG
and
there you have it, a button others can use to share your blog link....
