div id="WFItem657351" class="wf-formTpl">
Headline Name: Email: subscribed: 130 We respect your privacy Email Marketingby GetResponse

How To Insert And Center An Image In A WordPress Sidebar Widget.

17 Flares Twitter 1 Facebook 12 Google+ 3 Pin It Share 0 LinkedIn 1 Buffer 0 Email -- StumbleUpon 0 17 Flares ×

This is the first in a Five Part Series showing you how to do some of the everyday tasks with WordPress using basic HTML code.

This first post will show you how to insert and center an image in a WordPress sidebar widget using some basic HTML code.

 

Let’s say we want to add this image into our sidebar….

how to insert and center an image in a sidebar widget

These are the steps to follow to do just that:

Step 1: Upload the image using the Media >> Add New tab in the left hand sidebar of the dashboard.

Step 2: Go to Appearance >> Widgets and drag a new ‘Text” widget across to the sidebar.

how to insert and center an image in a sidebar widget

Step 3: Go to the Media Library and click on the file name of the file you wish to add. Copy the File URL

how to insert and center an image in a sidebar widget

Step 4: Go back to the Text Widget you just added and type the following:

<div align="center"><img src="Paste the copied URL here"></div>

…and click Save.

how to insert and center an image in a sidebar widget

Step 5: Visit the WordPress blog and refresh the page and you should see your image installed in the sidebar and aligned in the centre.

how to insert and center an image in a sidebar widget

Things To Remember

1. Your image needs to be smaller than the width of your sidebar, otherwise it will overhang the edge of your blog. If you need to resize the picture you can add the following to the code to specify a certain size.

<div align="center"><img src="Paste the URL you copied in Step 3" width="250px" height="250px"></div>

[If you need to resize your picture you can use an online resizer such as Pic Resize]

2. Make sure you have matching pairs of <> and ” “. If you miss one it will make things go a little screwy!

 

Here’s to your online success,

Lorraine McNulty - Build a Blog

 

The next post in the series will be How to manually add a link in a widget using HTML code.

If there are any topics that you would like to see included in this series that require the use of HTML code please let me know in the comment box below.

Lorraine has been designing websites for over 20 years.
She is dedicated to helping entrepreneurs market themselves online via blogging. Her site provides tips & tutorials on blogging and full services for blog set up and customization.
Lorraine is originally from England but now lives in Ontario, Canada with her husband, two teenage boys and her Newfoundland dog, Bentley.

Facebook Twitter LinkedIn Google+ YouTube 

26 Responses to How To Insert And Center An Image In A WordPress Sidebar Widget.

Leave a Reply

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

CommentLuv badge

Recent Posts
Famous Posts
Last Comments
Check this out…

Winner!!!!

Top50

Bling Your Blog….Blog Graphics

Marketing Blog Bling Graphics

Topics of Interest
Like Me On Facebook
Add Me To Your Circles…