ME Bloggers: Posting Images In The Sidebar Of A WordPress.com Site

Ken asked me a great question about using the new ME Blogger Logos in the sidebar of a WordPress.com site.   Although it is easy to post a graphic in a regular post by using the upload featureof a WordPress post, posting a graphic in the sidebar is a little bit trickier.

This post will feature a step-by-step graphic tutorial of how do accomplish this using any standard (free) WordPress.com site.  In addition, I will include specific information for posting the ME Graphic in your sidebar while having it reference back to the 100-ME-Blogger Informational page located on this site.   I will also start a thread in the forums (ME HELP) to work with anyone who is having any problems following the tutorial.

Note: This is a LARGE post and you should print this if you are going to work through the following tutorial.

Part 1, Uploading the graphic file to your WordPress.com server

Step 1: PREPARE

Make sure you have downloaded the logo(s) you would like to use in your sidebar to your (local) computer (put them on your desktop or in your pictures folder so you remember where they are).  In the case of the ME bloggers, you can find these pictures here:
http://www.esnips.com/web/mebloggers

Step 2: Log into your WordPress.com account and click on the Write Tab

Step 2

Step 3: Create a “Dummy” picture holder post

Once your in the WRITE location, choose “Write Post” and create a new POST called: Upload Picts (Do Not Post). Make sure you put the (Do Not Post) after the Picts so that later on you will remember not to post this.   You will be able to use this one “Dummy” post in the future to continue to upload pictures that will not be used in an actual post but may be useful in other instances such as using in your sidebar.

Step 3

Step 4: Upload Your Graphic (ME Graphic)

Scroll down below the words (body) of your post and you will see the UPLOAD area of the “post”.  Click on the word “upload” then click on the “Browse” box.  At this point you will be prompted for the local location of the graphic file you want to upload.  Also, notice that WordPress gives you a free 50mb of space for this type of thing.  If you ever need more you can buy it (they also increase it for free from time to time). 

Step 4

Step 5: Locate your graphic file

Once you press Browse a new dialog box will open asking you where to find the file.  Point the dialog box to the directory where you saved the graphic file and select it, then press the open button.  Don’t forget that, for the sidebar, you will only want to upload one of the smaller images, 100px or 150px.  If the picture is too large it will cause formatting issues with your blog.   If this happens, it can easily be fixed see the insert widget section in Part II.

Step 5

Step 6: Finish the uploading process

Once you press the OPEN button, you will be directed back to the point at which you departed to find your graphic file.  At this point you will see the local URL (Address) of your graphic file.  Fill in the rest of the information below the local address, Title & Description.  After you have filled in the information press the UPLOAD button.

Step 6

Step 7: Save your post and move on to Part II

At this point you are ready to save your post.  Press the SAVE button at the bottom of your body of text of the post entering point.   You do not want to PUBLISH this post.  Choose SAVE.  This post will now always appear as a DRAFT post that you can use later to upload more pictures.  When you have finished this, you have successfully transferred your picture to the WordPress server…  Now, where is it, how do you access it, and how do I make it appear in my sidebar?  These questions will be answered in Part II.

Part II, Posting your graphic file in the sidebar

Step 1: Find the location of your graphic file on the WordPress server

From the word toolbar in your dashboard click on the MANAGE word (tab).  Then click on the UPLOADS word (tab) directly underneath it.

Step 1a

Step 2: Click the Browse All tab and then click on the picture of the graphic file (ME Blogger) you would like to work with. 

This is necessary so that we can find out the URL of where the file is located on the WordPress server.

Step 2a

Step 3: Find out the URL of the graphic file on the WordPress Server

When you click on the graphic file that you would like to work with a new screen is loaded that will tell you the exact location of the graphic that you uploaded in Part I.  Write or copy this URL down as it is critical in making the graphic show up in the sidebar.  The URL is noted in the box titled URL. In the case of my musictech beta site, it is located here (Yours will be a different, but similar, URL):
http://musictech.wordpress.com/files/2008/01/meblog150px.png

Step 3a

Step 4: Get to your widgets screen

In order to find your sidebar and widgets control screen you have to first go to the PRESENTATION tab and then choose the WIDGETS underneath it.  When you click on both of these tabs in order, you will see the Sidebar Arrangement screen.

Step 4a

Steb 5: Choose a text widget and place it in your sidebar

For some of you widgets maybe new.  This is an area of WordPress where you can “dress up your blog” with things like RSS feeds, Category Clouds, Stats, AND your own graphics.  At the bottom of this screen you will see a box called AVAILABLE WIDGETS.  Choose a “text” widget and drag into into a place in your SIDEBAR.  You can change the order of your widgets by click-hold-drag-and-releasing them in any order you would like.

Once you drag a TEXT widget into the SIDEBAR, click on the little blue/gray box to the right of the words Text ?.  This will open the place where we put the HTML in to make all this razzle/dazzle happen!  If for some reason you don’t have any more available text boxes you can add more by scrolling down and changing the number of text boxes available on this page.

Step 5a

