How To Add Your Photo to Your Blog Side Bar

Our next posts in our “blog makeover” series provides an excellent opportunity to respond to Dina Strasser suggestion to do:

a follow-up post on how to (and the limits to) customizing widgets. For example, I’d like to include on my sidebar a simple link to my Twitter page (no updates).

It is recommended you read the previous post on Getting more out of Widgets prior to reading this post.

Basic knowledge of HTML provides greater ability for customizing text widgets; means you can embed photos in your side bar, link to pages on your blog or other websites, write text using bold and italics.

What is HTML?

HTML is a bit like RSS, for bloggers there is no need to fully understand it but helpful if we learn the basics of how to use.

HTML is short for “Hyper Text Markup Language” and a language used to tell a browser how to organise the layout of a web page it has downloaded from the WWW e.g. influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry HTML because the Visual Editor does it for you. If you click on the Code tab it shows the HTML code in your text.

html.jpg

Basic knowledge of HTML is really helpful for tasks like customizing widgets and writing comments on blogs.

Examples of HTML used to highlight text include:

  • <strong> tag makes text strong e.g. I <strong>really like</strong> this idea produces I really like this idea.
  • <em> emphasizes text e.g. I <em>really like</em> this idea produces I really like this idea.

Notice you must use the < and > symbols around the HTML Tags and the tag is closed using a ‘/’ (slash) in front of the tag keyword e.g. </strong>

Here’s how you can use HTML to add your photo to your Blog Side Bar

<img src=”http://www.theedublogger.com/files/2008/01/question.jpg” alt=”question mark” />
producesquestion mark

This is how I embedded Larry’s photo on his blog. Personal connection is important for readers — adding Larry’s photo means his readers now know more about who he is i.e. they can visualise him.

imagehtml.jpg

Final Thought

As Kevin pointed out:

if you doing a blog maker make sure you write a post to invite your readers to comment on your changes. Readers who read your post via RSS won’t be aware of the change because everything will look the same in their feed reader.

Remember to pop past Larry Ferlazzo’s Website of The Day blog and give him feedback on his makeover!

Dina Strasser request for tips on adding “a simple link to my Twitter page (no updates)” will be covered in my next post.

It does take time to get used to using HTML; the key with technologies is willingness to experiment. As you become experienced with using HTML you will recognise opportunities that can be enhanced with it’s use.

Other posts in our “blog makeover” series include:

If you are enjoying reading this blog, please consider Subscribing For Free!

Sue Waters

Edublogs Support Manager @suewaters on Twitter

