Step 2: Add some content in that page and click the publish button.
Step 3: Then navigate to Template >> Edit HTML.
Step 4: Then search for the ]]> </ b: skin> tag on your blog template. Then add the below code just above the ]]></b:skin> tag,
#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/AVvXsEi5CiF6tywQ_wPGhX4DGQGTb0mrO_aIFsDoihn8inD0SV5ocf_jXd3zwX4ZcSZoUhcwZV5V_DavQADalX7cQ0y7wGXceg2Z1S2FYiLHQKjxjryjRFsaUm3H9rX3cipdS9sFevfLlSmyKdQ/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/AVvXsEgwqHE8R5uZMvjYBHsYDP4sG_vK-N5uCvd-dgErUQXWcmyg9F9XPr-T3LIR5NHvOljeHujpfAOeKm816y9ZvocqhoA8CwQ9-wH89a4anUXa3rztUC3eYalhxNW-lulSRTpqkZlI5vNWwx8/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/AVvXsEgwqHE8R5uZMvjYBHsYDP4sG_vK-N5uCvd-dgErUQXWcmyg9F9XPr-T3LIR5NHvOljeHujpfAOeKm816y9ZvocqhoA8CwQ9-wH89a4anUXa3rztUC3eYalhxNW-lulSRTpqkZlI5vNWwx8/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56BGtUzsfZN9DbQdBKRcG-0xw49lN_lmcvdHzOcjl2PZBPFk-v7j-bobK8Pfc2X_xw1qxaTZHdbYt3_MO2mgimObdvTyTqesWWbrS42r1Ja5VfS8BsFMV1dLaWV7qweJCX_sbkmf921k/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56BGtUzsfZN9DbQdBKRcG-0xw49lN_lmcvdHzOcjl2PZBPFk-v7j-bobK8Pfc2X_xw1qxaTZHdbYt3_MO2mgimObdvTyTqesWWbrS42r1Ja5VfS8BsFMV1dLaWV7qweJCX_sbkmf921k/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/AVvXsEgLooN4rScpE8wywV_zYg_j-z7hChz7uZPSz1Y7b3qxfnQW2CFvZ-j8ROBrCFhctFKOzEmnGJ9pYrpiJL1eBe_pj05_sC6mTN1edZXweg2qFoxS5CmmwP6sRgPxP-IZHQRvT__Uup_1jN8/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: Then again search for <body> tag. Then add the below code after <body> tag.
<b:if cond='data:blog.url != "http://mix--er.blogspot.com/p/demo.html"'>
Step 6: Now, Replace the URL with your demo blog page URL and go ahead!
Step 7: Now search </body> tag on your template and add the below code just above </body> tag.
</b:if> <b:if cond='data:blog.url == "http://mix--er.blogspot.com/p/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://mix--er.blogspot.com/'>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;}background:white;}</style></b:if>
Step 8: Now again replace the URL with Download link or Demo link of your blog page and Save your template. That’s it! We have completed 95% of implementing the demo page with toolbar on Blogger. Now it’s time to add the download/demo link on that toolbar.
Step 9: Just add the below coding in the place where you need to show up your Download/Demo button in your post on HTML section.
http://mix--er.blogspot.com/p/demo.html?url=URL Demo URL here & download = Download here
Step 10: Replace the link with your Demo page URL.
