Note: This tip requires the use of Custom CSS, a feature available to subscribers with the Unlimited, Premium, and Business Class plans.
One of the best ways to draw attention to an ad or other content is to make sure it's displayed at the top of the page. In this tip, we'll show you how to move any HTML or other content above the blog's banner using CSS and the Blog Footer feature.
First, we'll determine how much space we'll need for our banner. For a 768 x 90 pixel banner, 110 pixels in height should be sufficient.
In Blogs > Design > Custom CSS, add this code:
#container { margin-top: 110px !important; }This will provide the space needed above the banner and the blog's container. After saving, you should see an empty space at the top of your blog.
If you'd like the content to display in the same space as the banner itself, use:
#banner { padding-top: 110px !important; }Next, we'll add our banner code to the Blog Footer at Design > Content. Select the Advanced option and paste in your code.
Next, we'll add the code that moves the banner to the top of the page. It should look like this:
<div style="position: absolute; top: 10px; float: none; width: 100%;">
<div style="width: 700px; margin: 0px auto;" align="center">
[insert your code here]
</div>
</div>
Adjust the width from 700px to the actual container width of your blog. Click OK and then Save Changes.