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.
(Credits goes to Kang Ismet)
Red - Change the mouse pointer.[Default is pointer(e.g cursor:pointer;)]
Blue - Enter the URL of your website's logo.(Credits goes to Kang Ismet)
You can easily make a demo page, and customize it according to your needs.
>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.
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 Tricks Dzire */
#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/AVvXsEjSE_iao5NAEQJP1UYun2ewZxmv8LFHg-HB1hNBXzO8xMvrJkNdDSD5kkmDNlL_vTEVN_BepGNFOzmDM8sFCA7J96cmcPwCas6MKAKuNFjZe3vm2oqkoh78l43881BUfWjpXGKp8wK8u9o/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCoMMZvPxJmK8rocbDuW_hvgCaPwREY6C9She9xCRZQCaFCEBbTyufefSHOt3Y4JGOC2Jyuno2fyqaXS8yG4Dph6ocEvhaiBT_qvSZb7zO37l7le0HuL-odlgS50gdwpBW7OItEpCx8Y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCoMMZvPxJmK8rocbDuW_hvgCaPwREY6C9She9xCRZQCaFCEBbTyufefSHOt3Y4JGOC2Jyuno2fyqaXS8yG4Dph6ocEvhaiBT_qvSZb7zO37l7le0HuL-odlgS50gdwpBW7OItEpCx8Y/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FbDxpGeYVblfHQo-zeOJ9Y6a0XD4wbl58ExZxX4R7RE-955rD3eRdkc756MA00MVYAhb-mXIO5kTistS8DMx3bJ4Ly5VkePVRZ2QM6zxEG8HBoU2HGSPgd9NFBHLDF76WgF9qke_wqk/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FbDxpGeYVblfHQo-zeOJ9Y6a0XD4wbl58ExZxX4R7RE-955rD3eRdkc756MA00MVYAhb-mXIO5kTistS8DMx3bJ4Ly5VkePVRZ2QM6zxEG8HBoU2HGSPgd9NFBHLDF76WgF9qke_wqk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKWgBAGAvm9BC5hzqYa3BJyRBxYNyqpJLx9vIbktK3I1c68CQo-Svq52KD6j1eogIqPOSQPtvZ1-5JzT-Kxcb8gBGxm7xSpp2S-j3N_b-4nfE4eTaQE3V8g1zbhwFTpdR3is6DO5hMic/s1600/Capture2.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 Tricks Dzire */
Red - Change the mouse pointer.[Default is pointer(e.g cursor:pointer;)]
>Now, for the third step, you have to find "<body>", and after it, paste the code below.
<b:if cond='data:blog.url != "http://tricksdzire.blogspot.com/p/demo.html"'>
Lime - 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 == "http://tricksdzire.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://tricksdzire.blogspot.com'>Tricks Dzire 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>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://tricksdzire.blogspot.com/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
Lime - 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.
Create Demo Page In Blogger With Download And Remove Frame Buttons
Reviewed by Hinshal Sharma
on
11:17 pm
Rating:
Reviewed by Hinshal Sharma
on
11:17 pm
Rating:
