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:
Step 2: Log into your WordPress.com account and click on the Write Tab
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 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 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 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 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 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 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):
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.
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 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.
<img src=”http://musictech.files.wordpress.com/2008/01/meblog150px.png” alt=”Join Our Campaign!”>
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 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!
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:
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.
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.
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.