Ajustar Largura
Uma coisa que atrapalha muita gente são as larguras do blog e dos objetos que colocamos nele. E algumas vezes nem percebemos que o problema é este, por exemplo: se você colocar um player (musica) ou vídeo no seu blog e aparece somente uma parte da imagem ou não aparece o botão play para você iniciar a musica, provavelmente o problema não está no código nem no site que fornece o serviço. Mas é tudo uma questão de espaço, ou melhor, dizendo falta de espaço.
Vamos dar um exemplo pratico: se a sidebar (coluna do menu, links, etc..) tiver uma largura de 200 px (width=200px) e você tentar colocar musica do MP3 tube provavelmente não irá aparecer o botão play, pois a largura do player é 260, então somente uma parte será visível, pois esses arquivos são no formato flash (.swf) e a mesma explicação vale também para vídeos.
Mas tem um jeito de resolver isso, alias vários jeitos, o correto seria aumentar a largura da coluna através da página editar html, encontrando a linha #sidebar{width=200px;......}que em nosso exemplo deveria ser alterado para 270px para deixar algum espaço sobrando, porque entre os navegadores existem algumas diferenças quando a interpretação dos estilos CSS por essa razão sugeri o valor 270 e não 260 que seria a medida exata do player.
Contudo nem sempre estamos dispostos a mudar nosso layout inteiro somente por causa de uma musica ou vídeo, então existe outro modo, em vez de aumentar a coluna vamos diminuir o objeto que vamos colocar nela, mas precisamos ter cuidado para não distorcer a imagem. Quando você pega um código de musica, vídeo ou alguma outra coisa em flash, usarei como exemplo um dos avisos de férias do site Cidade Web, podemos alterar seu tamanho mudando essas partes do código:
width="300"
height="225"
Existem dois detalhes fundamentais aqui: primeiro esses dois valores (width e height) aparecem duas vezes no código, portanto altere os dois senão terá problema com a visualização do conteúdo; em segundo lugar quando alterar esses valores faça de maneira proporcional, ou seja, diminua os dois valores width (300) e height (225) de tal forma que a imagem não fique distorcida, nunca transforme uma imagem retangular em quadrada ou vice e versa, pois ficará horrível. No caso acima você poderia usar os seguintes valores sem causar distorção de imagem: 250x188, 200x150, 150x113 e outros. Um lembrete final é que isso faz mudar somente o tamanho de visualização e não o tamanho do arquivo então ele irá demorar o mesmo que o arquivo no tamanho original para carregar e aparecer. Portanto fazer esse tipo de mudança pensando que irá parecer mais rapido é totalmente inútil, pois não altera em nada o tamanho do arquivo.
Marcadores: Iniciantes, Template
Menu horizontal
Código CSS do menu horizontal:
#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}
Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:
border: 2px solid #000000;
border: 2px solid #0099FF;
Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.
Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um gadget e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:
<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>
Caso tenha dificuldades com este código publicamos um outro artigo sobre menu horizontal mas lá mostramos como colocar o código num lugar só, sem entrar na pagina editar html.
Veja também:
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Marcadores: Códigos, CSS, Template
Notícias no blog
Existem diversos modos de colocar noticias no seu blog, uma delas é usar os Gadgets Como por exemplo, o do UOL Noticias: http://noticias.uol.com.br/widgets. Além desse podemos encontrar facilmente outros no Google Gadgets :
http://www.google.com/ig/directory?synd=open&cat=news
Depois que escolher qual deles irá colocar no seu site, você pode configurar o tipo de borda e tamanho que ele aparecerá, mas tenha cuidado ao configurar o tamanho a fim de não deixar muito pequeno para que não fique aparecendo somente uma parte do conteúdo.
Após isso é só pegar o código e colocar no seu site/blog. No Blogspot isto é feito pela pagina editar layout, adicionar elemento, html/javascript, então é só colar o código na janela que aparece e clicar para salvar.
Marcadores: Conteúdo, Sites Úteis
Barra de Endereço Animada
<script>
var repeat=1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",150)
}
if (document.title)
titlemove()
</script>
Coloque esse código pela página editar html antes da tag </head> 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.