Table of Contents
I know that not every blogger knows how to code and that’s ok. But there are some bits of code that every blogger should know. I have a whole section of blogging tips on this blog but there are very few posts about code.
This post is all about Blogger if I’m honest. There will be the odd bit that WordPress users can implement but honestly, a lot of what you want to do can be done with plugins rather than code. I’ll be popping a B or WP in brackets next to each heading as a guide to which site it can be used on.
Since I’ve moved to WordPress, I found that there wasn’t much need for code but as I’ve had to change my theme, I’ve been needing to use more code than before.
There’s still a couple of things that I need to figure out and maybe I’ll have got there by the end of this post. These are all bits of code that can be copied and pasted and used in various situations on your blog or when commenting on others posts.
Justify blog text (WP)
While having my text left justified used to work for me, now these days I prefer a fully justified text. It just looks better with my blog theme but I had to hunt a little bit to find the code to be able to do this. This is more for WordPress users and means that you don’t need to choose the option every time you write a blog post. I know I forget to on a regular basis so I added the code to my Custom CSS in my theme customiser.
p {text-align:justify;}Add a link to but show specific text (B/WP)
This is the code that you need if you’re wanting to add a link to a specific page in your bio text in your sidebar on either Blogger or WordPress. You can also use it if you’re wanting to add a clickable link to your blog within a comment you leave on someone else’s site. The URL goes in first and then the From Fiona is what shows up as a link.
<a href="http://fromfiona.com">From Fiona</a>If you want the link to open to be able to have someone send you an email then insert the words “mailto” within the code and the email address. As with above the email address comes first and then the words Email me are what shows up.
a href="mailto:info@fromfiona.com">Email me</a>Nofollow links within blog posts (B/WP)
Nofollow links are important in blogging especially if you do sponsored posts or include gifted items. The problem I’ve found is that the plugin I had been using which added the option to WordPress as a tick box (I know, easy) now doesn’t work. This means that I need to add the code myself to ensure that the link is nofollow.
This is pretty easy to do and I would recommend doing it after you’ve added the link that you want. In Blogger, I know you can do it with the tick box but it’s worth knowing what to look for.
Standard link
<a href="http://fromfiona.com">From Fiona</a>Link with the nofollow attribute
<a href="http://fromfiona.com" rel="nofollow">From Fiona</a>Make Widget Blocks Deletable (B)
With all the issues with changing themes at the moment on Blogger you may find that you have widget blocks that you don’t want to use but don’t have the option to remove them. You can add this code within your HTML and then delete the widgets.
First, you need to find the reference for the widget you want to add the code to. Open the widget and then maximise the box so you can see the full URL. At the end of the URL it will say widget ID and then something like Text1 or Image2. Make a note of this as you will need it when you go into the HTML of your site. You get there by going to Theme then Edit HTML. I’m going to use Text1 to keep it consistent.
Within the HTML editor of Blogger use CTRL+F to bring up the find box and enter the widget ID you’re looking for. In this case, Text1. It’ll bring up the line of code that you want to edit and it should look something like this:
<b:widget id='Text1' locked='true' title='About Me!' type='Text'>Change the words true to false and then save the HTML. You can now delete the widget from your layout.
<b:widget id='Text1' locked='false' title='About Me!' type='Text'>Add Sidebar Widgets to Mobile View (B)
There are some widgets that don’t show in mobile but using the same method as above to locate the code for the widget within your HTML you can add one piece of code that will make them show up. Below is the original code that we will be adding to.
<b:widget id='Text1' locked='true' title='About Me!' type='Text'>In this case, we’re adding a piece of code into what’s already there. You just need to make sure it’s in the right place and has the correct punctuation around it. Below is what is being added to the code.
mobile='yes'It comes after the ‘locked=’true’ attribute in the code above. Below is how it looks when added in.
<b:widget id='Text1' locked='true' mobile='yes' title='About Me!' type='Text'>Once you’ve added the code in you can save the HTML and then your widgets will appear on mobile view.
Twitter Summary Card (B)
Someone queried this in a blogger group today and it made me remember that I blogged about this quite some time ago. Here is the link to the full blog post if you want to give adding your own summary card a try for yourself.
If you want more blogging tips or advice then I have a whole section on my blog dedicated to them. If you have any specific questions then you can email me using the link in my sidebar or ask me in my comments.
