简体   繁体   中英

Splash page or Pop-up window on tumblr

I come here asking for help after spending my whole day trying to come up with a solution to this problem. I'm trying to make the first page a visitor of my blog sees to be a single full screen picture which, when clicked, will link you to the blog itself. I came up with some css code which works, but it changes the whole theme and therefor the whole blog (tumblr is weird). Here's the code:

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div.tioad {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    }
            </style>
        </head>
        <body>
            <div class="tioad">
                <a href="index.php"><img src="image.jpg" width="100%" height="100%">
                </a>
            </div>
        </body>
    </html>

Since the home page on tumblr MUST be the blog, there is no way to create another page with the customized theme and then link back to the blog. I hope you understand what I mean.

Now I've been searching for some more solutions and found out that I could make a javascript pop-up box (probably the alarm one), but I need some help to make it the same as the code above would make it (or at least as similar as possible). And this is where you come in to the equation. Any help would be greatly appreciated, my brains are fried already

One possible solution:

You could use a combination of theme blocks and post tags. Below are references:

  1. {block:IndexPage} {/block:IndexPage} - http://www.tumblr.com/docs/en/custom_themes#basic_variables
  2. {block:PermalinkPage} {/block:PermalinkPage} - http://www.tumblr.com/docs/en/custom_themes#basic_variables
  3. {block:TagPage} {/block:TagPage} - http://www.tumblr.com/docs/en/custom_themes#tag-pages
  4. Post Tags - http://www.tumblr.com/docs/en/using_tags

You would have to tag each post with a specific word. For the example lets use blog(#blog) .

Example HTML:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        {block:Posts}
        {block:IndexPage}
        <a href="http://username.tumblr.com/tagged/blog">
            <img src="someimage.jpg" alt="somealtag" />
        </a>
        {/block:IndexPage}
        {block:TagPage}
        <!-- Add #blog Index Page Here -->
        {/block:TagPage}
        {block:PermalinkPage}
        <!-- Add #blog Permalink Page Here -->
        {/block:PermalinkPage}
    </body>
</html>

Bonus:

Finally you could utilise the Pages feature ( http://www.tumblr.com/docs/en/pages ) and set up a redirecting page ( http://www.tumblr.com/docs/en/pages#redirect ):

http://username.tumblr.com/blog

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM