Handy little bits of code for Bloggers P1

A re you wanting to manipulate your blog posts with a little help of CSS? As a blogger editing HTML is not always an easy task and unless you have studied web design and code some way or another, it is likely you may need a helping hand. I am still learning how to use HTML which can appear to be a muddle of words and numbers into something that makes sense. I am not a professional nor have a studied Web Design but as time has gone on as a Blogger, aswell as my Time Studying ICT back at school and Journalism & Digital Media at University, there are some bits and pieces that I have come to understand. My greatest piece of advice is to read books and research on the internet. At the beginning of this year I purchased a Book called HTML & CSS by Jon Duckett on Amazon, this has been a god send, It breaks down aspects of code and help you to understand it. Of course with time and practice things start to make sense.

If you are looking to make small tweaks to how your blog looks, I will be doing a blogger tips series, which will help you make sense of some HTML as well as making a difference to the look of your blog. In this series, I shall be sharing a couple of HTML tips to help you and your blog on your way. You could say that these are Blogger HTML hacks for those who would like to use HTML without the hassle!

ADDING A DROPCAP

Firstly as my blog gets older, just like myself... I wanted to have a more mature look to my blog but still fun. You may have noticed that I have changed my Banner again slightly and that the overall font has changed. For reasons that I shall be sharing in due course. I wanted to give my blog to have a look of a more traditional style of content, therefore having a Drop Cap would be in keeping with this look.

For this you can use this piece of coding to create one.

<span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">A</span>

If you wish to use a font for this, add font-family: times;

The code below will make your drop cap look like this

<span style="float: left; font-size: 70px; font-family: times; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">A</span>

You can omit areas of this code and change aspects to fit your need. For example if you wish the font to have a particular colour you will need to add a colour code to your piece of coding, These are called Hex colour codes, for example Black is #000000

Here is the Drop Cap in Pink

<span style="float: left; color:#FF0066; font-size: 70px; font-family: times; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">A</span>

ALIGNING PICTURES SIDE BY SIDE

When creating a post I like to maximise the potential of the space available to me, therefore when using photographs from my Instagram account or square photographs, there can be a lot of empty space around your images, especially if you do not want to fill the post width with that one image. To combat this issue, I like to use a little bit of HTML for putting images side by side. This is great for making a colage of my photographs for a post which will be image heavy.
<br />
<div class="container">
<div style="float: left; width: 49%;">
<img src="https://lh3.googleusercontent.com/" />
</div>
<div style="float: right; width: 49%;">
<img src="https://lh3.googleusercontent.com/" />
</div>
</div>

To present your photographs in this way, you will need to save your images to an online storage place. If you use blogger you are likely to store photographs on your Google account. You are best storing them there and using the URL link to that image in this code. The area you will need to adapt in the code is highlighted in pink

<br />

</div>

</div>

If you need any help with this, I will do my best to help just leave a comment below or Tweet me @hell0scally. I hope you have enjoyed this style of post and if there are any areas you would like me to cover, I shall try my best to do so.

Until next time

xox

Monday, August 10, 2015