Aprenda Como Criar uma Página Personalizada de Boas Vindas no seu Blog - Exclusivo
Estou fazendo este tutorial a pedido do Renato. Ele pediu este tutorial e eu gostei bastante da sugestão de postagem por que tem muita gente que tem vontade de colocar em seu blog uma página personalizada de boas vindas de forma a recepcionar seu público, porém, não sabe como...
Na verdade a página é bem simples... mas é bem interessante para se colocar em um blog afim de mostrar para seus visitantes uma página de boas vindas para deixá-lo ainda mais avontade em seu site/blog. E, como vocês podem ver na imagem ACIMA (também na demonstração - link abaixo), coloquei também um espaço de publicidade de forma que você poderá colocar também alguns banners de parceiros do seu site/blog. Espero que gostem!!!
Veja uma demonstração clicando aqui.
Veja uma demonstração clicando aqui.
Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:
Para colocar a página no seu blog...
Entre em "Modelo" - "Editar HTML" e procure pela tag
<body>
Ou
Então, se você der Ctrl + F e não encontrar, procure pela tag </head> e olhe abaixo dela para ver se você encontra uma das duas tags.
Tendo encontrada a tag, cole ABAIXO dela o seguinte código
<body expr:class='"loading" + data:blog.mobileClass'>
Observação: Essas duas tags mostradas acima estão abaixo da tag </head>Então, se você der Ctrl + F e não encontrar, procure pela tag </head> e olhe abaixo dela para ver se você encontra uma das duas tags.
Tendo encontrada a tag, cole ABAIXO dela o seguinte código
<style>
#welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
.welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
.welcomeclose:hover {background-color:#aaa}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://www.photos-public-domain.com/wp-content/uploads/2011/02/black-painted-brick-wall-texture.jpg) no-repeat top center;}
</style>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='welcomeoverlay'/>
<div id='welcomebox'><div style='text-align: right;'>
<span style='font-size: xx-small;'>Créditos: Autor da página <b>Samuel,</b></span>
<span style='font-size: xx-small;'>dono e administrador do site <a href='http://goo.gl/9Y3Yb3' target='_blank'><span style='color: #999999;'>DicasHot</span></a></span></div>
<p><span style='font-family: Verdana, sans-serif; font-size: 40px;'><b>SEJAM BEM VINDOS AO NOSSO SITE</b></span><br/>
<span style='font-family: Verdana, sans-serif; font-size: 30px;'><b>Aqui neste site estão listados alguns dos melhores artigos da net !!!</b></span><br/>
</p>
<div class='welcomeclose' onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>CLIQUE AQUI PARA ENTRAR NO SITE →</div>
<a href='http://dicashot.blogspot.com/' style='bottom: 0px; display: scroll; position: fixed; right: 0px;'><img alt='DicasHot' border='0' id='DicasHot' onmouseout='this.style.opacity=0.2;this.filters.alpha.opacity=50' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CVNP_JEV-s0lAGg9eO4lp9ga1zTYrgqCYPekoP_9Eoh1w8WLwVaFcOfX9vqgtlRSOV9qpENN_YhubEqeF3JqBvm4qEeoKG8lwbuHrjh64OFAuG1JWG199MtSi91R5p1W7b1hCdVQB_65/s1600/DicasHot.png' style='opacity: 0.2;'/></a>
<br/>
<br/>
<br/>
<div style='text-align: center;'>
<span style='color: white; font-family: Arial, Helvetica, sans-serif;'>Aqui você poderá escrever o que você quiser...!!! </span><a href='http://goo.gl/9Y3Yb3' style='font-family: Arial, Helvetica, sans-serif;' target='_blank'><span style='color: orange;'>Veja também: Os Filmes Mais Esperados dos Próximos Anos</span></a><span style='color: white; font-family: Arial, Helvetica, sans-serif;'> !!!</span></div>
<center>
<span style='color: white; font-size: 100%;'>Aqui você poderá escrever alguma mensagem para mostrar para os seus visitantes ou se você tiver um código html ou javascript, cole ele aqui mesmo de forma que fique centralizado na página!!!</span></center>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="http://dicashot.blogspot.com.br/2013/11/os-filmes-mais-esperados-de-2014.html" target="_blank"><img alt="DicasHot - Tutoriais, dicas, variedades, entretenimento, variedades, etc." title="DicasHot - Tutoriais, dicas, variedades, entretenimento, variedades, etc." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIRhS7caH1s3GwXyyE1Xa3EIXl3d7ThlsgfU0Kg4MSnUl6146lVqIeWHftGKJKfmwa4Hk7CgDIHZNXU3suzBYHvpFZnyHzjGx8YDAFFV5-5CQeCI-eCqxuvWlMV3ZsHbh2sHfbCZKCmw/s1600/DicasHot+-+banner+250x250.gif" border="0"/></a> <a href="http://agregadordelinks.net" target="_blank"><img class="alignnone size-full wp-image-407" alt="250x250" src="http://agregadordelinks.net/wp-content/uploads/2014/04/250x250.gif" width="250" height="250" /></a> <a href="http://dicashot.blogspot.com/" target="_blank"><img alt="DicasHot - Tutoriais, dicas, variedades, entretenimento, variedades, etc." title="DicasHot - Tutoriais, dicas, variedades, entretenimento, variedades, etc." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKQOlFbOi12UEwp6l1K3pl41ye3LMqI0tWwvfFxnsCEauHxe39RqclygBsCWiqAfc6xzp0TEwuS7Mv02OPjjjWk5dWgcIx25a4FrgGgy59UP2kF-qHIhwlAxD-p34biyu7Yn-NZhqM5Q/s1600/banner_dicashot_250x250.gif" border="0"/></a>
</div>
</b:if>
Você pode fazer o que você quiser na sua página personalizada. Eu destaquei várias partes no código.
Em azul corresponde a sua mesngem ou se você quiser colocar um código;
Em Vermelho é o link do texto;
Em laranja corresponde a imagem de fundo na tela;
Em azul claro corresponde aos banner de publicidade. (Se você não tiver nenhum parceiro em mente, deixe nosso banner, assim você já terá um parceiro)
A parte destacada de rosa, corresponde ao espaço, ou seja, se os banners ficarem muito para baixo da página, apague uma dessas tags até os banners ficarem na posição certa.
Tendo feito as modificações, está pronto!!!
Qualquer coisa não deixe de perguntar.
Atenção: Não retire os créditos do autor do código!!!
