HTML Basics for Bloggers (Guest Post)

Good Morning Ladies! I am so happy to share this post with you all and have one of my favorite bloggers give us all some really great tips for using HTML when blogging. Jana of Life Could Be Dream is one of my all time favorite ladies in the blogsphere. She helped me figure out how to start my sponsorship program, advertises her sponsors like a pro, and gives the best blog advice around! So sit back and enjoy this treat of gleaning some wisdom from this lovely lady! :)

Hello beauties! I'm Jana. When I'm not chasing my crazy toddler around the house I blog over at Life Could Be a Dream and I'm also the designer behind Jana Tolman Design. I opened my design business last May and I have been creating custom blog designs and pre made blog templates ever since.

As far as graphics and web design goes, I'm completely self taught. I've learned a lot since I started designing blogs and I've come to have an incredible appreciation for the aesthetics of blog design and good blog maintenance. I think it's imperative that bloggers know a little bit of basic HTML so they can give their blogs a little TLC DIY style. :)



Lesson 1: Centering

Centering sidebar gadgets

In order to create clean lines on your sidebar, it really helps to center. There is an incredibly simple HTML trick to center content: <center></center>. To use it, simply place the content of your HTML between the <center></center> tags. For example, if I wanted to center an image on my sidebar I would use: 

<center><img src="IMAGE URL HERE"></center>

Center your page list and header

template available in my Etsy shop

To center your page list and header, you will need to go to the template designer, click "Advanced" and click "Add CSS". In the CSS field, copy and paste the following to center your pagelist:

.PageList{
text-align: center !important;
}

.PageList li{
display: inline !important;
float: none; !important;
}

The following to center your header if it's an image:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

Or the following if your header is text only:

#header-inner{

text-align: center;
}


Lesson 2: Links and Images

Say you wanted to add text to your sidebar, but you want it to click through to a link. Easy peasy. This is the code you would use:

<a href="LINK HERE>TITLE OF LINK</a>

But what if you wanted to have an image that is clickable to a link?

<a href="LINK HERE"><img src="IMAGE URL"></a>

Lesson 3: Adjusting Margins

This is probably one of my favorite tricks for cleaning up a blog design. If you have sidebar gadgets that are too close together, or for some reason one of your gadgets just isn't centering, this is the trick for you. It might seem a little complicated, but I'll walk you through it. 

First, you need to find the Widget ID of the gadget you are trying to move. You can do this by opening the gadget by clicking "edit" from your blog's layout page, or by clicking on the tool icon next to the gadget from your blog's homepage. 

From there, expand the gadget window. Look at the very end of the url to find the Widget ID. 


Second, we apply the CSS using the Widget ID. Go to the Template Designer, click "Advanced", then click "Add CSS".

To adjust the margins of the gadget you want to move, use the following CSS:

#WIDGET ID{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}


Simply adjust the pixel value until the widget is moved where you want it be. Positive numbers will move the gadget farther from the specified margin and negative numbers will move it closer. 

I hope this has helped you a little bit! For more blogging tips, feel free to stop by my blog and say hello. Thanks for having me! :)







Check out my sweet sponsor this month, Jenni of Frankly My Dear!