Páginas

sábado, 3 de dezembro de 2011

Retirar a Navbar do Blogger

Para retirar a navbar do blogger no Modelo antigo


Procure no código do seu template este trecho ]]></b:skin> e acrescente antes, a parte em vermelho:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none; }

deve ficar assim:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none; }
]]>

</b:skin>

Para retirar a navbar do blogger no Modelo Novo:


Procure no código do seu template este trecho <head>(isso está bem no começo do html)e acrescente depois dele, a parte em vermelho:

<style>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none !important;
}
</style>

Nos novos modelos de template com o surgimento da pagina designer do modelo, quando retirar a barra do blogspot geralmente fica um espaço vazio no lugar dela, isso é causado por esse código que você encontra na pagina editar html.

.content-outer {
margin: 0 auto;
padding-top: 20px;
}

Além deste código existem alguns outros que também podem causar o espaço, então procure também por:

.body .navbar {
height:0px;
}

.content-outer {
margin-top:0px;
}

Zere os valores para retiar qualquer espaço que possa existir. Gostaríamos de poder dizer exatamente qual é o código, mas o problema é que isso varia conforme o template que seu blog usar, portanto o unico jeito é fazer testes até descobrir qual deles funcionará no seu blog.

Certamente um deles é esse padding-top: 20px; mude a parte em vermelho para 0px


É isso que faz aparecer esse espaço vazio no inicio do seu blog.
Espero ter ajudado.
Leia mais...

segunda-feira, 28 de novembro de 2011

Formulário de contato em PHP para blog/site

Torne seu blog/site mais profissional com uma Formulário de Contato
Este Formulário pode ser inserido em qualquer blog ou site.
Meu blog usa esse formulário.


Como instalar


Copie o código HTML abaixo cole no bloco de notas e salve como contato.html (esse código vai gerar o Formulário )


<html><head><script language="JavaScript">
function validaForm(){
//validar nome
d = document.cadastro;
if (d.nome.value == ""){
alert("O campo Nome deve ser preenchido!");
d.nome.focus();
return false;
}
if (d.email.value == ""){
alert("O campo Email deve ser preenchido!");
d.email.focus();
return false;
}
if (d.assunto.value == ""){
alert("O campo Assunto deve ser preenchido!");
d.assunto.focus();
return false;
}
if (d.mensagem.value == ""){
alert("O campo Mensagem deve ser preenchido!");
d.mensagem.focus();
return false; }
return true;}
</script>
</head>
<body>
<form name="cadastro" action="enviar.php" method="post" onSubmit="return validaForm()">
<input type="hidden">
<!-- e-mail do destinatario -->
<center>
<table width="257" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="257"><span class="style1">*</span>Nome:<br>
<input type="text" size="52" name="nome" value=""></td> </tr> <tr>
<td><span class="style1">*</span>E-mail:<br> <input type="text" size="52" name="email" value=""></td> </tr> <tr>
<td><span class="style1">*</span>Assunto:<br>
<input type="text" size="52" name="assunto" value=""></td> </tr>
<tr>
<td><span class="style1"></span>Site/Blog:<br>
<input type="text" size="52" name="blog" value=""></td> </tr>
<tr>
<td><span class="style1">*</span>Mensagem:<br> <textarea cols="40" rows="10" name="mensagem"></textarea> </td> </tr> <tr>
<td><i style="text-align: right;" align="right">*campo obrigat&oacute;rio &nbsp; <input name="reset" type="reset" value=" Limpar "> <input name="submit" type="submit" value=" Enviar "> </i></td> </tr>

<tr>
<td>&nbsp;</td> </tr> </table> </center> </form>
</body></html>

Agora copie o código PHP e cole no bloco de notas e salve como enviar.php (esse código é quem envia a mensagem)

Substitua o que esta em vermelho incluindo seus dados.

<?
##########################################################
///////////////////////////////////////////////////// ###
/// Autor: Mateus Campos //// ###
/// E-mail: mateuscampos@globo.com //// ###
/// Site: www.centralwarez.com //// ###
/// Msn: mateus@centralwarez.com //// ###
/// Obs: favor não retirar os nossos créditos!!! //// ###
///////////////////////////////////////////////////// ###
##########################################################
// aqui começa o script
//pega as variaveis por POST
$nome = $_POST["nome"];$site = $_POST["blog"];$email = $_POST["email"];$fone = $_POST["fone"];$assunto = $_POST["assunto"];
$mensagem = $_POST["mensagem"];
global $email; //função para validar a variável $email no script todo
$data = date("d/m/y"); //função para pegar a data de envio do e-mail
$ip = $_SERVER['REMOTE_ADDR']; //função para pegar o ip do usuário
$navegador = $_SERVER['HTTP_USER_AGENT']; //função para pegar o navegador do visitante
$hora = date("H:i"); //para pegar a hora com a função date
//aqui envia o e-mail para você
mail ("seu-email@site.com ", //email aonde o php vai enviar os dados do form
"$assunto",
"Nome: $nome\nSite/Blog: $site\nE-mail: $email\n\nMensagem: $mensagem",
"From: $email"
);
//aqui são as configurações para enviar o e-mail para o visitante
$site = "seu-email@site.com"; //o e-mail que aparecerá na caixa postal do visitante
$titulo = "seu site aqui - Email recebido"; //titulo da mensagem enviada para o visitante
$msg = "$nome, obrigado por entrar em contato conosco, em breve entraremos em contato";
//aqui envia o e-mail de auto-resposta para o visitante
mail("$email",
"$titulo",
"$msg",
"From: $site"
);
echo "<p align=center>$nome, sua mensagem foi enviada com sucesso!</p>";
echo "<p align=center>Estaremos retornando em breve.</p>";
?>

