Create Demo Page In Blogger With Download And Remove Frame Buttons



Trying to make a Demo Page in Blogger with buttons like Download and Remove Frame? Then this tut's for you. You can now create a Demo Page in Blogger, for previewing themes, scripts, etc. And also as it has a Download Button, you can also link a file to download within. So lets get started.


>The first step is easy. You just have to create a new blank page named Demo.

Yellow - Demo is recommended but you can set your own.

>The second step is Go To Template > Edit HTML. Then Find  " ]]></b:skin> ", and paste the code below above it.




/* Demo Page by NQnia */

#view {

padding: 0;

margin: 0;

border: 0;

position: fixed;

top: 50px;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 93%;

background:url(http://3.bp.blogspot.com/-5W2KoRr-lKc/VoQaebt-TQI/AAAAAAAABDo/VRBJqqDwdhI/s1600/hourglass.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:#BCFF8B url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/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:crosshair;

color:white;

}

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

.closebutton:hover {background:#FF0000 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}

.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}

.dlbutton, a.dlbutton {

background:#66af33 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/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:crosshair;

color:white;

text-decoration:none;

}

.demologo, a.demologo {

background: url(https://1.bp.blogspot.com/-GbVuuKjHGKs/XxPScGsRP9I/AAAAAAAAGt8/eGa5FRo28UAh74KK7HT8BspASqsdMNbGQCLcBGAsYHQ/s1600/NQNia%2B%25282%2529.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;

cursor:crosshair;

text-decoration:none;

}

/* Demo Page by NQNia */

Red - Change the mouse pointer.[Default is pointer(e.g cursor:pointer;)]
Blue - Enter the URL of your website's logo.

>Now, for the third step, you have to find "<body>", and after it, paste the code below.


<b:if cond='data:blog.url != &quot;http://thanhtuan.host/p/demo.html&quot;'>


Green - Enter your demo page's url that you made in the first step.

After this, find " </body> ", and paste the code below above it.


</b:if>

<b:if cond='data:blog.url == &quot;http://thanhtuan.host/p/demo.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://thanhtuan.host'>NQnia Demo</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>

Red - Replace with your own choice.
Orange - Enter your blog URL.
Aqua - Replace with your Demo Page URL

Now, you are done! Save your template. After that you can any time view your demo page by the URL below:

http://thanhtuan.host/p/demo.html?url=http://fl.com;download=http://dl.com
Red - Replace with your Demo page URL
Yellow - URL of the website or script to preview
Green - URL of the Download link.

Now you are all done. Any problem or query, then comment below!


NOTE!  Never forget to write "http://" OR "https://" in your links, or youll get a 404 error.


Live Demo ⇨ Demo


Mới hơn Cũ hơn

Mới nhất