Making Demo page with toolbar on Blogger

This demo page is suitable for friends who often share the template. for my friend that you do not understand, maybe if my friend visited blogger template providers often get a demo page using the toolbar like in BTemplates, ZoomTemplates, ThemeForest, etc..

#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/AVvXsEgJbsoAwRD2bHhLXcWZPTeLDCmeN3HbvwUBcz3l9yQ6xj6oCypttFq3sA-WMMCZqBkkhwNKQNvjuxltcDeh4GDNy-P0hlFjpVydkT7Fw2Srdtf3GyX75mpmO82XCCUbOvTYk5Um8VRkigk/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/AVvXsEjPwMLXQXTgOVFUv27rq10WjVS8xyCSidBN7mgGUJuxSpGouehP1cRztKgDvI-Vn5nvx_7SX7usFTK4ZT2gVjKwc7Gi_2EJHR45vQADerqw7fWxYwP1sd7AwD7ma6AJdjKhRko_vqZD1Qw/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/AVvXsEjPwMLXQXTgOVFUv27rq10WjVS8xyCSidBN7mgGUJuxSpGouehP1cRztKgDvI-Vn5nvx_7SX7usFTK4ZT2gVjKwc7Gi_2EJHR45vQADerqw7fWxYwP1sd7AwD7ma6AJdjKhRko_vqZD1Qw/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAT2O0rLtyGqsa-xfhy5ADWOViaAj_IuClua28Qn8eKahPJKOKQXmI06hDr7KlTT9bBCZfXU22_wCmioY_pctiaNsFfw7AoECp3A5pRsDW82zJZhzNIZzZH3h9b1qjlC5Q8jlSkbuIzI/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAT2O0rLtyGqsa-xfhy5ADWOViaAj_IuClua28Qn8eKahPJKOKQXmI06hDr7KlTT9bBCZfXU22_wCmioY_pctiaNsFfw7AoECp3A5pRsDW82zJZhzNIZzZH3h9b1qjlC5Q8jlSkbuIzI/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/AVvXsEhtQmpvpIK-bB93GsUIs6npPdrUj71MBNbZFyN-94scLKQFZ8XW97rDL-oVBmm3pr_pLZoj1JOlbNgUXw6Q2b5AeHL3AlYq8KZaTcu9BGXeWWXt9mQiUmT4zmOW9xAwaeUtlmUsbotDeYM/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;
}

Save this code just below <body>

<b:if cond='data:blog.url != "http://www.rhizovuns.com/p/template-demo.html"'>

Save this code just above the </ body>

</b:if>
<b:if cond='data:blog.url == "http://blog.kangismet.net/p/template-demo.html"'>
<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://blog.kangismet.net'>KI Template Demo</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>