Create and Style Differently Your Demo Page

Many bloggers have abilities to write good tutorials for their readers. Those article are also perfectly sticking the readers when they successfully describing the subject with few examples, attaching a downloaded file, and bringing to lively part through a demo page.

Let's talk about demo page which is a single HTML page that shows the end result from your tutorial. This demo page should be clean and simple as possible but still has its own characteristics to maintain readers experience within your blog.

This topic may not suitable for people who use self-hosted platform. I believe they are able to host anything they wanted. I was looking any best method to style my demo page for this Blogger blog. Worth to mention, the best trick is using Blogger static page. So that we can easily reset the default stylings by adding NEW STYLESHEET within conditional tag in our template.

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/CSS;'>

... YOUR NEW CSS ...

</style>
</b:if>

Beside we can preserve our main theme, the static page will not be indexed which is good news (web users will not find this page unless from the link provided in our tutorial). Unfortunately, it's limited to 10 pages only.

Next option is finding free hosting service for all my demo pages. I hesitated with this way because the page's address will be totally irrelevant.

Lastly, I decided to overwrite all default stylings through Blogger post editor. Basically, we can do a lot with this method which is only targeting for single post, as long as we know how most browsers render a web page.


From the examples, you may noticed I'm still able to maintain my theme and employ same files that being used in my blog to avoid additional HTTP request. Most of the main default elements are hidden. How to do?

From your post editor (Edit HTML mode), just include your NEW CSS PROPERTIES like below (this only a brief example);

<div style='display:none;'>
<style type='text/CSS;'>

#menu, #sidebar {
    display: none;
    }

#main-wrapper {
    width: 100%;
    }

... AND SO ON ...

</style>
</div>

However, there are several downsides with this method. Because the demo page is actually a post that stay in the archive, It will be indexed by the time we published it. So chances it will appear in query result is there especially when a reader uses the search bar in our blog. What's the big deal?. Our layouts will be messed up just like 2 CSS sheets has been merged. My advices are;

• Don't put any label.
• Set the published date 2-3 years back.
• Avoid typing any expected keywords.

That's all. Please tell me if you know other approach for doing this. Hopefully together we can improve our Blogger blogs.