Tuesday, April 3, 2012

Some Blog HTML

Yep, as promised, I made this little post to help you with some HTML codes.

Some small notes (Please Read):
  • In HTML, there are some values that are put in quotation marks. Make sure you leave in the quotation marks where they appear in the code.
  • Where there is all caps in the code is where you'll be able to put what ever content you want. So for a URL, it will say in the code INSERT URL HERE; you would delete INSERT URL HERE and put in whatever URL you want.




Text Boxes/Text Areas



Some Notes: Cols is the width of the textbox, and rows is the height. Where the # is in the code is where you put a number that you want for the width or height (leave in the quotations)


Blog Button Code
Welcome to Elegance of Fashion
Some notes: Height and Width refer to the image's height and width. Alt is the text that appears when you hover your cursor over the image. Technically, you are supposed to have height, width, and alt for the image, but I've gotten away with not including them. The # you replace with the number of pixels high or wide the image is.

Resizing an Image/Thumbnails
Original Image:


Smaller Image:


There are two ways to do this, either by width or by height.
By width


By height

Some Notes: You can do either by width or by height, but not both unless you know the exact measurements for both. If you don't have the exact measurements for both the picture will be distorted. And the number that you put in (#) is the number of pixels wide or high.

Borders
 


Some Notes: The border on the above picture is 2 pixels, so where the # is you would put 2. The default for any image is 0, which would be no border. The default color should be black.

Change Border Color

Some Notes: Please read this before using the code. For the border, I had to use a * because the number sign is very important in this code. So, where the * is in the code, put a number for the width of the border you want. Now, where it says #------ is where you would put in the color code for the border. You can find these codes here. Once you've selected a color, insert the code into the dashes. LEAVE THE #. So if you wanted to use the color 0EFF2A (which would be green), the code should look like "...border-color: #0EFF2A;...".
 
Line Break

Some Notes: Very small code for a simple line. This can be very useful if you want to break up paragraphs or sections.

Marquee
There is lace at stake!

Some Notes: The motion will not show up in the post, but if you preview it and post it, it should work. Be careful how you use this: if you use it too much, it can be distracting and busy. You can also apply any text effect to the marquee text and if you like you can even do images in a marquee: where it says TEXT HERE simply paste the image code.



If there is anything that is unclear in my instructions or there is some problem with your code, leave a comment so I can correct whatever errors I made. 

And, of course, if enough people suggest what else they would like to see in HTML, I can do a second post about more Blog HTML. Again, just leave a comment.
 
God Bless,
 God Bless, Miss Elizabeth Bennet

13 comments:

  1. How helpful! Thanks so much, Miss Elizabeth. :)

    ReplyDelete
  2. This is going to be ever so helpful, thank you! It's difficult to find really straight-forward tutorials for HTML but this is excellent :)

    ~Abby

    ReplyDelete
  3. Thanks so much for posting this! I was able to create a blog button for my blog. If you want to see it you have to go down to the very bottom - its right below to banners of yours that I posted on my blog.

    Thanks again!

    ReplyDelete
  4. Thank you so much! Do you know how to make a rolling blogroll (of blog buttons)? I think it is somewhat in the marquee style but I don't know how to do it...

    ReplyDelete
  5. Hi, Miss Bennet! :) Just wanted to let you know that I nominated you for the Versatile Blogger award. Here's my post about it: http://nevergrowupdollguide.blogspot.com/2012/04/ive-been-awarded.html

    If you've already done this one, feel free to skip it! I'm pretty late getting to it.

    I said this in my post, too, but I'm so sorry that I never did my post for the Sweetest Blogger Award you nominated me for earlier. It was a really busy time and I just never got to it. So sorry about that! :(

    ReplyDelete
  6. This post was very helpful Miss Elizabeth!
    Recently I learned how to resize photos manually (mostly by trial and error hehe) and it's true about the distorting thing! I didn't know about the borders though and that's something I'll definitely put to use!
    Oh the Marquee thing, I've seen that so many times and wondered how people did that! Thanks, that will be neat to use too.

    This post was very interesting but I can't think of anything else to ask about specifically. Maybe I will later. Thanks!

    ReplyDelete
  7. Oooh yes, Rosamund's questions is a good one. I've always wanted to know how to do a rolling list of blog buttons.
    Hmm...I might have to try a few things and see if I can figure it out. I always have more blog buttons I want to link to then I have room for. hehe :)

    ReplyDelete
  8. I'm glad this is a help to everyone!

    Rosamund Gregory,
    Sorry I took a couple of days to respond. I think I may have done something similar before, but I'd have to go look it up again. It is do-able, so I'll take a look on the code.

    beastsbelle,
    Thank you for the award! I haven't received that award before. I've been really busy myself lately too, so I understand. :-)

    Miss Laurie,
    I may include about that Marquee in another post. If you figure it out before I do, let me know. I'll give you credit in the next HTML post.

    ReplyDelete
  9. Figured out how to do an upwards marquee for blog buttons, but unfortunately it doesn't stop when you hover over the marquee (it looks like Javascript, which you need, doesn't work in blog posts)

    ReplyDelete
  10. Hello there,
    I've been following your advice and have tried putting a box with button codes to my blog. I wondered if you can, if you have time, take a look for me to see if I've done it right, as I am a bit concerned it's too big for people to use? I wasn't sure what to put in the size quote marks so I copied what you've done on yours. Does it work?! Thank for your help anyway, as I had no idea how to do this at all before! http://mandalasinmemories.blogspot.co.uk/

    ReplyDelete
  11. Shastina,
    The button looks like a good size: it's probably bigger than most buttons, but it's not too big. There was one part in the code in your textbox that I would correct: delete where it says "</img src="http:>" and everything should be good! :-)

    ReplyDelete
  12. Thanks, that's kind of you!

    ReplyDelete

Thank you for visiting Elegance of Fashion. If you wish to leave a comment, please do. I ask that you refrain from bad language and are polite and constructive. If you are posing under "Anonymous", if you could leave a name, that would be great! I reserve the right to delete any comments that I deem family unfriendly.

Thank you very much and please come again.