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..
Login to Template -> Edit HTML. Save this CSS code above ]]> </ b: skin> or </ style>
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/AVvXsEh2a-o6Q55H3I15yGQ37UkAmUgihqVP2q_j72wqChvoRd2ZnwCZQTFavwDIjt_HuekqG33ziSOAmeOFsbc9z-ZFlEwe0oUN6pMH-klihZ0FPwf6V4SkjL1RvJCN7kY4eSMuw0DZd-6BG3Y/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/AVvXsEgE3BBWVTWeali2FWu8UnxsK3__pTuk899UzcO2UXVMRYfhLxmlU9oYD42iifurvb-vhF3y7ardwzG1aQPljIuInSBR-Y3xGhMiyqlRnsVBKA9yLR7q7j7fYJpjDcKVoG4QGKXRCG990OE/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/AVvXsEgE3BBWVTWeali2FWu8UnxsK3__pTuk899UzcO2UXVMRYfhLxmlU9oYD42iifurvb-vhF3y7ardwzG1aQPljIuInSBR-Y3xGhMiyqlRnsVBKA9yLR7q7j7fYJpjDcKVoG4QGKXRCG990OE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSNnOjS0WPQBeugr0wdoo57Jxpde7EN_FY0fTJKr4YxSRi6TbbtwZ7C0kPihFj8R5bmtWc6lMtqu0PiUElJDXwxlKg_qSTEk_wBDfG7qs-iZdpindEjQv_1D85WIiELOJ1YtwYhyBrzQ/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSNnOjS0WPQBeugr0wdoo57Jxpde7EN_FY0fTJKr4YxSRi6TbbtwZ7C0kPihFj8R5bmtWc6lMtqu0PiUElJDXwxlKg_qSTEk_wBDfG7qs-iZdpindEjQv_1D85WIiELOJ1YtwYhyBrzQ/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/AVvXsEjGK7Q7fwsiZIR4J3C609hOd9K6DVcVpyMg_igCPhwzxzvbnrWmuoR_AURm5z9Nr-QGiCLqn7V2xpJ9s-QY7W_kT0QpNA2DbYIBqaW3GvwdAffchh-fZvds5JqHv45xy5brdrAAOHH-zvU/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>
Writing format
Untuk pemanggilan URL template dan link download, gunakan format seperti ini :
http://blogsobat.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini
Untuk lebih jelasnya silahkan perhatikan kembali demonya.
http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html
Owner Rhizovuns , for more info update , Subscribe or follow me .