Blogging Resources: HTML Border Code

Borders can come in handy in blogging either in posts or used on your home page in lots of different ways.  I do not know much about HTML code so I am always going and looking for easy ways to do what I want.  I came across this site offering HTML Border Code in a variety of styles.  You just have to copy the code and paste it where you want it.  This is another great Blogging Resource.

Here is an example of one of the codes:


< div style="width:200px;height:100px;border:3px solid orange;">
This box has a solid html border.
</div >

Here is what it looks like:

This box has a solid html border.

You can change the size and the color as well as the thickness of the line.

• The size is indicated by width & height and a number with "px" after it (width:200px;height:100px).  Just change the number before the px to change the size.
• The border thickness is indicated this way:  border:3px.  Just change the number to make it thicker or thinner.
• The color is indicated after the border tag by a color name.  You can change it with a common color name or use the HTML code for any color you would like.  You can find HTML color numbers @ HTML Color Codes.

Here is the code changed to new specifications and the box it designs (note I removed the text--you can see it in the code above):

< div style="width:300px;height:125px;border:6px solid blue;">

</div >

You can simply type within the boundries of the border or add text to the HTML code where the original code says, "This box has a solid HTML border."

To make a bordered text or picture in HTML to be added to your sidebar you can use the post editor in Blogger and then copy the HTML and paste it into a gadget on your design page.  I did just that with the box below using the dashed border option.  I then used a gadget to place this above my posts at Simply CVS.

Click banners to print money saving manufacturer coupons.

              

You can find the link for the HTML Border Code and many other helpful Blogging Resources in the resource tab below the Simply Blogging University header--no need to keep them bookmarked, we've already done that for you.