Hospede os arquivos contato.html e enviar.php num site de hospedagem que suporte php, existem vários sites grátis disponíveis na net,


Depois de hospedado os arquivos você vai criar uma nova pagina no seu blog e inserir esse código.


<div align="center"><iframe name="" sites="" src="http://site-onde-foi-hospedado-os-arquivos-do-formulario/contato.html" width="550" frameborder="0" height="480" scrolling="auto"></iframe></div>


Caso seja necessário alterar os valores em vermelho para mais ou para menos para ajustar a sua pagina.

Pronto se você fez tudo certo seu formulário de contato esta pronto.

Duvidas, deixe um comentário.
Leia mais...

quinta-feira, 7 de outubro de 2010

Inserindo banner ou Adsense sob o cabeçalho

Uma maneira de inserir banners e outros elementos de página centralizados sob o cabeçalho facilmente é procurar no código do seu template (não é preciso Expandir Modelo de Widget) este trecho:

<amp;div id="crosscol-wrapper" style="text-align: center;">
<b:section class="crosscol" id="crosscol" showaddelement="no">

onde está no substitua por yes e salve. Vá em Modelo/Layout e já poderá visualizar o espaço apropriado sob o cabeçalho para inserir elementos de página.

Nota1: Esta DIV pode ser encontrada em todos os templates originais do Blogger. Templates modificados podem não conter esta DIV

Nota2: Esta DIV pode ser personalizada no CSS assim:


#crosscol-wrapper{ width: estabeleça aqui a largura; height: estabeleça uma altura, se desejar; background: estabeleça cor ou imagem de fundo; padding: estabeleça distância das margens;}

Nota3: esta DIV sempre acompanhará a largura total de Outer-Wrapper se nenhum valor em width for estabelecido.

É excelente para centralizar facilmente, links de anúncios do Adsense sob o cabeçalho.

fontes:
Templates Novo Blogger
Leia mais...

Artigos Relacionados no Blogger

Para colocar no rodapé da postagem os Artigos Relacionados, é muito fácil e também muito útil, pois direciona o leitor para outros textos com a mesma tag.




1- Coloque o script abaixo depois de ]]></b:skin>:


<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


2- Salve a modificação. Clique em Expandir Modelo de Widget e procure por este trecho:

<b:if cond='data:post.labels'><data:postLabelsLabel/><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>

3- Cole este cofigo entes de </b:loop> :


<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"'
type='text/javascript'/>
</b:if>


4- Agora procure por:
<div class='post-footer-line post-footer-line-3'>


e cole logo abaixo:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>


Salve as modificações. Para dar estilo ao título e à lista, acrescente no CSS:


.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: coloque aqui o tamanho da fonte;
color: #...coloque aqui o valor da cor para o título; }


Para dar estilo à lista:


.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}

.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: tamanho da fonte;}

.related-posts li a{color: #....}
.related-posts li a:hover{color: #.....; text-decoration:none;}


Obs: os links dos artigos relacionados aparecem apenas nas páginas internas. Eles não aparecem se você trancar seu blog.


fontes:
Templates Novo Blogger
UsuarioCompulsivo
Vagabundia
Leia mais...

sábado, 2 de outubro de 2010

Como adicionar Url e Sitemaps do blogger no Gloogle

É possivel adicionar Sitemaps do blog no Gloogle? Sim, você fará isso através da "Ferramentas para Webmasters"

Você não precisa criar o Sitemaps, ele já esta pronto para uso, para verificar isso faça o seguinte.

Digite no seu navegador o endereço do seu blog acrescentando /atom.xml
Veja exemplo: http://SEU BLOG.blogspot.com/atom.xml

Essa é a URL do Sitemaps do seu blog, e mais, você não precisa fazer atualizações quando criar ou modificar um post, ele atualiza automático.

Vamos lá.

Primeiro precisamos cadastrar seu blog no Gloogle.


Entre na sua conta Gloogle, entre em "minha conta" verifique se o serviço "Ferramentas para Webmasters" já esta na lista, Caso não seja mostrado nos serviços role a pagina ate o final, não visualizando, clique em "mais" aparecera este seriço, clique sobre ele.


Logo no inicio da pagina ha uma caixa para adicionar o URL do seu blog (dica importando que prestei atenção; não use o "www" isto apresentara erros na hora que o Gloogle verifica seu Sitemaps)
Clique em "Adicionar site".


Aparece a proxima pagina informando que seu Blog foi incluido na sua conta, logo abaixo ha uma caixa amarela com a proxima etapa, "Verifique seu site" clique.


na caixa "Escolher método de verificação" escolha "incluir meta tag", copie o codigo gerado pelo Glogle e faça o seguinte:


Em outra janela do seu navegador faça login no deu blog,


clique em "layout", "Editar HTML"


Na caixa que contém o código HTML cole o código gerado pelo Gloogle abaixo de >head<. clique em "SALVAR MODELO" pronto. (Pode até fechar essa janela)


Agora vamos adicionar o seu "Sitemaps",

Na janela anterior onde cadastramos seu site clique em "verificar", voltara para "Ferramentas para Webmasters", onde mostra sitemaps clique em "Adicionar", abrira nova janela mostrando seu URL pedindo um complemento,

Digite apenas atom.xml.
Ex: http://SEU BLOG.blogspot.com/atom.xml
Clique em "Enviar Sitemaps".~


Pronto! seu Blog e Sitemaps esto cadastrados no Gloogle.

Feito esse procedimento percebera o aumento de visitas em seu blog.
Leia mais...