HTML for Beginners

Sunday, 3 January 2016


I have been putting off this post for far too long now, it is a post I have had written down in my post ideas notebook for months, but as its one of the most complicated and longest posts I will ever write I always put it off. Today I decided to take the plunge and just start writing it as it is highly requested and will help all of you who are planning to revamp your layout this new year.

I am not a professional, I am self taught at HTML so some things may be unconventional or I may approach things in a very odd way, but I just want to give anyone who needs it a little help in how to approach HTML and get to grips with it. This is also based on Blogger HTML and although parts may be similar on other blogging websites I can't promise you that everything I write will be of use to you if you use WordPress or other websites.

ADDING CUSTOM FONTS
One of the first things I done which was HTML related was making my post header a custom font from Google fonts. To do this I of course found a font I loved on Google font, I then clicked the quick-use option and copied the standard HTML code. Then searched for <head> in my HTML and pasted it directly under that, adding a forward slash at the end so it looks like

<link href='http://fonts.googleapis.com/css?family=Kurale' rel='stylesheet' type='text/css'/>
instead of
<link href='http://fonts.googleapis.com/css?family=Kurale' rel='stylesheet' type='text/css'>

I then search for "post-title" and found:

h3.post-title {
font: $(post.title.font);
margin:0em 0 .5em;
margin-top: -10px;
margin-bottom: -20px;
left; -2px;
font-family: 'Kurale', serif;
font-size:25px;
}

The blue writing of course is what I changed.

To change the footer text you would search "post-footer" find a similar coding and change the same blue writing and so on.

ADD SPACING TO THE SIDEBAR
Something I think can make a blog look so much better is to add some equal spacing to the sidebar by putting space between the title and the content. To do this it is really simple. If you all of your sidebar options in the layout section of Blogger simply go into them and at the top above the HTML codes (in HTML/JavaScript widgets) add 

<div class="separator" style="margin-top: 10px;"> at the top above all of the HTML content. You can change the text in red to suit your prefrence.

Add </div> at the very bottom below all content in order for this to work, without this the code is useless.

ALIGNING PHOTOS WITH POST
I found this one put when playing around with my blog at like 3am one morning. On Blogger you may have noticed that if you have had a play around with your layout sometimes when you add a photo it isn't in line with the text above and/or below it, to fix this you alter the HTML within the post, you should see something similar to this for your photo:

<a href="http://4.bp.blogspot.com/-eH2sa3qaMAI/VoVYcgKNIUI/AAAAAAAAB04/IPtzXuR1sKo/s1600/2016-Goals.jpg" imageanchor="1" style="margin-right: 1em;"><src="http://4.bp.blogspot.com/-eH2sa3qaMAI/VoVYcgKNIUI/AAAAAAAAB04/IPtzXuR1sKo/s1600/2016-Goals.jpg" /></a>

The text in red is what you alter, for each of my posts I replace whatever is here with:
clear: left; float: left; margin-bottom: 1em; margin-left: -0.5em; margin-right: 1em;

The text in blue can be changed to suit your layout or even deleted if that suits your blog better. It can take a while to find exactly what numbers make it align perfectly, but use the "preview" button to continuously check until your post is perfect.

EDITING DATE OF POST
For the date you have posted the blog post there are a few things you can do to alter the look and layout (you have no idea how hard it was for me not to write Luke and LEIAout). Go to your HTML and search for "date-header" and you should find something like this:

.date-header span {
display: inline-block;
position: relative;
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing:0.5px;
}
.date-header {
    overflow: hidden;
    text-align: center;
    margin-left: 100px;
}

Change the green to change the spacing between letters, blue to change the alignment and red to move the text from side to side.

SPACE BETWEEN THE DATE OF POST AND POST HEADER
I felt like my date and post header were far too far apart so to change this I done this simple little HTML edit. Search for "post-title" in your HTML and you should find:

h3.post-title {
font: $(post.title.font);
margin:0em 0 .5em;
margin-top: -10px;
margin-bottom: -20px;
left; -2px;
font-family: 'Kurale', serif;
font-size:25px;
}

Change the red text to change how far apart the date and header are, the blue you can use to change the space between the header and content of blog post, the green is sliding the text a little more to the left and the pink is the size you want the text to be.

CREATING LINK FROM PHOTO
I will explain this by using my categories as an example. I done mine completely from scratch, by adding a HTML widget on the layout section of Blogger. Once I done this I used Photoshop to actually design the buttons, I kept a note of the colours, font, font size and button sizes to ensure that each button would match perfectly. I then opened a draft post and popped each of these photos into it and without publishing I used the HTML tab to copy the URL of these each of these photos according to when I would need it.

After this I used this code to turn these images into links to my tagged posts:
<a href="LINK TO WHERE THE BUTTON GOES" imageanchor="1" style="margin-top: 10px; text-align: left;"><img border="0" src="LINK OF PHOTO/BUTTON"/></a>

The text in red can be changed to adjust how much distance you would like between the buttons, you can adjust this according to your own preference. The text in blue is the alignment of the button you can change this according to your preference too. 

Remember to change the links each time you do this and double check everything works how it should. If you are creating multiple links one after the other like you do for categories you don't have to place the "</a>" in until after you have written the very last one. E.G:

<a href="LINK TO WHERE THE BUTTON GOES" imageanchor="1" style="margin-top: 10px; text-align: left;"><img border="0" src="LINK OF PHOTO/BUTTON"/>
<a href="LINK TO WHERE THE BUTTON GOES" imageanchor="1" style="margin-top: 10px; text-align: left;"><img border="0" src="LINK OF PHOTO/BUTTON"/></a>

Okay so I did add a few little harder ones in there, but I really love doing these sort of posts, if you would like me to a specific tutorial please ask below, I think I will be doing a post on how to make a Blogger blog look like less of a blogger blog next. Feel free to ask me questions on here, Twitter or email me over at heythererobyn@gmail.com. 

I hope this post helped some of you,
Thanks for reading!
What over blogger layout posts shall I do? 

Latest Instagrams

© heythererobyn. Design by FCD.