/ />
border="0"/ /> Adicionar a favoritos
Esse é mais código para adicionar aos favoritos, mas este você pode usar imagens nele e funciona no Internet Explorer e Firefox. Copie o código abaixo e coloque pela pagina layout, adicionar gadget, html/javascript. Você pode alterar as imagens para qualquer outra que goste mais ou um banner de seu blog. Não esqueça de modificar a url e nome do blog pois o código abaixo está feito para adicionar esse blog aos favoritos.
![Adicione aos Favoritos]()
src="http://img152.imageshack.us/img152/1145/firefoxim7.jpg"border="0"
/ />
border="0"/ />
/ />
border="0"/ /> 
Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us
No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:
Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la
Colocar ou alterar as bordas
Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:
border: 1px solid #0000FF
1px é a largura
solid é o estilo
#0000FF é a cor
Por exemplo para colocar bordas nos link procure por:
a:link, a:visited {
color:#0000ff;
text-decoration:none;
}
e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:
a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}
Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.
border: 2px dotted #000000
border: 2px dashed #000000
border: 1px solid #0000FF
border: 4px double #FF0000
border: 3px groove #6666FF
border: 4px ridge #FFFFCC
border: 3px inset #FFFF99
border: 2px outset #6699FF
STATUS do msn no Blog
Para mostrar seu status do MSN no seu blog entre no link:
http://settings.messenger.live.com/Applications/WebSettings.aspx
Isso vai levar você para uma página onde encontrará algumas opções de como mostrar seu status do MSN no seu blog, inclusive se todos ou não poderão ver quando você estiver on-line.
Você pode escolher se quer mostrar somente o ícone de status, um botão que aparece seu nome quando você está conectado(isso porque mesmo quando estiver com o status de ocupado e outros, seu nome ainda aparecerá) e ainda outra coisa que interessante para colocar no blog é uma janela para mensagens instantâneas para que seus visitantes possam escrever para você através do seu blog quando você estiver on-line e você recebe a mensagem numa janela de conversa normal como se fosse um dos seus contatos do MSN.
Imagem ao lado do texto ou link
Alguns blogs tem uma pequena imagem ao lado dos links ou titulos, clique aqui para ver um exemplo, para colocar um seta ou qualquer outra imagem ao lado de um texto ou link o código é:
.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:
.seta a:hover{background-image: url(URL DA IMAGEM);
}
O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:
.sidebar ul li {.....
Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:
.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}
Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.
.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:
.seta a:hover{background-image: url(URL DA IMAGEM);
}
O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:
.sidebar ul li {.....
Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:
.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}
.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}
Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.
Barra de endereço animada
Código para colocar animação no titulo do blog:
Coloque esse código pela página editar html antes da tag e após isso coloque o titulo que desejar e verá que ele ficará passando na barra do Internet Explorer ou Firefox (testei somente nesses navegadores), num efeito semelhante ao texto deslizante. Esse script deixará a página um pouco lenta, por isso algumas pessoas não gostam de sites que usam isso.
Coloque esse código pela página editar html antes da tag e após isso coloque o titulo que desejar e verá que ele ficará passando na barra do Internet Explorer ou Firefox (testei somente nesses navegadores), num efeito semelhante ao texto deslizante. Esse script deixará a página um pouco lenta, por isso algumas pessoas não gostam de sites que usam isso.
Atualmente muitas pessoas fazem parcerias trocando banners com outros sites e muitas vezes esses bannes ocupam bastante espaço no blog. Uma boa maneira de resolver esse problema é usar um sistema de rolagem de banners, isso faz ocupar menos espaço no blog e ao mesmo tempo tem um efeito visual muito bom.
O abaixo faz que os banners fiquem deslizando pela tela e o melhor você define o espaço que eles ocuparão e outras coisas.
Vamos entender e aprender como modificar esse código:
Borda: border: 2px solid #000000
2 é a largura, solid é o estilo normal(experimente trocar 2px solid por 5px double, são duas linhas como borda)
Cor de fundo: background-color: #FFFFCC
Alinhamento: text-align: center
Poder ser left(esquerda) ou right(direita)
Altura: height: 200px
Largura: width: 150px
Altura e largura pode ser qualquer valor, mas não retire o px no final, é uma medida de pagina(pixels)
scrolldelay="1"scrollamount="1"direction="down"
Os valores 1 no trecho acima são a velocidade que os banners se movimentam e a palavra down é a direção que pode ser alterada para up(para cima), left(para esquerda), right(para direita).
Espero que gostem e aproveitem essa sugestão de como economizar e melhorar a aparência de seu blog. Clique aqui e veja um exemplo desse código funcionando.
O abaixo faz que os banners fiquem deslizando pela tela e o melhor você define o espaço que eles ocuparão e outras coisas.
Vamos entender e aprender como modificar esse código:
Borda: border: 2px solid #000000
2 é a largura, solid é o estilo normal(experimente trocar 2px solid por 5px double, são duas linhas como borda)
Cor de fundo: background-color: #FFFFCC
Alinhamento: text-align: center
Poder ser left(esquerda) ou right(direita)
Altura: height: 200px
Largura: width: 150px
Altura e largura pode ser qualquer valor, mas não retire o px no final, é uma medida de pagina(pixels)
scrolldelay="1"scrollamount="1"direction="down"
Os valores 1 no trecho acima são a velocidade que os banners se movimentam e a palavra down é a direção que pode ser alterada para up(para cima), left(para esquerda), right(para direita).
Espero que gostem e aproveitem essa sugestão de como economizar e melhorar a aparência de seu blog. Clique aqui e veja um exemplo desse código funcionando.
Assinar:
Postagens (Atom)