Skip to main content
All CollectionsAdvanced
Blogger Tips: Adding a CSS Class to Your Single Post Pages
Blogger Tips: Adding a CSS Class to Your Single Post Pages

If you're currently seeing display in the middle of your homepage then we have the guide for you!

Eric Hochberger avatar
Written by Eric Hochberger
Updated over a week ago

This guide will show you how to add a "CSS Class" to <body> element of your website based on the type of page you're browsing such as homepage, archive page, or a single post page.

That CSS Class you'll be adding will help our "script wrapper" separate out your homepage from your post pages. Once you complete this tutorial, you'll need to email us at publishers@mediavine.com so we can update what we call your "content selector" on the back end.

1. Go to the "Template" page in your Blogger Admin.

2. Under the template that's listed as "Live on Blog" you'll click the Edit HTML button.

3. You'll be looking at a bunch of HTML. You're going to want to look for the  tag. 

There's generally two ways this will look. If it looks like neither, please email us for support so we can take a look. Otherwise, you're going to want to replace base on the following two cases:

Case 1: If it looks like this:

<body expr:class='"loading" + data:blog.mobileClass'>

Replace it with this:

<body expr:class='"loading" + data:blog.mobileClass + " " + data:blog.pageType'>

OR

Case 2: If it looks like this:

<body>

Replace it with this:

<body expr:class='data:blog.pageType'>

4. Click "Save template" and then email us. You're done!

Did this answer your question?