Create Demo Page In Blogger With Download And Remove Frame Buttons

byblogger tricks - 0
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.

You can easily make a demo page, and customize it according to your needs.


PREVIEW



  • The first step is easy. You just have to create a new blank page named Demo.
[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 Sayem Miaji */
#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/AVvXsEizq4VqkKL9yys8IgLei9nXII2KE1HzAbXsIwJ6WH6OkihvacZmqQfmDewyApAeR0x2JPMEZ4hV5KWU8HZPnaPOLqM7-XxDkpME_cq40RrGOZPJBFVBy0dPOBpZ1GNQR5wjL2DTiJnAzNc/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/AVvXsEh-_HPWbHmuT2IzlINKkK0mxvJJiCG5DxWV4jtuyIIlyWBJY7-VMFJq5fOGlJM84i7Xs7T1C8gmbdiDc0b_nAUrgcM2LfI5YhtZdFVcrMfKi3XY50xnpVzKFlGeaiEY9bOkHlCCnT0vtnM/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/AVvXsEh-_HPWbHmuT2IzlINKkK0mxvJJiCG5DxWV4jtuyIIlyWBJY7-VMFJq5fOGlJM84i7Xs7T1C8gmbdiDc0b_nAUrgcM2LfI5YhtZdFVcrMfKi3XY50xnpVzKFlGeaiEY9bOkHlCCnT0vtnM/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1od8_qMTpKrP_XJ-2PrXHIaWFwTaxN_WxkJv294TyLEYPILfusLHFFYMzksRNfd-LQymOVq4HUK1s6dLagbSlFXerx9XFzKFRbgsiBpUGPMoY_In52fCce0w0aYS8fKTRlHj7pVK5KL8/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1od8_qMTpKrP_XJ-2PrXHIaWFwTaxN_WxkJv294TyLEYPILfusLHFFYMzksRNfd-LQymOVq4HUK1s6dLagbSlFXerx9XFzKFRbgsiBpUGPMoY_In52fCce0w0aYS8fKTRlHj7pVK5KL8/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/AVvXsEjxs-0Uz3l7-x3MkWOqr7AixLKZOruoey0skllcSgU_RinLxl7V922vrAo4zLZymAsgKB9Q7Sdw4laNjBf0BoMnw_1Q-nR3hKBOQrgprOu8BtwSCMhbhbnCFHholDkaaAvGbgCV1qeEcAk/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 SAYEM MIAJI */
cursor:crosshair-Change the mouse pointer.[Default is pointer(e.g cursor:pointer;)]
Enter the URL of your website's logo.

  • Now, for the third step, you have to find "<body>", and after it, paste the code below. 

<b:if cond='data:blog.url != &quot;http://your-blog-name.blogspot.com/p/demo.html&quot;'>


  • 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 == &quot;http://tricksdzire.blogspot.com/p/demo.html&quot;'>
<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://Sayemtutorial.blogspot.com'>Sayem Tutorial</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

  • Sayem Tutorial- Replace with your own choice.
  • http://Sayemtutorial.blogspot.com - Enter your blog URL.
  • 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://your-blog.blogspot.com/p/demo.html?url=http://fl.com;download=http://dl.com

http://your-blog.blogspot.com/p/demo.html - Replace with your Demo page URL
http://fl.com - URL of the website or script to preview
http://dl.com - 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.

Tags:

إرسال تعليق

Post a Comment (0)

أحدث أقدم