I am a: Quirky sysadmin. Geek. Gamer. Comic fangirl. My little space, my home on the interwebs. I blog about personal stuffs, work, various coding projects, and anything else I feel like.

Working on my most recent side project, I’ve had to brush up on my Blogger/Blogspot coding. One of the things requested of me was to find a way to have a static front page on a Blogger site.

WordPress has this feature built-in, but Blogger currently does not. :wallbash_tb:

I know of two ways that this can be accomplished:

Solution #1

Create a new post with the content you want to show on the index of your Blogger site and save as normal. When you add more content to your site, re-open your “front page” post. Click Post Options. Change the Post date and time to values which chronologically fall after those of your last “regular” post.

Now go to Settings, Formatting. Set it to show only 1 post on the main page.

The idea is to always keep the “front page” post as the newest, so it is the top post (and therefore the only one shown on the main page). You’ll have to do this every time you add new posts to your Blogger site.

Or …

Solution #2

I like to call this one the “Sticky Content method.”

A while back someone had shown me that enabling the showaddelement attribute in a Blogger XML template allowed you to add widgets above your posts. Basically, changing a small bit of code in your template …

… gave you this ability:

I’ve seen plenty of people do this to display Google Ads or other PPC stuff above their posts.

To do this, you’ll need to first download a fresh copy of your template — go to Layout, Edit HTML, Download Full Template.

Open it in your text editor of choice (use Notepad if you’re not sure) and search for type='Blog' or “posts”. Either of those should show you the section code containing the Blogger function for calling blog posts. You’ll see a line that says something along the lines of:

<b:section class='main' id='main' showaddelement='no'>

When you change showaddelement from ‘no’ to ‘yes’, you are then able to add widgets above your blog posts. Save the changes to your XML and upload it to Blogger (go to Layout, Edit HTML) using their upload form. Once that’s done, go add a widget by going to Page Elements (in Layout).

Click Add a Gadget, and add the HTML/JavaScript widget and type in the content you want to show on your front page and save.

Keep in mind: that this would show up on EVERY page on your site unless you adjust a couple things!

Download an updated copy of your template and open it in your text editor of choice. Now that you’ve added a widget, you should see something like this:

Hint: Look for the title of your widget if you get lost!

Change the following:

<div class='widget-content'>
<data:content/>
</div>


to this:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>


Basically, you are telling Blogger to only display that widget if the page you’re on is the home page (main page).

Now, let’s fix the blog settings so that nothing shows up on the main page except this widget. Go to Settings, Formatting, and set it to show no posts on the main page.

Pretty cool, huh? :)

Closing Thoughts

Whichever method you choose, make sure that you have some way for your visitors to access your site’s content. I suggest adding Blog Archive and Labels widgets. You could also use the Feed widget and put in your RSS feed to show your blog’s latest posts.

I hope the solutions I’ve posted are clear, but if you need anything explained further please feel free to ask in the comments below!