displaying a div only on tumblr blog homepage?

Question

I have a fairly novice understanding of CSS and HTML, and I\'m trying to do something that I think should be relatively simple (in a custom tumblr theme I\'m creating), but

Answer 1

{block:IndexPage}

<script>
   if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>

<div id="banners">
   blablabla
</div> --> 

{/block:IndexPage}

Answer 2

Alternatively, you can use this tag: {block:HomePage}.

This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).

References: https://www.tumblr.com/docs/fr/custom_themes

Answer 3

The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.

{block:Post1}
<div class="mid2">
    <div class="midLeft2">  
        <p>test</p>
    </div>   
</div>
{/block:Post1}  

Or:

<script>
if( {CurrentPage} == 1 ) {
    //display div
};
</script>