ActiveRain - Sidebar Content

In your ActiveRain blog, there are quite a few customizable elements that you have control over. It is like moving into a house though, there are so many things on your "to-do" list that you start with "first-things-first" and then eventually you get to the other things. So in AR, you probably start right away with your profile page. Perhaps you pick a background color or image for your blog. Eventually, you create a nice looking header graphic. Finally you start noticing "everyone else" has little widgets and gadgets and gizmos over there on the right hand side in what is called the sidebar. You say, hey! I want that too! This post is for you when you are ready for that step.

The sidebar starts at the top with your portrait and basic contact information. Underneath that is the all-important subscribe button. The next area of the sidebar (from the subscribe button down to the links area) is all yours to do as you please!

When you go to your "My Home" dashboard screen. On the left you will see the "Settings" menu. Go there and notice that there are four main boxes that you can fill in (Blog Title, Blog Description, Blog Description/Text Version, Signature). What you put into the "Blog Description" box is what shows up in your sidebar. You can simply type in some descriptive text (in plain text mode) about you and that is good thing to do for starters. However, in order to do badges, widgets, and gizmos you are going to have to paste in little snippets of HTML code.

Before I go into the HTML stuff, let me stop and mention the Blog Description (text version) box. What you want to write in there is what you want Google to know about your blog. This information is set in a backend meta tag "description" and so is not visible. However, take a little time and write a few lines of google-centric targeting about what your blog is about and keep in mind keywords for how you would like to be found.

OK - now lets move on to the visible part. The side bar gives you an effective area of 218 pixels. If you exceed that, it will overflow the edge and look not so nice. So when you go out and get code for widgets, try and pick the version that is that size or smaller (widgets usually give you options for size variations). In this post I'm not going to list all the widgets out there but some examples are Facebook, Twitter, Realbird, YouTube, etc, etc) As you browse others' blogs, you will get the idea of ones that are nice and you also want to get. The basic concept is... a widget is a preset block of HTML code that you copy/paste into your blog. You don't have to understand the code, just copy it and use it. If you have multiple widgets, you will have to understand just elementary HTML to see where one widget ends and the other starts. That way when you want to cleanup your sidebar (e.g. change the order of widgets or remove one) you will know where to start and end your editing at. You might at this point get the sense for this is not for the faint-hearted so if that is you, simply stick with this box as plain text - just write out the words that you want to describe you and your blog.

Finally, in this post, I want to share how to add to the sidebar a badge or graphic of some sort that is also a hyperlink to something. Let's take for example my twitter bird graphic that launches you to my twitter page.

You need to generate HTML code on your own that you can paste into the sidebar. This is one simple way to do that. Start a new TEST post in draft mode. In that post, upload and insert your graphic and attach a hyperlink just as you are familiar doing when you write blog articles. Save the post (in draft mode of course, otherwise people are going to say what is that??) Note: you need to save the post to switch between normal and HTML views without losing your edits. Also you want make sure that the graphic you uploaded becomes permanently saved on the AR servers.

Now go back and edit the post and click over into the HTML view. Highlight the HTML code that begins with the tag and everything between that and the ending tag -- you will see the tag reference in the middle of all that. Copy that code to your clipboard and then head over to your settings page and paste it in. Voila!

HTML code is not difficult when you understand a few basic principles. I'm going to save HTML instruction for other posts, but if you already know the basics you should be fine. I would recommend that when you are modifying your sidebar with new stuff, you may want to select all and save the text somewhere in case you get all tangled up and need to "restore previous" :)

My final recommendation for the sidebar is do not go overboard picking every widget known to mankind there. This is only distracting. Find a few select ones that are truly useful and ones that a consumer who finds your blog might appreciate!