Pages

Criar live demo com frame para Blogger


Aqui vai um tutorial de criação de uma página de demonstração de blogs que pode ser personalizada de acordo com as suas necessidades. Segue tutorial abaixo:

  1. Crie uma nova página em branco com o título Demo.
  2. O segundo passo é Ir para modelo > Editar HTML. Em seguida, localize "]]> </ b: skin>", e cole o seguinte código acima disso:
/*  Demo Page by Sah Design de Sonhos */
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url()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://2.bp.blogspot.com/-vw3H0Z9P8i8/WXt1zrP6juI/AAAAAAAABQo/27869pP9ACIG2KkpRU3m-LGOIao8lXEkwCLcBGAs/s1600/fechar.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://2.bp.blogspot.com/-vw3H0Z9P8i8/WXt1zrP6juI/AAAAAAAABQo/27869pP9ACIG2KkpRU3m-LGOIao8lXEkwCLcBGAs/s1600/fechar.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://4.bp.blogspot.com/-JsMhM1II7E0/WXt2GgXvmhI/AAAAAAAABQs/ampGMgKy360dDyQMsHueLppjovwI7JW5ACLcBGAs/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:#66af33 url(https://4.bp.blogspot.com/-JsMhM1II7E0/WXt2GgXvmhI/AAAAAAAABQs/ampGMgKy360dDyQMsHueLppjovwI7JW5ACLcBGAs/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()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 Sah Design de Sonhos */

Vermelho: mudar o estilo do cursor.
Pink: substitua pelo url da logo do seu website.

3. Encontre "<body>", e em seguida, cole o código abaixo:

<b:if cond='data:blog.url != &quot;http://www.sahh.com.br/p/demo.html&quot;'>

Pink: Insira aqui a sua página Demo que você criou anteriormente.

4.  Em seguida, encontre "</ body>" e cole o código seguinte acima dela.

</b:if> 

<b:if cond='data:blog.url == &quot;http://www.sahh.com.br/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://www.sahh.com.br/'>Sah | Design de Sonhos - Demo</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;'>Remover Barra</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>


Azul: coloque o url da sua página demo criada anteriormente.
Pink: Url do seu site.
Vermelho: Escolha o nome que desejar.

5. Salve! Fim! Para visualizar o seu modelo, basta utilizar o url abaixo:

http://www.sahh.com.br/p/demo.html?url=http://sahhh.com;download=http://baixar.com

Pink: URL so seu website.
Azul: Url do site que você quer exibir a demonstração.
Vermelho: Link para baixar/ comprar.




Nenhum comentário:

Postar um comentário