However, I know not everyone is enamaoured by code as I am. That it can feel a little daunting.
Here a few things that might be useful if you feel like dipping your toe in.
- Copyright footer to change year to year.
var today = new Date()
var year = today.getFullYear()
</script> Your Blog Name</em>
- Spacing betweens bullets and numbering.
Sometimes spacing between your bulleted and numbered lists can look a bit squishy. If you want to space it out, you can use the following in your list code. (In WordPress, go to your text tab within your post.)
Find the <li> tag, which is what controls the list items. Add this code:
<li style=”margin-bottom: 6px;”>
- Formatting just one word or letter, rather than complete line.
Ever wanted to apply formatting to just one word rather than the whole line offered by using your headings, ever waned to do more that just changing the colour?
Ever wanted to go BIG
The way that works is through the use of the <span style> tag, the BIG was achieved via this code:
<span style=”color: #ff9999; font-size: 60pt; font-weight: bold >BIG</span>
- Changing the numbering start
Other times you might want to start re-numbering your list half way through. Maybe you want to start at 1 again or maybe you want to apply some formatting mid-way through your list that causes it to restart. Either way, you have the control.
This time find your <OL> tag, which is what starts your list off, and use this code (replace 2 with wherever you want to start).
- An easy way to add your blog images to MailChimp
This isn’t strictly a blog or coding thing, but as bloggers use mailchimp for newsletters, it’s a helpful tip. When you are adding your images to your newsletter, don’t download and upload – that takes forever. Instead use this trick:
- Go to the picture you want to share, right click and choose copy image address
- Go into Mailchimp and choose to insert a picture
- Choose the upload image address option
- Paste the copied text
- Remove any reference to resizing
- While that’s loading up, go back to your site and copy the link address itself
- Once the picture is loaded, past in the link address
This saves so much time.
- Links should always open in a new tab
If I’m reading a blog and I click on a link, I’m surprised by how often I’m taken away from the blog post entirely. Your readers don’t want that and I don’t think the blog author really wants that either. When you add a link, make sure that tick the “open link in a new tab box”. In your code, you want the link to have this little bit in the <a href> tag:
<a href=”LINK” target=”_blank”>
- Click on image to go back to blog post
When I click on an image associated with my post, I want it to link back to the blog post, not the image itself. I think this is particularly important on my home page where I list my blog posts in short excerpts. I’m old school with my home page but I like the “bloginess” of it. One day I might get around to a landing page. In the mean time, I want to make sure that each image goes to the associated post. You can do that in the image properties, but I think it’s less fiddly just to duck into the code and use this applied before the image code and finished it off with a </a>. Obviously it will be the link to your post, not mine.
Just a word on doing this – it doesn’t allow you to then open and save an image easily when you are reviewing the post on your mobile. So if that’s the way you like to share back to Instagram or whatever, you’ll need a different method.
Before I finish up, a thought I’d just add a word on HTML and CSS. HTML is the language that the internet has been built on. It’s a basic markup language allowing you to store the content and format the words and images appearing on your web pages. Very simply, you tell the browser what you want to appear and how you would like them to appear and act by using commands enclosed by angled brackets, called tags. You tell the browser when to stop applying the formatting by ending the angled brackets. You can use HTML in the coding editor of your posts and in your widgets.
CSS stands for cascading style sheets. The idea is that your define how you want your website to look and feel, for example how your headings should look, at a top level and then each page refers to that style sheet. It’s basically how themes work – they are set of CSS. The code within CSS looks a little like HTML but there are significant differences. HTML is designed to store content and CSS is designed to customize how the content is displayed.
You can edit both HTML and CSS within your blog. You want to be careful with editing CSS as it will affect your whole site. You also want to be sure that you apply it in such a way that it is not over-written if you update your theme. If you have Jetpack in WordPress you will have an area where you can edit CSS. This applies the CSS over the existing theme so you don’t have to worry about child themes.
I really hope that’s all super helpful. To me, jumping into the code is never a scary thing – it’s an exciting thing. You gain so much more control over the look and feel of your site. Happy coding!
Any other coding tips to share?