Notification texts go here Contact Us About Us!

Simple Steps to Creating a Responsive Demo Page in Blogger

As a Blogger oftentimes you might want to give a demonstrative display of your blog contents to your readers....
Good day lovers of TechBrainaic, in today Tutorial I will share with you How to Create a Demo Page in Google Hosted Blogspot Website. 

How to Create a Demo Page in Blogger

As a Blogger oftentimes you might want to give a demonstrative display of your blog contents to your readers, especially if you're into tutorials or template blogging and prefer to offer a preview of how your codes, scripts or templates with display after proper implementation.

How To Setup Bookmark Post Widget in Blogger 

How to Remove All Widgets in Blogger Template 2022

Having a demo page on your blog is quit simple and easy with the ultimate guide provided in this post, just follow every steps and enjoy. 

Simple Steps to Creating a Demo Page in Blogger

Step 1 :-  Login to your Blogger Dashboard 

Step 2 :-  Now Click on Pages and then Create a Static Pages with title Demo Page, you can write anything in the contents section or otherwise leave blank. Then Publish.

Before making any changes to your template make sure you take a back up of it just in case something unexpected happens.

Step 3 :-  Click on Theme Menu > Edit Html.

Simple Steps to Creating a Responsive Demo Page in Blogger

Step 4 :-  Then Copy The Given Css Code and Paste it Above The ]]></b:skin>.

CSS
#view {

padding: 0;

margin: 0;

border: 0;

position: fixed;

top: 50px;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 93%;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-rwmYgKCW5bqGvcemIf9WSWdlaE-DBilWLbORQznXbsYjhL50MOsC09pQYSGeoQxewnEgrW3h6RB2OeBTV0JqPALbm5l5IbzG3EkUQtrL2uW7yWXkyY6ew8ME-v73BZkHG2ZArgtNrw/s1600/loader.gif)no-repeat center center;

transition:all .4s ease-out;

}

#tab-demo {

width:100%;

height:50px;

top:0;

left: 0;

background:#222;

color:white;

font:normal 13px Arial, sans-serif;

z-index:99999;

position:fixed;

}

.closebutton {

background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpo29KXFAXZdeNjVCixnrVksnInztHLvf8i0jlAlvSq7kBsLPQjZ-lafCM3FlniOr2CkzXfKRX3LCit_NaU7hlLWwyTyEHllp4FAK3y4YsyShbmJ5gVpTGxZkYfmAtvGzKj9WEGPqxr8/s1600/close.png)no-repeat 15px 50%;

text-align:center;

height:50px;

padding:0px 20px 0px 50px;

position:fixed;

top:0;

right:0;

line-height:50px;

cursor:pointer;

color:white;

}

a.closebutton {color:white;text-decoration:none;}

.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpo29KXFAXZdeNjVCixnrVksnInztHLvf8i0jlAlvSq7kBsLPQjZ-lafCM3FlniOr2CkzXfKRX3LCit_NaU7hlLWwyTyEHllp4FAK3y4YsyShbmJ5gVpTGxZkYfmAtvGzKj9WEGPqxr8/s1600/close.png)no-repeat 15px 50%}

.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqF6oS97F17SO-lbAzM1Q7D_AIcQEml71SYNTZBNONMo4CYEBv8wd0MzI9I-n4GfIycycxhFlQsDcwMP9P6zFsAoLPQ-40iUf5zeuQb_o-ayCkeBHECWPzMiemf2KgJsqWXjir66uVVEs/s1600/download.png)no-repeat 15px 50%}

.dlbutton, a.dlbutton {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqF6oS97F17SO-lbAzM1Q7D_AIcQEml71SYNTZBNONMo4CYEBv8wd0MzI9I-n4GfIycycxhFlQsDcwMP9P6zFsAoLPQ-40iUf5zeuQb_o-ayCkeBHECWPzMiemf2KgJsqWXjir66uVVEs/s1600/download.png)no-repeat 15px 50%;

text-align:center;

height:50px;

padding:0px 20px 0px 55px;

position:fixed;

top:0;

right:158px;

line-height:50px;

cursor:pointer;

color:white;

text-decoration:none;

}

.demologo, a.demologo {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfDnxihtOwojwLPQW0Bcppakv8M7tepwwkIC0ltlJTPeSSVxpi8HJ0JPzouUqmwaevSHtvKMNZ-OAcoU74SWgWyxb8NuoIvNWJdo2ReY6R4nUJqwEw34YIPozXaDM9gu84ky5V20m9xQ/s1600/ki-logo.png)no-repeat left center;

padding-left:55px;

font-size:17px;

font-weight:normal;

font-family:Oswald, Arial, Sans-serif;

text-transform:uppercase;

line-height:50px;

left:15px;

position:fixed;

color:white;

text-decoration:none;

}
Step 5 :- Next copy the entire HTML/JavaScript below and paste it beneath <body> section.
<b:if cond='data:blog.url != &quot;http://techbrainaic.blogspot.com/p/demo-page.html&quot;'>
Step 6 :-  Find </body> in your blog template and paste the JavaScript below just above it
HTML
</b:if> 

<b:if cond='data:blog.url == &quot;http://techbrainaic.blogspot.com/p/demo-page.html&quot;'>

<script type='text/javascript'>

//<![CDATA[

function getQueryVariable(variable) {

    var query = window.location.search.substring(1);

    var vars = query.split("&");

    for (var i = 0; i < vars.length; i++) {

        var pair = vars[i].split("=");

        if (pair[0] == variable) {

            return pair[1];

        }

    }

    return (false);

}

window.onload = function() {

 var url  = getQueryVariable("url");

 var download  = getQueryVariable("download")

 document.getElementById('view').src = url;

 document.getElementById('dl').href = download;

};

//]]>

</script>

<div id='tab-demo'>

<a class='demologo' href='http://techbrainaic.blogspot.com'>Demo Page</a>

<a class='dlbutton' href='' id='dl'>Download</a>

<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>

</div>

<iframe id='view'/>

<style>

body {

background:white;

}

</style>

</b:if>
Step 7 :-  Now Customize all the marked URL by changing it to your blog URL address.

Step 8 :-  Lastly Save your Template and view the result.

Final words

 In this post I have made a simple step by step guide on How To Create And Add a Demo Page in Blogger. The Demo Page is designed to be responsive and User friendly Which will display a demonstration of your script or templates to your visitors. I hope you have liked the post and please do share with your friends.



If you face any problems in code or have any questions please feel free to ask in comments section, I will be happy to answer!

That's All

 Thanks for reading our blog

Have a great day ahead!😍

© TechBrainaic 
 All right reserved

About the Author

A Young Nigeria Blogger Who Love Sharing His Knowledge And Idea With Others❤️

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Avoid sharing any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.