Adding An Image Widget to Your Side Bar
In the last few weeks, I have been asked me over and over: “How do I add an image to my sidebar with a no follow script?”. To explain how to do this, I need to explain how a web browser reads HTML code. A web browser reads all the HTML code used to create a website, then translates the code so you see the website.
Within the HTML code there will be some Hyperlinks, also are known as ‘Links/Backlinks’ and they use a fairly straightforward piece of HTML script. This same type of HTML script/code is used by WordPress in creating a text widget with an image linked to another website. If you have links to Britmums Live 2016, or Tots100. You will have copied and pasted a script into your sidebar via a ‘Text Widget’. If you are a new blogger and you have not yet signed up to Tots100, then this is how you link up an image to another website through your sidebar widgets.
The code used in to link any text or image, to another website looks something like this:
<a href=”https://www.mrgeekandgadgets.com” rel=”nofollow” target=”_blank”>TEXT HERE</a>. When a website designer uses this code, this is what it looks like when the HTML script is translated by the web browser: TEXT HERE
The code above is straightforward HTML code statement for creating a HYPERLINK. ‘<a’ opens the statement and tells your web browser ‘there is a hyperlink at this location’, so when the link is clicked on, the web browser will be redirected to a new website.
Adding An Image Widget to Your Side Bar
As bloggers, we are trying to get visitors to our blogs and keep their attention for a long as possible. So within the ‘<a’ attribute, the code instructs the browser to open the link in a new tab or window. After all, we want to keep the visitor on our blogs so then can read more of our posts. The code attribute which deals with browser opening the link in a new tab is the ‘target=”_blank”‘ reference. The ‘target’ attribute helps user open a new tab, so they stay on our website for a long as possible. This way, the user/visitor can click on the tab where are website is, without having to find the whole page all over again, because this would be rather annoying right!
No Follow links
If you have not heard about Googles code of practice about follow links for bloggers, then we need to briefly discuss that or you can read it by clicking on this link: ‘Best practices for bloggers reviewing free products they receive from companies.’.
Like many bloggers out there in the bloggers sphere, we are often approached by PR Companys asking for a post with a few backlinks. Sometimes they ask for ‘do follow’ links which are not appropriate as far as Google are concerned. To add a ‘no follow’ attribute to a ‘<a’ tag. You will need to insert the following code: rel=”nofollow”. This ‘rel=”nofollow”‘ attribute instructs Google’s Page ranks system, that you have some ‘no follow’ links to another website on your website/blog.
Fig 1.1 (Click the Image to enlarge)
With the image above (Fig 1.1), I have clicked on the ‘Text’ tab in my WordPress Edit Post area. In the Text tab is all the HTML code the post uses so your web browser can translate the code where necessary. I have highlighted the hyperlink script so you can see what it looks like.
Image Source location
I have explained how the ‘<a href’ attribute works, now I need to explain how to link an image to the ‘<a href’ tag. If you are wishing to place linked image in the sidebar, go to your widget panel and create a new Text Widget.
Fig 1.2 (Click the Image to enlarge)
Once you have created your widget you will need to enter a few details. In Fig 1.3 below, is the text widget and the HTML code which I would need for the image in fig 1.4. It is always a good idea to centralise the image, so to do this you will need to type this a new HTML statement. There are two ways to centralise but the one I have chosen is very straight forward. Type <center> first then close the statement with the next HTML text: </center>. In between the opening and closing <center>, press your enter button to create a bit of a gap to enter your image with an HTML script. For the purpose of this tutorial and the text in for fig 1.3 just copy all of the text I have written.
<center><!– This aligns the image to the centre of the text widget –><a href=”http://www.google.com” target=”_blank” rel=”nofollow”><img src=”https://www.mrgeekandgadgets.com/wp-content/uploads/2016/Wordpress-Library-image-location.png” alt=”Wordpress-Library-image-location” /></a></center>
Fig 1.3 & 1.4 (Click the Images to enlarge)
With the HTML code I have cut n’ pasted above. My Browser translates the HTML code/script into the following image for Fig 1.4.
Fig 1.5 – 1.6 -1.7 (Click the Images to enlarge)
Now, I am not asking you copy and past MY image but the image you wish to put on your sidebar. You will need to open a new tab with your WordPress library, so you can locate the required image. Place your mouse cursor over the URL text and select all the information in the box. Press CTRL+A (Windows PCs)/CMD+A (Mac OS X) the press CTRL+C (Windows PCs)/CMD+C (Mac OS X). This is the copy keyboard shortcut command. Once you have copied the URL details, head back to your text widget and Press CTRL+V (Windows PCs)/CMD+V (Mac OS X) in between the quotation marks of the: <img src=” ” script. This tells your browser, where the image can be found once the website is loaded on your screen. For retaining good a SEO score, it will be a good idea to enter the name of the image in between the quotation makes of the alt=” ” attribute.
If you have managed to follow all of these instructions properly, your sidebar should look like Fig 1.4:
I have done this tutorial as a way of helping you link any image in your sidebar. Even if you have a new sponsor or affiliate link, or if you have become a brand ambassador. You can put their image in your sidebar using this simple technique. You are only required to enter the rel=’nofollow” tag, for links to other websites. Links to posts within your own website/blog do not need the rel=”nofollow” attribute and can be removed for internal links.
There are plenty of plugins which can enter the rel=”nofollow” automatically into your HTML script just by ticking a small box, or you can do it the old fashioned way. Do it all by hand, through the aforementioned tutorial.
I hope this helps and I hope you save this post for when you need it the most.