35 Responses

  1. Rafa Ribas says:

    Hi Sue, excellent post again.
    Just a little something that might puzzle some readers if they try to relate what you explained with what they see e.g. when they are editing a comment. The HTML tag that WordPress uses to make bold text is not [b] but [strong] (I used square brackets instead of angular brackets to avoid the software thinking I am writing actual code! – how did you avoid that problem in your post?). Similarly, instead of [i] it uses [em] (for ‘emphasis’). I believe this has to do with good CSS practice and what not…

  2. Sue Waters says:

    Thanks Rafa – you’re totally right. Really appreciate the rapid feedback so I could make changes to the post. Clarified it with my friend who explained ” [b] [i] are old methods and are not supported. [strong] [em] are new and SEMANTIC!” After your comments yesterday you must be feeling better having helped me out.

    When you write a post using the visual editor it doesn’t recognise the HTML whereas when you write comments it recognises the html.

  3. mrsolson says:

    Wow, Sue, this is amazing! Just when I thought I was becoming edublog-savvy, you hit me with this! I’ve been exploring html a bit in customizing the size of some widgets, but this will help immensely (actually just printed it out to have on hand when working on my blog!). Just a note re: Larry’s picture (great pic, by the way!) – I was able to add my picture to my sidebar by using the avatar widget……….any reason NOT to use the widget and use code instead? Thanks so much for doing what you do :-)

  4. mrsolson says:

    Last comment re: picture was by me, Kate Olson, driving me crazy that it’s putting my edublogs username on instead of my real name, will have to work on that. Anyway, my pic is on my blog at http://googtweetblog.edublogs.org and I THINK it looks okay………..

  5. A great post Sue, after some great collaboration with your Perth colleagues. Keep up the good work, and keep us all smiling. Cheers.

  6. Sue Wyatt says:

    G’day Sue – another great post – which of course leads to another question from me. I understand about the HTML when writing a post or putting in the code for a widget, but if I am commenting on someone’s post, how can I put in a hyperlink? How can I use the HTML in a comment? Do I just put in the brackets and appropriate word eg strong or em around the words I need to bold or italicise?

  7. Hi, Sue,

    I second Sue’s question. I know I can put the url address and, most of the time (though not all) it will show up up as a live link in the comment. However, it would be nice to be able use a hyperlink, and it would also be nice to know what I’m doing that sometimes lets the url address be clickable and sometimes not.

    Larry

  8. Rafa Ribas says:

    Larry and Sue,
    If I can play teacher for a second (taking advantage of my timezone), the tag to include a hyperlink is [a] (I believe it stands for ‘anchor’, but don’t quote me on that one!)
    The syntax is – replace square brackets with angular brackets –
    [a href="http://www.iwanttogotothispage.com"]This is the text that will be a hyperlink[/a] – Please note the inverted commas and the http://!
    For example, you could visit my blog

    Happy linking!

  9. elona says:

    Hi Sue,
    Thanks so much for the info. It’s been most helpful. I have an extremely steep learning curve. I would love to know how to put those “pages” in with all the explanations and the arrows and comment bubbles. I think that skill would be ever so useful.

    Thanks

  10. I just joined edublogs. So, edublogger is quite helpful. The makeover segment was quite interesting and informative. I’ll start experimenting with widgets next :)

  11. Sue Waters says:

    Hi Kate (Mrs Olson) – excellent point and I will amend the post this week to explain that Avatar widget is also another option and to clarify that using the HTML means that I can add words with the images.

    Regarding your username – you can go into your dashboard and change how it displays your name. Click on the User tab, then select Your Profile… under nickname insert your name then click Update Profile. Then click on the drop down arrow along Display name and change it to your nickname. The click update profile. Now every time you write a post or comment it will display your preferred name.

    Thanks Judy for your support. Actually I even had some American friends help me out — great to know that there is a whole community behind us helping one another.

    Sorry Sue and Larry – I did cover this when I originally wrote the post however it was too long and too much information. I will be covering linking in the next post. However in the meantime Rafa’s been nice enough to explain it.

    Hi Elona – I assume that you want to know how I create my images? I use SnagIt which is definitely worth the money I spent.

    Eladventures welcome to Edublogs – glad our posts are helping you with your new journey. Please let us know how you go with experimenting with widgets.

  12. Elona says:

    Sue,
    Thanks. I’m off to take a look at Snag It.

  13. Desirae says:

    nice.

  14. Sue Waters says:

    Elona – how are you going with SnagIT?

    Desirae – thanks for your feedback. How are you going getting started with blogging?

  15. olddonation says:

    I am very new at this and started my first blog at WordPress.com because I thought I read it could be shared with edublog… now that I have my students involved I am told I need to move my blog to edublog. Is there a way to export everything to edublog and keep all the comments, template, etc.???

  16. Sue Waters says:

    Hi Olddonation – you will be able to import posts, comments, pages and categories. But it would be better that you post your question in the Edublogs forum – to ensure you are provided with the correct advice on how to import.

  17. steepl2 says:

    Sue, learning as I go. Great info! I think I need to sit down and really READ (lol) through it once more to start experimenting with HTML.

    Thanks!

  18. Sue Waters says:

    Well Mr. Perkins (steepl2) looks like you managed to use the HTML and have added the photo to your blog sidebar. Well done.

  19. imhoof says:

    I don’t understand how to add a photo to the sidebar. It seems that there would be a widget to just add the photo. I was fine until I uploaded the photo, now what do I do. Your post left me hanging there after step three. Anyone who can help me out, let me know. Thanks

  20. Sue Waters says:

    Hi imhoof – if you only want to add your photo to your sidebar — and don’t require words — the quickest way is to upload your photo as your blog avatar and then drag the avatar widget onto your sidebar. But I have checked your blog and it looks like this is what you’ve already done.

  21. kmooneyb says:

    Sue (or whoever can answer my question) regarding widgets. I included the Archives link in my sidebar. On the main page of my blog I inserted my own photo and I love it. However, on my archives page, the default photo shows up and I cannot figure out how to change that. I also thought of just deleting the archives page all together but the widget manager won’t let me click on it and drag it back to the widget “bank”. Any suggestions on how I can get either the picture changed or the archives link back where it belongs!?
    Kathy

  22. whatevermusic says:

    Thank you!!
    This helped me a lot!!

  23. Sue Waters says:

    @Kathy Sorry to take so long to respond. It was an issue with your blog template which has now been resolved that cause the image to default to original on other pages. You should always be able to drag widgets down.

    @whatevermusic we are glad our instructions have helped :)

  24. If you want to add a personal touch to your computer, then do what other computer vendors do. You can add your company logo or a photo of yourself to your computer.

    To see your current ‘Systems Properties’ window, right-click on ‘My Computer’ and select ‘Properties’ from the pop-up window. You can customize your ‘Systems Properties’ pop-up window.

    This explains how to add a photo or your company logo to your ‘Systems Properties’ pop-up window.

    To start with, open any photo-editing program and create an image 180 X 114 pixels. If you what to use a photo or own company logo, you will need to resize it to 180 X 114 pixels. Save the image as a bitmap and name it oemlogo.bmp and save it in your c:windowssystem32 folder

    Next, create a notepad file, save to in the same folder and save it as oeminfo.ini Type the following in your notepad and you can customize it to suit your needs.

    [General]

    Manufacturer=type what you what here

    Model=type what you what here

    [Support Information]

    line1=type what you what here

    line2=type what you what here

    If you need more space, just create a new line.

    You could add a line that says ‘Call me at (555) 555-5555, if this computer is brought in for repairs and the owner does not match photo…’ to your PC. You could add a line that says ‘Return to owner in found…’ to your laptop. This trick is nice to know if you sell computers or just want to add a personal touch to the computer you own.

  25. Kay says:

    I upload my personal picture for my avitar. Then I get the crop option and here is where my problem is. My picture is at the lower left of the browser window and the crop tool is at the upper left. I can not drag the crop tool down anywhere near the image to crop it. In addition, I can not click the “crop” button

  26. vishalduvedi says:

    fore more details

  27. I can only say, one of the best tutorial I’ve ever found to upload images on the blog post. Thanks

  28. barcz says:

    New to all of this…

    Tried to get the photo in the sidebar, but no luck. Then uploaded an avatar and followed instructions to put it in the sidebar. All I have is a shadow outline, not my image. Have tried the normal and alternative upload and neither makes any difference. What have I done wrong?!

    ps Love what (it looks like) I can do with this and already planning what will go where!!

  29. Hi Sue,

    I am using the Ocean Mist theme and whenever I add a photo to my sidebar or my pages they appear with a red frame/boarder around them. I really don’t like the look of this and have tried to figure out how to remove this but I can not seem to make it work. I was wondering if there is a way I change this so it no longer happens? Any help would be greatly appreciated.

    Cheers,
    Krista Webb-Scheers
    The Classroom Connection

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Follow this blog

Get every new post delivered right to your inbox.