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.

sidebar

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.

Unsplash-Image-Code

The code used in to link any text or image, to another website looks something like this:

<a href=”http://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

Target Attribute

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.

Text-Tab-2

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=”http://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:

Front-page-Sidebar-Widget

Conclusion

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.

John M.

Other Posts:  Captain America: Civil War Review | Photography and What is Depth of Field | Beets Blu Pager Tag and Heart Rate Monitor

Follow:
Share:

29 Comments

  1. June 1, 2016 / 3:38 pm

    Great post! I’m sure it will be very helpful to newbie bloggers or those who find HTML tricky.

    • June 1, 2016 / 9:01 pm

      This is one of the reasons I did this post. I know older bloggers will know this trick, but now and again it is always good to be reminded.

      John M.

  2. June 1, 2016 / 3:44 pm

    Really useful information for anyone starting out blogging and easy to understand.

    • June 1, 2016 / 9:02 pm

      This is the main reason I did this blog post.

      Thanks for Commenting.

      John M.

  3. June 1, 2016 / 9:18 pm

    I can do images on a sidebar but because I have limited coding on my site – wix- I can’t add a html code to my blog posts. Do you know how to do it on Wix?

    • June 1, 2016 / 9:59 pm

      Hi Ana,

      I think it is the same principle as WordPress. All you need to upload the image and have the src=”Folder Location” store the correct info and it will achieve the same results.

      If you want, I can help you with this issue.

      John M.

  4. June 1, 2016 / 9:55 pm

    Really useful tips, I’m sure new bloggers (or those new to HTML) will find this useful x

    • June 1, 2016 / 10:06 pm

      It will be useful to new bloggers. I just hope people come to visit and read it more often.

      John M.

  5. June 1, 2016 / 11:11 pm

    Thank you so much for such an indepth guide – where were you when I needed to learn things like this!

    • June 2, 2016 / 1:27 pm

      I was sat where I am right now. 😉

      I hope this blog post will be used to help others have issues of linking images in their side bar.

      John M.

  6. June 1, 2016 / 11:30 pm

    This is a brilliant informative post – I see those same questions asked time and time again. I am so glad I will have a link to be able to forward onto newer bloggers who ask about side bar badges and the dreaded no follow debate!

    • June 2, 2016 / 1:25 pm

      If I can help just one person, then this post has achieved its goal. The more people I can help with this post, the happier I will be.

      John M.

  7. June 1, 2016 / 11:36 pm

    Brilliant post I have never added in a side bar image so I have bookmarked for when I need to know what to do, thanks for sharing 😉

    • June 2, 2016 / 1:00 pm

      I hope you are able to find this post helpful. If you have any questions, please let me know.

      John M.

    • June 2, 2016 / 12:58 pm

      Yep there certainly is a lot to digest with this post. I did try to make it simple and straight forward. HTML can be tricky but it doesn’t have to be.

      John M.

  8. June 2, 2016 / 9:06 am

    Ahh great post, super helpful for newbies or people looking to learn more about HTML 🙂

    • June 2, 2016 / 12:57 pm

      There will be some people who will know something about HTML, and there will be others who are just starting out, who will know next to nothing about HTML.
      Hopefully they will find this post and be able to follow along.

      John M.

    • June 2, 2016 / 12:54 pm

      HTML coding can be frustrating at times, but thankfully I do understand a lot about how HTML works.
      I did this post for people like yourself. I hope you are able to understand what I have tried to convey with this post.

      John M.

  9. June 2, 2016 / 11:07 am

    Great post! I’m hopeless with HTML code! Thankfully I work in a place with people who do know ha! This is definitely helpful!

    • June 2, 2016 / 12:53 pm

      Well, I did this post with people like yourself in mind. It is always good when someone is able to help with HTML coding.

      John M.

  10. Hannah
    June 2, 2016 / 1:33 pm

    This post will be great for new bloggers, I could have done with this when I started!

    • June 2, 2016 / 4:35 pm

      I do know some experienced bloggers out there who have issues with HTML, but yes, I agree.
      This post will be better suited towards new bloggers.

      John M

  11. June 3, 2016 / 9:31 pm

    Image widget is really an advantage in a blog. I found it more attractive. This is a detailed guide and tips for bloggers. 🙂

    • June 4, 2016 / 1:02 am

      I agree, there are so many advantages of using an image to convey a message on your sidebar.
      I hope those who are starting out in blogging will be able to find this post.

      John M.

    • June 4, 2016 / 3:42 pm

      I hope New bloggers find this post. It will definitely benefit others too.

      John M

  12. June 10, 2016 / 8:17 pm

    This is such a helpful tutorial! I found it really easy to follow too.

Leave a Reply

Your email address will not be published. Required fields are marked *