Allison Cafe

For those of you using WordPress to power your blog, I thought I would answer a great question I received recently.

How do you add images to your sidebar to create a “currently reading” section?

WordPress offers several widgets that you can install to meet your image needs, however, if you are looking to do something very simple I will share a quick tip with you. You’ll notice on the sidebar of this blog that there is a simple image of a book cover with the heading “I’m Reading Now”.  Using the already built in “Text” widget for my sidebar I was able to insert some simple HTML code into the text widget to create this image.

1. Step 1: Find an image of the book cover you wish to display by either taking a photo yourself, or do a quick Google search for a free image (that is ok to reuse). Save the image to your desktop and use a simple photo editing program to make the image the appropriate width, height and file size. For example, in my text box the image is 150 pixels wide by 225 pixels high and less than 50kb in size. Be sure to constrain proportions when resizing images so as to retain image resolution.
2. Step 2: Add the image to your media library in WordPress by clicking “Add New” under the media section. Note the url location of the image, you will need that in the next step, you can find this by choosing to view the image, simply copy the url address of your image.
3. Step 3: Create the text to appear on your sidebar by clicking “Widgets” under the appearance section in WordPress. Choose to add the text widget to your sidebar and drag it to the desired position then click “edit”. You can enter simple text or HTML into the text widget. If you do not have a program to help you edit HTML code, simply use my code below as an example. Click Save Changes  on the widget page when you are done. You should then see the image and new text section in your sidebar.

Sample code for the Text box. Edit the areas in orange below and paste into your text widget:

<p style=”text-align: center;”><a href=”http://www.ENTER DESTINATION  URL  IF ANY HERE.com” target=”_blank”><img class=”size-full wp-image-120 aligncenter” title=”I’m Reading” src=”http://www.ENTER URL LOCATION OF YOUR IMAGE HERE.com” alt=”BOOK  TITLE” width=”150” height=”225” /></a></p>

Be Sociable, Share!

• 
•