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:
- Crie uma nova página em branco com o título Demo.
- 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 != "http://www.sahh.com.br/p/demo.html"'>
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 == "http://www.sahh.com.br/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://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('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>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