quinta-feira, 9 de setembro de 2010

Personalizando os marcadores do blog.

Os marcadores do blog por ser uma espécie de guia ou menu principal merecem uma formatação diferente para seus links, então vamos modificar o estilo dos marcadores do blog. Isso é semelhante a colocar barra de rolagem nos marcadores que já falamos anteriormente, alias você pode fazer as duas coisas ao mesmo tempo. Agora vamos mostrar como colocar uma imagem ou ícone ao lado dos marcadores, que na verdade é uma imagem de fundo, e formatar seu estilo, mudar o tipo de letra, cor e tamanho.

Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.



Na linha <ul> acrescente guia rápido, é o nome que vamos usar para esse estilo, mas poderia ser qualquer outro, então fica assim: <ul class=’guiarapido’>. Depois vá até o inicio do código do blog e crie o estilo CSS guia rápido, coloque isso junto com os outros estilos (body, main, sidebar...) do seu blog.

.guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;}


.guiarapido a:hover{font-style: italic;background-image:url(http://img18.imageshack.us/img18/7765/marcadorover.gif);background-repeat: no-repeat;
background-position: left center}

Os endereços são as imagens que ficaram ao lado dos marcadores, você precisará de duas assim uma somente aparece quando colocamos o mouse sobre um marcador. Para fixar a imagem do lado esquerdo e sem repetir usamos essas linhas:
background-repeat: no-repeat;
background-position: left center;

A parte final: padding-left: 25px;padding-top: 2px; padding-bottom: 2px; são as margens, o valor 25 é a distancia da margem esquerda (deve ser um pouco maior que a largura da imagem) e os valores 2px são em cima e embaixo, também é necessário ajustar conforme o tamanho de imagem que você usar.

Se quiser modificar o tipo, cor ou tamanho da letra basta colocar isso aqui nas duas partes do codigo:

font-family: "Comic Sans MS";
font-size: 14pt;
color: #0000FF;

E formatar como quiser seus marcadores, escolhendo o jeito que combine melhor com seu blog, dissemos para colocar nas duas partes do código (.guiarapido a / .guiarapido a:hover) porque assim poderá escolher cores diferentes, sugerimos não mudar o tamanho nem o tipo de letra pois isso faz ocupar espaços diferentes e o menu dos marcadores ficará “pulando” quando passar o mouse sobre ele, quero dizer subindo e descendo um pouco.

Dica Como fazer e colocar botões no blog

Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links). Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o ImageShack.

Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:

.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}

Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:

/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;

Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:


Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.

text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)

Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.

Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão. A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link.

Retirar mensagem Mostrando postagens com marcador

Sempre que alguém clica num marcador ou faz uma pesquisa, uma mensagem aparece no topo da página do seu blog indicando que marcador está ativo. Visualmente não é agradável e ocupa um espaço desnecessário. Descobri como remover esse alerta de forma bem simples.


Essa mensagem é feia, desnecessária e só ocupa espaço.
Mensagem Ferramentas Blog
Existem duas formas de retirar isso, dá pra aplicar as duas juntas pra ter certeza de que irá funcionar. Existem alguns modelos de template que não aceitam alguns códigos, então veja qual é melhor para você.
Retirar isso é bem simples:
Antes de fazer qualquer modificação no código-fonte de seu blog, crie uma cópia Backup do modelo.
  • Primeiro modo.
1. Vá ao painel do blogger e escolha “Layout” e a opção “Editar HTML”.

2. Procure pela linha de código:
]]></b:skin>
3. E, acima dessa linha, cole o seguinte:
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}
4. Salve o modelo e teste para ver se funciona e se não tem erros.
  • Segundo modo.
1. Do mesmo modo, entre em “Layout” e depois em “Editar HTML”
2. Procure pela linha, logo no início do código-fonte, “<head>” e, abaixo dela cole:
<style type='text/css'>
.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}
.status-msg-bg{
display:none;
}
.status-msg-hidden{
display:none;
}
</style>
3. Salve o modelo e teste para ver se funciona e se não tem erros.

Dica Qual o melhor tema para criar um blog.

Qual o melhor tema para criar um blog, sobre o que devo escrever no meu blog, qual o melhor assunto para fazer um blog e outras perguntas deste tipo são muito comuns. Provavelmente a maioria está pensando em como fazer um blog para conseguir muitas visitas e ganhar dinheiro com blogs, mas as coisas não são tão simples assim.

Então pense na hora de criar um blog ou mais especificamente sobre qual será seu assunto principal, afinal você terá que escrever muitas vezes sobre aquele tema, quero dizer fazer uma ou dez postagens sobre algo que não tenha interesse é fácil, mas um blog para ter sucesso leva tempo, e você terá que passar meses na verdade anos fazendo postagens por isso deve escolher um assunto que goste ou pelo menos tenha algum interesse.

Blog de sucessoOutra coisa muito errada (para não dizer criminosa) é copiar conteúdo de outros blogs ou sites, isso é plagio, um crime previsto no código penal, e o próprio Google tem uma pagina para receber denuncias de plagio (usamos sempre e realmente funciona, os blogs que copiaram nosso conteúdo tiveram as postagens excluídas e às vezes o blog inteiro). Além disso, se o Google notar que seu blog é copia de outros sites remove você do índice, isso significa que não aparecerá mais nos resultados da pesquisa Google.

Mais um fator que complica muito o desenvolvimento de blogs é no caso de plagio você não saberá responder os possíveis comentários que suas postagens tiverem, afinal mal leu o artigo que publicou ou no caso de ser um assunto que não goste será muito difícil falar e pensar sobre esse tema todos os dias. Afinal ter um blog envolve muito mais que publicar textos.

Ganhar dinheiro na internet leva certo tempo e deve pensar bem nisso na hora de criar um blog se for escrever sobre um tema especifico para não cair nestes erros que citamos acima. Então pense um pouco sobre esses pontos que citamos antes de criar um blog que será um problema para você.