How to link a button

I have been asked many times how to add a button to your blog or how to link a button.  I would like to share that with you today.  If you use blogger under layout you can add a Gadget to your site I like to use the HTML/JavaScript type because I then have a lot of control on how it displays.

If you add a new one or edit an existing one you will want to leave the title blank (Unless you really want a title on your button I do not like them) And you will past the code into content and hit save.

Now to go into some detail on what code to use. In my example I have

<center><a href="http://richardquilts.blogspot.com/p/civil-war-quilt-along.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmUHzFTIYt5BYpu27HcDaP7Taj4UEANizBtUiYBY0vNTIS4g_94KjkxmuxXPh9Bfq9fP7eBiFTGBNARwj83J2_NxJzpcQBd6DjiOiuEzFTovcpcfRnvBpXwMAtHNO_-0E3AluJu9bTP0/s1600/button.png" width="125" /></a></center>

Let me explain some of the tags (us computer geeks call the blocks like <center> tags) the first one you will see says <center> all tags need a closing tag or at least you have to end it properly to make the browser happy you can end a tag in 2 ways the first is </center> with the slash at the start of a 2nd tag with the same name.  In my code you can see that center is wrapped around the outside of all my code.  That means that I want every thing between those tags centered.

Their are a ton of "Tags" that can be used in HTML (yes more geek talk. By the way that means "HyperText Markup Language" of course now I just showing off just pretend its a quilt) like all quilts you need a top and a bottom and you stuff stuff between that is what all these tags are.  See nothing scary.  For those adventures ones out their I suggest going to http://w3schools.com/html/default.asp to learn more about html you can do a lot of cool stuff to your blog with it like changing fonts and color etc but we will save those lessons for another day.

The next tag is a "A HREF" tag <a href="where to link">text or image to display</a>  Like the center their is a open and close of the tag.  This tag has a property href which tells the browser were to go when the text or image is clicked on.  between the open and close tag is what you want to be clickable it can be a single word or a whole page depending on what you want available to click.  there are extra properties that you can add to tags for the "A" tag the most useful is the target property. you can specify it like this <a href="where to link" target="_blank">text or image to display</a> what this does is the link when clicked instead of replacing the current page it opens the linking page in a new window.  This is helpful so people don't leave your site.

The last tag that I will talk about is the "IMG" tag.  <img src="url of picture" />  remember above I said their was 2 ways to end a tag the /> is the 2nd way to do it instead of having 2 separate tags your closing the same tag you opened in a single tag.  like the href tag you can add other properties to the img tag in my example i have width="125" this directive says resize the image to a width of 125px (more geek talk but its a good thing those px but not important for today)  when you have just a single width tag with out height tag the image will scale to the original image shape you can put both a height and width in but its not required.  if no height or width you will have the original image size which could be huge or small.

Last but not least you may want to make your code show up in a box that some one can copy and paste onto their site.

<textarea id="code-source" name="code-source" rows="4"> stuff in here </textarea>


How I use them Is I put one copy of the code on my page normally.  and then the code above and a copy of the same code that others can copy and past onto their site inside the text area.  Any way hope this was helpful.  Please feel free to email me any questions you might have.

<center><a href="http://richardquilts.blogspot.com/p/civil-war-quilt-along.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmUHzFTIYt5BYpu27HcDaP7Taj4UEANizBtUiYBY0vNTIS4g_94KjkxmuxXPh9Bfq9fP7eBiFTGBNARwj83J2_NxJzpcQBd6DjiOiuEzFTovcpcfRnvBpXwMAtHNO_-0E3AluJu9bTP0/s1600/button.png" width="125" /></a></center>

Hope that this will be useful to some one out their.  By the way how do you like the color changes on the site.  My son was having fun let me know how you like the change.