Sunday, 9 October 2011

Add a button to your blog!


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.

in that you will paste the following , noting that the number that follows cols= determines the width of your code box on your blog... I have it at 20 but you can make it bigger or smaller , just preview each time, and play around with the sizing.


..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.


(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....

No comments:

Post a Comment

Feel free to add your comments