♡ HTML Basics ♡

Hey guys! I got an anon asking to do a post on editing/html. It's really easy after you understand the basics so this will be all about editing your blog to fit your style and some codes you can use ♥

To edit your blogger go to the post list, (next to the new post button on the homepage) click the tab layout, and add the widget HTML/JavaScript. That can become your about me or really anything you want! I use it for an about me and other things on the sides of my blog. 

When you have opened the HTML widget, it should be blank. Make sure you're on the html code not rich text. Above the text box it should say the opposite of what you are on ex. to be on html it should say rich text.

To add a photo or gif (moving pictures), type the code below! In the quotations, paste the url of the image in place of the word url. You can get that when you right click and image and it says "copy image url" or if it's another tab, the url of it is at the top and just copy paste! Make sure it's in between the quotes or it won't work! 

To see if it works, click rich text and it shows you how it looks so far! If you want to change the size of your photo just add the following to the code. Instead of px, change it to the number you want your image to be. Usually, I start out with width="300" height="250" and go from there.

Hyperlinks are links to different sites. In the code below, add the url you want and the name. The name shows up on your profile as the link to it! For example, if it was your twitter, the url is your profile and the name could be just twitter.  

You can also make images links to other sites! On my blog the little icons are links to my other profiles like twitter, instagram, tumblr and ask.fm. I have tons of little images saved that I collected from tumblr. I could link you guys to a few blogs all about pixels and stuff! Hopefully you already know what to put in the code below. If you're still confused, url is the link to the site and the image url is basically what it's called, the image. 

There are many other codes but these are just really basic ones that help make your blog look super cute and just the way you want! ♥ The space in between the codes are where the other codes belong (add br and then the image/link and then /br)

♥

The forward slash means the ending of the code. I'll be explaining them and how they work from top to bottom! 

The first one, br means break line. It just makes a break/empty space in the code. It organizes the outcome so it's not all cramped together. 

Next is center. It means putting it in the center of the section. I use this a lot because I like everything to be centered! 

Lastly, p means paragraph. I don't use this one a lot but it makes the text into a paragraph and adds a line break at the end. 

That's all for this post! It took me a really long time to do this so I hope it was worth it! If it helped you at all or if you're confused about anything you can ask me here! Also, here are some links to blogs that are about pixels and little gifs! 

engrampixel

pixel-dreams

pixel-world