Sunday, 11 August 2013

html 101 #1

Hey everyone! I thought I'd write down some HTML tutorials for you so that you can add a few extra details to your blogs. I'll start off with the basic things and then if you want to know how do other things that I haven't mentioned (as there are millions), just let me know and I can do some more tutorials.

I've added a read more link, as this post is very long!

HTML HELP topics:

How to make your own widget headers
How to add a signature to your posts
How to add your own media set icons

Before going into detail, here are some useful photo editing websites you can use to do the following designs I'll mention. I personally use Paint Shop Pro which you need to buy or can download a 30 day trial from online. And Photoshop is also a really popular one to use which you can also get a trial for.

There are obviously loads of other websites out there but I just thought I'd list a few that I would recommend.



On the side bar on your login page, click 'Template' then 'edit HTML'.

I'm going to use the 'Archive' widget as an example.
Click Ctrl+F and type in b:widget id='BlogArchive1 - That's the code you need to look for.
Once you've found it, it should look like this:

 Where it says this, 2 lines under the code you searched for

  <b:if cond='data:title'>
    <h2><data:title/></h2>  </b:if>

That's where the title of your widgets will be. So you need to delete just those 3 lines, nothing else and enter your own image. Do NOT delete the line where it says "id="main".

Now all you do is you add this code:


There are a number of sites to use to upload your images, the main ones being:

So this is what it should look like in the HTML now

and that's that. This is the before widget header and the end result!

Now depending on what widgets you have, you have to search for them by their title. If you haven't put a title on them, make sure you do because that will make this easier for you. (To do this - click 'Layout' on the side bar on your login page - then where it says 'Add gadget' click on that and the first box will be your 'Title').

So, just to make sure you understand what I meant there..

I searched for the code 'Thank you' for this widget, as that's the Title I named it.

and then found the same 3 lines of code as I mentioned above.

So all I did was the same process of deleting those 3 lines and replacing it with my own image, like this:

So as you can see, it's a lot easier to spot the code you're looking for if you have named a Title on your gadget/widget.



And there's no need to copy and paste it every time you make a new post! Your signature will automatically appear, how much easier is that?

There are 2 ways of doing this, it doesn't matter which one you choose, but I'd say the first one is probably the easiest way of doing this and the less confusing if you're first starting out with the site.

Option 1)

On the side bar on your login page, click on 'Settings' then 'Posts and comments', then you'll have this page.

Where I've pointed there arrow, click on 'Add' and it should come up with a box like this.

In the box 'Post Template' you enter this code:

<div align="right"><img src="IMAGEURL-HERE"></div>

or this one if you prefer <img src="IMAGEURL-HERE" align="left"></img>

I've put an example of it being both on the left or right just so you can see what it would look like. All you do is change the 'right' to 'left' and vice versa depending on what you want.

So it should look like this everytime you write a new post. (Obviously only one of them being there though) and it's there waiting!

Option 2)

First of all, make sure you've opened up all the code. By this I mean, click on the little black arrows on the left side of the HTML box, like this:

and that will show you all the code there is to your blog. Now you need to look for this code:

post-footer-line post-footer-line-1

It should look like this:

now below the code, enter this:

<img src="IMAGEURL-HERE"></img>  - So that it looks like this (I've made a gap, just so you can see clearly where I put the code, but when you're actually doing it - don't make a gap)

And you're done!

Option 3) I've gone for this option

In the HTML code, look for:

.header-outer {

(It should be somewhere near the top)

Can you see how I've made a really big gap above that code and the bit that says '/* Header---- */' ? Just above that, enter this code:

.entry-content:after {
content: url(IMAGEURL-HERE);

So that it looks like this:

And that's it all done, this is what it looks like on my blog!



If you don't want to make your own, there are many websites out there where you can download sets for free. If you just google 'media set icons free' and a variety of that sentence, then a list of websites should come up.

The rules to add them though, go the same even if you make your own.

This is an icon I just made now to show you how to add them, not the fanciest looking thing but you know aha.

Now go on the side bar on your login page, click 'Layout' then 'Add a Gadget' and make a page called 'Contact'. Next, upload your image to a site (I used tinypic for this) and paste this code into the Contact widget:

<a href="https://URLHERE"><img src="IMAGEURL-HERE"/></a>

So that it should look like this:

And that's it done! This is what it would look like on your page.

Now for the other buttons you would just change the image and link. So for example, let's use Facebook.

<a href=""><img src="IMAGEURL-HERE"/></a>

Then you just keep going with whichever buttons you want to have on your blog. Most people have Twitter, Facebook, Pinterest and a Contact button.


I really hope I helped some of you out there and that I explained this well enough for it to be understood 
If there's anything in particular you'd like to know how to do, please comment below (or email or tweet, whichever I don't mind!) with your request!


  1. I'm going to try this later as I am fed up of my blog design! I love your blog, I'm a new follower :)

    I would love if you could maybe check out my blog?

  2. Sophie it was lovely to chat to you on twitter last night - doesn't an hour whizz by on the #fbloggers chats?!! Well done for writing this post - that's a lot of work and so helpful. I had my blog for ages before I ever did anything with HTML or icons, etc. - I eventually worked it out the hard way. If only I'd found tutorials like yours!! HTML is a pain in the bum but I find the more you do the easier it gets. Sort of... ;))

    So thanks to your icons I've found it easy to follow you on FB, IG, etc. Oh and let me know if you're on Google+! I'm wanting to follow everyone there now... You can find me here: Google+ Come say hello on the blog if you get a minute!

    Catherine x

    1. Hey! aw thank you, it was nice speaking to you too! :) yeah it really does, I love being a part of the chats! Thank you! I hope it's easy to understand for everyone, I was a bit worried about posting it aha but that's good to hear. And yeah that's true, practice makes perfect!

      Thanks! I think I've followed you just now on Google+? I'm not really sure though, still need to get a hang of that site aha. But incase I didn't, here's my profile x

  3. I just nominated you for the Liebster award! If you want to accept it, click on the link and answer the questions I set you :)

    (Sorry if you have already been nominated!)