HTML Coding For Beginning Bloggers

Hello everyone! Last month, I redesigned my blog. I have been getting loads of emails on how I did it and if I can give some tips so I decided to do a blog post on it! I am going to give you some basic HTML codes to get your blog design looking good and some other little HTML codes just for fun!

 

SOCIAL MEDIA ICONS

 

For some reason, people adore my social media icons! I love them too, so glittery. Here is the simple code I used to get them on my page. (I'll show you one)

 

BLOGLOVIN

 

<a href="SOCIAL MEDIA LINK HERE" target="_blank"><img src="PICTURE LINK HERE" width="SIZEpx" height="SIZEpx" /></a>

 

GREEN- This is the link of your social media. Mine would be my Bloglovin since I made this for my Bloglovin account.

 

PURPLE- This is the link to the picture of the social media button. All you do is search on Google or Pinterest "social media buttons" and search through the thousands of pictures. Once you find some that you like follow the link to the button (its better not to use Google Images) and save them. Then upload to Photobucket or Flickr and put the link there!

 

BLUE- This is how big you want yours to be. Mine was 48x48 but you can make yours as big or small as you'd like.

 

 

CATAGORIES BOXs

 

I don't have this on my blog (I am planning to add it soon) But it is super easy once you know how to do the social media coding.

 

All you need to do is go on PicMonkey and make a picture for your category such as "Music". (Make sure it is a size you like, otherwise it will come out bad) Now, do the EXACT same thing as social media icons:

 

-Upload your picture to Photobucket

-Use the same code

-BUT in the green area, try to find a post label that matches your category. (Music label for music, etc) Copy that link and put it in the area.

-I've learned that the size matters on the actual picture, but still play around with it!

 

 



Just For Fun Codes

 <em>Your emphasized text</em> (emphasizes your text)

<a href="http://www.yourlink.com">Your linked text</a>  (For non-blogger users, it does this)

<a href="http://www.yourlink.com"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>
 (You could also use this code for the category boxes, or just a simple image link)


That's all for today folks! I hope you enjoyed. Sadly, I was trying to get the little black heart as one of the codes but it wasn't working. Can someone tell me the code for that? Thanks for all of the wonderful comments on my last post :D

Mkay bye,
Noor