Dicas para Blogs e Sites

Um acessório interessante para colocar no blog é um identificador de resolução de tela, embora seja uma coisa simples consegue prender a atenção dos visitantes e algumas vezes pode até gerar mais visitas pois as pessoas podem querer testar se realmente funciona e entram no seu blog de outro computador ou pedem para algum amigo que esteja on-line testar.

Para colocar um desses identificadores no seu blog é bem fácil basta copiar o código abaixo dele, entrar na página layout, adicionar gadget, html/javascript e colar o código. Se tiver alguma sugestão sobre cores ou tamanho desse identificador nos escreva.

Clique aqui e veja identificadores em outras cores

Marcadores: Acessórios, Conteúdo

Algumas pessoas perguntaram sobre como fazer para colocar um relógio no banner do blog, isso é um pouco difícil de explicar principalmente porque utilizo para fazer isto um programa chamado Flash, portanto só é possível fazer um banner com relógio se você tiver esse programa e souber trabalhar com ele.

Por essas razões farei banners com relógios para outros blogs além deste colocando seus respectivos links. Mas na parte do relógio terá um link para esse blog, igual está nesse exemplo ao lado. Faça um teste clique na parte do banner e abrirá uma janela com o blog Meu Jornal, mas se clicar na parte do relógio abrirá esse blog numa outra janela. Então se você gostou da idéia mande o link do seu banner e do seu site para fabiano1404@yahoo.com.br e em breve você receberá o código pronto para colocar no seu blog e poder divulgar seu banner com relógio.

Quanto ao tempo que demora em abrir esse banner com relógio, acredito que isto não seja problema pois neste exemplo e em alguns outros que fiz para testar a diferença entre o banner comum e este com relógio é de somente 3 k, portanto isso não muda em quase nada o tempo que o banner demora em aparecer quando alguém entrar no site.

Sugiro que você coloque o código dos dois banners (deste com relógio e seu banner normal) no seu blog para seus visitantes poderem escolher qual usarão, porque cada um pensa de uma maneira diferente e talvez algumas prefiram usar o banner normal sem relógio.

Marcadores: Acessórios, Conteúdo

Nas postagens que fiz faltou um detalhe importante sobre o menu de salto ou menu jump, mas o modo de chamar não importa, o que realmente interessa é como fazer esse menu abrir numa nova janela?
Não adianta colocar blank em vez de parent, isso é a primeira coisa que todos fazer e não funciona. Para fazer funcionar você deve apagar essa parte do código:
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
E colocar este no lugar:
<select name="menu1" onChange="window.open(this.value)">
Isso fará o menu de salto abrir em uma nova janela e o restante do código fica do mesmo jeito que era antes.

Colocar imagens como plano de fundo nos sites é uma coisa simples de fazer, basta colocar o código background-image: url(Url da Imagem); onde você deseja colocar a imagem de fundo, lembre-se qualquer parte do CSS pode ter sua imagem de fundo e não somente a tag body onde é geralmente usada. Todas essas alterações de imagens de fundo são feitas através da página editar HTML.

Veja também:
Trocar imagem de fundo no blog - Designer do modelo
Colocar fundo semi transparente no blog
Texturas e Imagem para fundo do blog

Mas além de colocar a imagem ainda podemos escolher onde ela aparecerá e se irá ou não se repetir. Então vamos por partes, primeiro sobre a imagem se repetir, aqui temos algumas opções, embaixo da linha background-image: url(Url da Imagem); colocamos:

background-repeat: no-repeat; - imagem aparece somente uma vez
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Um detalhe é que o ponto e virgula faz parte do código portanto não esqueça dele.
Além de repetir ou não podemos escolher a posição que a imagem de fundo irá aparecer, com o seguinte código:
background-position: right top;

Isto somente fará diferença no blog caso você coloque uma das linhas que controla a repetição, afinal se a imagem se repetir pela pagina toda ela não usará posicionamento. Para colocar a imagem no lugar que você deseja basta trocar as palavras right e top, assim você mudará o lugar que a imagem de fundo irá aparecer para fazer isto no lugar de right(direita), você pode usar center(imagem centralizada horizontalmente) ou left(imagem à esquerda). E no lugar de top(imagem no alto da tela), pode usar center(imagem centralizada verticalmente) ou bottom(imagem embaixo da tela).

Esses códigos para controlar a repetição e onde a imagem de fundo aparecerá são muito bons para usar quando deixamos a imagem de fundo fixa, acrescentando essa linha:
background-attachment: fixed;

Isto faz que a imagem de fundo fique parada na tela e o conteúdo do site deslize sobre ela. Todos esses códigos mencionados nesta publicação são usados para controlar a imagem no fundo da pagina e portanto devem ser usados juntos, deste jeito:
body {background-image: url(Url da Imagem);
background-position: left center;
background-repeat: repeat-x;
background-attachment: fixed}

Mais dicas úteis para seu blog:
Imagens de Fundo e Texturas (Background) para Usar no Blog
Hospedar Imagens no Blogger
Código html das cores para usar nos estilos CSS
Como formatar o texto do blog

Clique aqui e veja um exemplo de site com imagem de fundo fixa

Marcadores: CSS, Efeitos, Template

Algumas pessoas já me perguntaram sobre o menu deste blog que tem botões com barra de rolagem. O código para fazer esse menu é dividido em duas partes:
O estilo CSS do botão que deve ser colocado junto com o restante do CSS do seu site:

.botao a, .botao a:visited{
width: 220px;
color: #000000;
text-decoration: none;
padding-top: 3px;
display: block;
padding-bottom: 3px;margin-bottom: 1px;
background-image: url(Imagem do botão);
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
text-indent: 6px;
}
.botao a:hover{
color: #0000FF;
background-color: #FFFFCC;
background-image: url(Imagem do botão quando o mouse estiver sobre ele);
}

E a outra parte que deve ser colocada onde o menu irá aparecer, no caso do Blogspot isso é na pagina layout, adicionar elemento, html/javascript.

<div style="width: 240px;height: 295px; overflow: auto;border: 1px
solid #999999">
<div class="botao">
<a href=”Endereço do Site” target="_blank">Nome
do Site</a>
</div></div>

Na parte do CSS a linha background-image: url(Imagem do botão); e background-image: url(Imagem do botão quando o mouse estiver sobre ele), você deve hospedar a imagem em algum site e colocar a url aqui. Se preferir pode usar uma cor de fundo trocando essas linhas por background-color: #CCCCCC; escolhendo a cor que desejar, caso use uma cor de fundo em vez de uma imagem sugiro que coloque bordas(adicione essa linha jundo com a outra border: 1px solid #333333;) está também pode ser de qualquer cor. Lembre-se de colocar a cor de fundo e borda nas duas partes do CSS. Sobre o tamanho pode ser alterado como você quiser: width: 240px é a largura do menu e width: 220px é do botão, quando fizer alterações faça nas duas larguras.

Marcadores: Template