Smashing Notes

Loading the main content first is very important in a blog and in SEO of course. Search engine crawlers (a program or automated script that browses the World Wide Web in a methodical manner in order to provide up to date data to the particular search engine) tend to prioritize the area of the blog that loads first. That's the reason why bloggers find ways to implement this on their blogs.

If you run a blog hosted by blogger, you will want new visitors to see your blog content first before anything else to get them hooked. But sometimes blogger blogs loads the sidebar first before the main content. It's an annoying problem for new blogger that wants to get loyal readers online.

You can fix this problem by just moving some codes in your blog template HTML. If you are not knowledgeable with HTML coding then don't worry because you can just locate the codes via search bar in your browser, that's Ctrl+F. It may take a few tries but you'll get it eventually and load the main content first before anything else in your blog.

Making Blogger Posts Load First Before the Sidebar

First, you need to Login in you account and go to Design then click on Edit HTML. After that locate the code that relates to your blog sidebar in the HTML. By default blogger assign "sidebar-wrapper" for the sidebar content and the area it self. In HTML coding, they call this areas in the blog as sections. Now, use your browser search bar (Ctrl+F) to find that line of code in the template HTML.

After finding the sidebar section in the template HTML, you can now cut the whole section or sidebar-related codes and paste it below the HTML codes related to the main content. That's "main-wrapper" by default in blogger. And make sure to paste the sidebar section below or after the main content section to load the main content first before the sidebar.

Finally, you can save your template HTML after doing the changes by clicking Save Template.


Always remember that the whole section in HTML coding starts with the section wrapper and ends with the matching end tag. The section tag is located on the middle of the section wrapper tag. And don't forget to save a backup of your blog template. You can download it in the backup/restore template section in the Edit HTML page.

Knowledge in HTML coding is very useful when customizing and configuring some areas of your blog. But if you don't have any background about HTML coding, I suggest you try changing and configuring your blog template HTML and you'll get use to it.

Originally published at Knoji.