Secara detail, sebetulnya sudah saya jelaskan caranya pada tutorial Membuat Halaman Demo dengan Toolbar di Blogger. Akan tetapi ada penempatan kode berbeda dan tidak diperlukan tag kondisional, karena bisa membuat halaman terpisah.
Cara Pembuatan
1. Buat folder baru atau subdomain baru untuk demo.
2. Simpan kode dibawah ini dengan nama
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Theme Demo</title>
<style>
body {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWNhdGehyGDakedK5RBfF4GkTiavwMu1HlNACm6vr1hnXKK8GmQsAcYJU_6JteSmdXrqMektSEpyj2VUzPNUPHA4IKLwX5F6bsFIu6EVAi2TWmR8zBb8BqwNGCgobB0qqbtWqULyNctY/s1600/loader.gif)no-repeat center center;
font:normal normal 13px/normal Arial,Sans-serif;
color:white;
text-align:center;
margin:0;
padding:0;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.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/AVvXsEjOByFScAKHYw0PORDZR6zGBHbSBfKnRXluk9C71k__KXGFY1GIklLlz6q9EPF4l1A9R7osYeSoecjCfZO44xpXC891PRau1AcuOTJAfdtjvSXE50grdOjJjpCAkcVX1_rOzt5EM2wk5Eo/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/AVvXsEjOByFScAKHYw0PORDZR6zGBHbSBfKnRXluk9C71k__KXGFY1GIklLlz6q9EPF4l1A9R7osYeSoecjCfZO44xpXC891PRau1AcuOTJAfdtjvSXE50grdOjJjpCAkcVX1_rOzt5EM2wk5Eo/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aGruErSgYJa75nAlHMlL552zE90t6L30d5ofAUk0rsliQDS7fvzWJnM_9R1u9QNocPA-TJsoHF9VIu9DrJi_KT0uJzMWgFPkl5G9TBcSiEB0he5DSrT0dl_-gAnpASMfV_o5vNnMA3w/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aGruErSgYJa75nAlHMlL552zE90t6L30d5ofAUk0rsliQDS7fvzWJnM_9R1u9QNocPA-TJsoHF9VIu9DrJi_KT0uJzMWgFPkl5G9TBcSiEB0he5DSrT0dl_-gAnpASMfV_o5vNnMA3w/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/AVvXsEjEX4Z9wEj1P2FxN8gTM7gSMfMGuxiP_I4MRbP11Ez8wMY5SXQqazatVu6Elz9A2tq7fB59RfXGUu7VzLKofvh1BZNEC7Lrs1e386EZBc2hX_Rl-uR-qsCoPMxFPqXz0dFj1O4IEd-rBD4/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;
}
</style>
</head>
<body>
<div id='tab-demo'>
<a class='demologo' href='http://blog.kangismet.net'>KI WP Theme 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' src=''></iframe>
<script>
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>
</body>
</html>Cara Penulisan
Untuk penulisan demo, sama dengan blogger seperti ini
http://namablog.com/demo/?url=URL-Demo-disini&download=URL-Download-disiniSemoga bermanfaat...