Step 6: Add the code for your graphic to appear on your sidebar

Once you click on that little box to the right of your TEXT WIDGET, you will get a new dialog box to pop-up.  This is the box where we need to enter the code.  The top part of the new box is where you put your title.  In this case, enter: “Music Education Blogger!” or whatever title that you wish.

In the bottom portion of the dialog box is another area will you input the code.  Input the following code into this area.  MAKE SURE TO CHANGE THE BOLD PART TO THE LOCATION OF YOUR GRAPHIC FILE.  THIS IS THE URL THAT YOU FOUND IN PART II STEP 3.  CHANGE THIS PORTION OF THE FOLLOWING CODE TO YOUR URL.

START CODE

<div>
<center>
<a href=”http://www.mustech.net/100-me-bloggers/”>
<img src=”http://musictech.files.wordpress.com/2008/01/meblog150px.png” alt=”Join Our Campaign!”>
</img>
</a>
</center>
</div>

END CODE

If you don’t want the graphic center, remove the <center>and</center> tags.  After you have finished entering the code, click the “X” located at the upper right of the text widget box.

Step 6a

Step 7: Save Your Changes

Click the SAVE CHANGES Box located in the upper right of the Widgets Screen

Step 8: View Your Site

Click on the (View Site) area of the Admin Screen to see your new Graphic!  You are done!

Step 8a

Your Graphic should now appear on your side bar.  If you did this correctly, when you “hover” over it, it will say “Join Our Campaign!” and when you click it, it will take you to:
http://www.mustech.net/100-me-bloggers/

Step 9a

Congratulations on a job well done!  Hopefully, you learned a lot about the inner-workings of WordPress as well through this tutorial. 

If you ever want to add another graphic you can do this process again.  The next time you can skip a number of the steps because you already have your “dummy upload pict” draft completed.  To find it simply go to “WRITE” and you will see it listed under “Your Drafts”.  Click it an go right to the uploading of the graphic file.

Step Done

Please let me know if this helped you.  If you are having any problems with this, I have started a forum thread for the ME Bloggers.  In this forum, we can work out any issue that you may have. 

Best regards and happy ME-ing.

              Dr. Joseph M. Pisano

Joseph M. Pisano, Ph.D. is the creator of many education websites, a lecturer, clinician, trumpeter, and conductor. He is currently the Associate Chair of Music and Director of Bands in the Calderwood School of Arts at Grove City College in PA. He been named a TI:ME Teacher of the Year, received the JEN Jazz Educator Award and the PA Citation of Excellence. He is a past Vice President of the Technology Institute for Music Educators and the current Vice-President of the PA Intercollegiate Bandmasters Association. He also writes for DCI Magazine, Teaching Music Magazine, and is the Educational Editor for In-Tune Monthly Magazine; he has contributed hundreds of articles to various publications. Find out more at his website jpisano.com.
Print Friendly
  • Hey Joe!

    Thanks for the Logos! They look great, and a great way to start more buzz about the 100 ME Blogger Campaign!

    For all those unitiated, allow me this aside…

    If it IS so simple that a caveman and Travis Weller can do it, the rest of you will have no problem at all. Thanks for the tutorial!

  • Joe,

    This was very simple. Thanks to the super directions you gave. The ME Blogger logo is now on the sidebar of the Music Tech for ME site.

    Blessings,

    Keith

  • Thanks, Joe. I’ve been trying to figure this out for weeks!

  • One other thing, Joe. The quote marks in your text (which i cut and pasted) are wrong. I retyped them in my text box and then it worked.

    But, thanks so much.

  • Shaun,

    Thanks for posting! I’ve been trying to install a WordPress “HTML MARKUP” plugin to allow HTML to be presented correctly within the “blog context” and I’ve not found one that works properly yet, so when I put up the HTML and you copy and paste it, you may get interesting things happen to your paste… It is extremely common for double quotes to appear as a “fancy quote” when you cut and paste from blogs like this.

    If and when I find a good HTML MARKUP Plugin that works as I want it to I will fix the problem on this post. Thanks for pointing that out as others may, do doubt, have similar problems.

    Best regards,

    J. Pisano

  • Pingback: The Official List Of The ME Bloggers (Music Education) - Still Growing! | Mustech.net!()

  • Pingback: The Official List Of The ME Bloggers (Music Education)- February 2008 | MusTech.net!()

  • Cealldymnmync

    I am here at a forum newcomer. Until I read and deal with the forum.
    Let’s learn!

  • Moniboniz

    Hi people… :)

  • Hello!
    How are ya’ll?
    Im new at mustech.net and wanted to say HI
    I hope I can become a active member!
    Oh yeah… cuz the economy is so corrupt right now.. I cant afford music.. haha
    Anyone know where I can get free itunes gift cards online?
    Sorry if this is in wrong section admin.. wasnt sure of the right place.

    Thank You!!

  • Hi John,

    Check out my latest article about TurnItUpMedia.

  • Pingback: The Official List Of The ME Bloggers (Music Education)- February 2008 | MusTech.Net: A Symphony of Music & Technology()