Pages

▼

May 24, 2020

Blog Sidebars


I'll confess: I love blog sidebars! That is probably my favorite design feature of blogs. Every blog of mine has a sidebar, and sometimes, I use two, like at my 100-Word Stories blog and at my class blog (I take my class as a student each semester, so I blog together with the students, doing same assignments they do). Some of the content in my sidebars is static, but most of it is dynamic in some way so that there's something new or different, something "going on" that can catch people's attention and surprise them in the sidebars every time they reload the page.

In this page, I'll provide a quick overview of how sidebars work in Blogger, and then in the following posts I'll zoom in on specific types of sidebar content and how to add them to your blog.

Sidebars and Blogger Themes

 As I mentioned in the discussion of Blogger themes and layout, there are basically two generations of Blogger themes. In one set of themes, the sidebar(s) are always visible, and those are the themes I prefer: Simple, Picture Window, Awesome, Watermark, Ethereal, Travel. You can customize those themes to display one, two, or even three sidebars; use the "adjust widths" panel to set the widths of the columns:


Most of my students stick with just one sidebar, although they will sometimes play with moving it to the right or the left of the post column.

In the Blogger themes that use dynamic resizing (Contempo, Soho, Emporio, Notable, Essential), the sidebar column does not appear unless the display is very side; most of the time, you access the sidebar using the hamburger menu at the top of the page. When you click on the menu, the sidebar panel slides out:


Even though the sidebar is not always visible with those blog themes, you can still choose to add content to that sidebar, just like with the sidebars that are always visible; in that screenshot, you can see the student added a picture of her dogs to the sidebar.

Mobile View

 I should also mention that all Blogger blogs have an automated mobile-view, and sidebars are suppressed in that mobile view. To see how your blog will look on a phone, just add ?m=1 to any blog or blog post URL. For example:
http://bestlatin.blogspot.com/?m=1

Here's a screenshot:


So, it's important to remember that your students might be viewing your blog on a phone, not seeing the sidebar. If there is essential content that they need, you need to link to that from inside a post rather than expecting them to find it in the sidebar. There's also an option to force the blog open in regular web view even on the phone; you'll find that down at the bottom of the display:


It's definitely a plus for me that Blogger has a good default mobile-view. Since students sometimes send me URLs that include the m=1 part of the address, I know they've been viewing the content on their phone.

Sidebars and Blogger Layout

 You control the sidebar content and positioning through the Layout option in the Dashboard menu:


You can also put sidebar content horizontally above or below the post column; you can just drag-and-drop gadgets into the Cross-Column space above the posts or into the Footer below the posts. Some students choose to put their blog label navigation box in the cross-column space along the top of the blog, so that it functions like a traditional website menu.

If you decide to use Blogger Pages, the Pages menu defaults to that cross-column space, but you can also drag-and-drop the Pages menu down into the sidebar column. I'll have more to say about Blogger Pages later.

Next up, the most important use of the sidebar: blog labels for navigation!