Dicas para Blogs e Sites: maio 2009

Criar um menu expansível no blog

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache </head> então coloque isso antes dela:

<script src="https://sites.google.com/site/tutoriaisblogger/menu-expan.js" type="text/javascript"></script>

Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}

Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina designer, adicionar gadget, html/javascript e cole esse código:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">

</script>

Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.

Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:

<div id="CollapsiblePanel1" class="CollapsiblePanel1">

e no final:

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.

Fizemos uma atualização neste tutorial: 24/04/2010

Veja também:
Como colocar menu com sub menu no blog
Barra de rolagem na lista de blogs
Usar palavras chave e descrição no blog para ganhar mais visitas

Marcadores: Acessórios, Efeitos, Scripts

Postagem Expansível com Miniatura da Imagem

Muitas pessoas perguntam sobre como fazer aparecer somente um resumo da postagem e no final escrito leia mais… para clicar e ver a postagem completa encontramos um código que faz isso e ainda mostra uma miniatura da imagem junto com esse resumo do texto, ou seja, é um dos melhores jeitos de mostrar um link leia mais para postagens expansíveis. Além disso, não é necessário fazer alteração alguma nos texto que você já publicou quando colocar os códigos todas as postagens mudam automaticamente para o sistema expansível. Uma coisa indispensável para esse código funcionar é verificar se nas configurações, guia arquivamento a opção Ativar páginas de postagem? tem que estar habilitada(selecionado o sim). Caso contrário não será possível fazer as postagens expansíveis. Outra coisa necessário é deixar as configurações do feed na opção completa (Miniaturas das Imagens não aparecem) para que esse código funcione perfeitamente.

Entre na pagina editar html(não clique para expandir o modelo) e procure pela tag </head> e coloque esse código antes dessa tag.

<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://acessoriosparablogs.com.br/scripts/resumopost.js' type='text/javascript'/>

Clique para salvar depois clique para expandir o modelo e procure por < data:post.body/ > apague essa linha e cole esse trecho no lugar:

<p><b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType != "index"'><data:post.body/></b:if></p>

Clique para visualizar o blog e se estiver tudo certo salve as alterações no modelo e já está tudo pronto, agora seu blog mostra apenas um resumo da postagem e uma miniatura da imagem e quem gostar pode clicar para ver o texto inteiro.

Se quiser podemos personalizar esse código mudando a quantidade de caracteres que aparecem no resumo e o tamanho da miniatura da imagem, veja abaixo:

summary_noimg = número de caracteres do resumo se o texto não tiver imagens
summary_img = número de caracteres do resumo se o texto não tiver imagens img_thumb_height = Altura da miniatura da imagem
img_thumb_width = Largura da miniatura da imagem

Na segunda parte do código tem escrito 'data:post.url'>Leia mais...</a> esse leia mais é o texto que aparece para clicar e expandir a postagem então você pode escrever o que desejar aqui, mas cuidado para não apagar os sinais do código, modifique deixando o trecho assim 'data:post.url'>Texto aqui</a>. Para formatar esse texto entre na pagina editar html e coloque junto com os estilos CSS isso aqui:

.rmlink a{border: 1px solid #666666}
.rmlink a:hover{border: 1px solid #000000}

aqui coloquei apenas bordas para dar um exemplo, mas pode usar qualquer tipo de formação CSS que desejar.

Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem, mas se quiser ver o outro jeito tem na Ajuda do Blogger.

Se quiser veja o blog Meu Jornal estou usando esse código nele para demostração.

Fizemos uma atualização (05/10/2010) do código para ele mostrar o resumo das postagens somente na pagina inicial do blog, assim não gera mais conflito(problemas) com as paginas extras do blogger(Paginas extras para o Blogspot).

Veja também:

Mostrar resumo das Postagens
Fazer menu com submenu
Formatar o texto usando CSS
Imagem seguindo o ponteiro do mouse
Mostrar o número total de postagens e comentários
Colocar imagem na barra de endereços

Marcadores: Acessórios, Códigos, Personalizar, Template

Como Fazer uma Postagem Fixa na Pagina Inicial do Blog

Conseguir deixar sempre a mesma postagem no inicio do blog não é possível, mas existe um jeito de fazer isso, basta adicionar um gadget e colocá-lo em cima da postagem, assim vai parecer que é sempre a mesma postagem está fixa no inicio do blog.

O primeiro passo é preparar o texto que vai ficar no inicio do seu blog, pode colocar até imagens se quiser, mas neste caso hospede as imagens no ImageShack, assim ficará mais fácil na hora de publicar. Após já ter o conteúdo pronto vamos entrar na pagina layout do blog, clique para adicionar um gadget e escolha a opção html/javascript.

Coloque o seu texto e o código da imagem(se quiser) e clique para salvar depois é só clicar sobre o gadget e posicionar em cima do gadget das postagens e já está pronto agora o seu blog terá sempre esse texto no inicio.

Mas ainda podemos melhorar isso um pouco se quiser colocar um titulo com formatação diferente use esse código lugar do título.

<span style="font-size:18pt; text-align:center">Titulo Aqui</span>

Isso é uma formatação normal em CSS então pode modificar como desejar. Outro detalhe que melhora muito a aparência da postagem é colocar a imagem com texto em volta dele, como normalmente fazemos para fazer isso só precisa adicionar esse trecho style="float:right; margin-left:3px"> no código da imagem que ficará assim:

<img src="endereço da imagem" border="0" style="float:right;
margin-left:3px">

A palavra right faz a imagem ficar a direita e usamos margin-left depois para dar um pequeno espaço entre a foto e o texto(3px), porém se quiser a imagem do outro lado é só trocar de lugar as palavras right e left no código.

Veja também:
Formatar texto em CSS
Como Hospedar Imagens
Como destacar uma parte do Texto
Código para mostrar dia da semana e do mês

Marcadores: Personalizar

Pesquisa dentro do blog

Para colocar uma caixa de busca no blog e permitir que nossos visitantes façam pesquisas dentro do blog é uma coisa bem útil e facilita que as pessoas encontrem o que procuram. Usamos o seguinte código:

<div align="center"><FORM method=GET action="http://www.google.com.br/search">
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Pesquisar">
<input type=hidden name=domains value="endereço do seu blog"><br><input type=radio name=sitesearch value="">Web<input type=radio name=sitesearch value="endereço do seu blog" checked>Neste site<br>
</FORM></div>

Se quiser pode modificar o tamanho do campo de texto mudando o numero 25, outra coisa é o texto Neste site você pode escrever o que desejar, por exemplo o nome do seu blog.

Isso faz o Google pesquisar as palavras digitadas somente dentro do endereço que colocamos no local indicado, assim fica fácil achar qualquer coisa no blog. Você só precisa colocar o endereço do seu blog nos locais indicados no código e depois colocar o código pela pagina layout, adicionar gadget, html/javascript e já está pronto.

Se quiser você pode criar um código parecido com esse no site do Adsense e além de mostrar um sistema de busca no seu blog ainda pode ganhar algum dinheiro quando as pessoas utilizarem as pesquisas Google através do seu blog. Se quiser personalizar a pesquisa (cores e imagens da caixa de busca), poderá achar explicações detalhadas neste link que acabamos de mostrar.

Veja também
Formatar o texto do blog
Veja recursos extras do Google
O que você procura em um blog?

Marcadores: Códigos, Iniciantes

Aparecer na Pesquisa de imagens Google

Como fazer para as imagens do meu blog ou site aparecerem nos resultados da pesquisa Google de imagens, essa é um boa pergunta, mas tem algumas dicas que ajudam muito para conseguir. Aproveite e veja como colocar uma caixa de pesquisa dentro do seu blog, isso facilita as pessoas acharem o que procuram no seu site usando uma pesquisa google feita dentro do seu blog.

A pesquisa Google de imagens procura pelo nome do arquivo então na hora de salvar a imagem que usará no blog escolha bem o nome da imagem. Não use nomes como img3484, foto, imagem, esses nomes não dizem praticamente nada sobre o que é a foto. Então se for publicar uma foto de cachorro, por exemplo, use como nome da imagem cachorro-labrador, filhote, filhotes-lindos, ou qualquer coisa do tipo, use o traço para separar as palavras.

Outra coisa importante é usar o atributo alt no código da imagem, veja abaixo:

<a href="url do site"><img src="endereço da imagem" alt="Filhote de Labrador" border="0" /></a>

Procure escrever um tipo de descrição da imagem, continuando o exemplo do filhote de cachorro que usei acima poderíamos usar assim Lindo filhote de Labrador ou alguma coisa do tipo, que ajude a dizer qual o conteúdo da foto ou imagem que publicamos e isso certamente ajudará sua imagem aparecer nos resultados do Google.

Claro que usar essas técnicas não é garantia que suas imagens aparecerão nos resultados das pesquisas, afinal muitos sites fazem o mesmo, mas isso funciona de verdade, depois que comecei escolher melhor o nome do arquivo e usar o alt já recebi algumas visitas vindas de buscas de imagens. Usamos como base para fazer essa explicação a página de Ajuda para Webmasters do Google, nela você encontra essa explicação sobre imagens e muitas outras coisas.

Veja também
Como aparecer nos resultados do Google, Yahoo e outros
Descrição e Palavras Chave(meta tag)
Código para Adicionar aos Favoritos
Enviar suas atualizações por E-mail

Marcadores: Mais visitas, Seo

Fazer backup do Blog

Para não correr riscos de perder as coisas que já publicou no seu blog é bom fazer um backup de todas suas postagens e também do modelo que usa atualmente. Então vamos mostrar como é simples salvar uma cópia do seu blog no computador para poder usar em caso de algum problema.

Fazer um backup do blog é bem simples, entre em configurações e clique em exportar blog, vai abrir uma janela de download como se estivesse baixando qualquer outro arquivo, o tempo que vai demorar esse download varia conforme o numero de postagens que já fez. Isso vai salvar o seu modelo e todas suas postagens.

Isso é diferente do backup feito na pagina editar html onde vemos escrito Antes de editar o modelo, é recomendável salvar uma cópia do mesmo. Baixar modelo completo, isso vai salvar apenas o código do modelo do blog e não as postagens.

Veja também:
Como melhorar seu blog
Mostrar o total de comentários e postagens
O que as pessoas procuram em um blog
Como ganhar dinheiro com o blog

Marcadores: Iniciantes, Segurança

Destacar uma parte do texto

Em diversas ocasiões queremos dar destaque para um trecho de nosso texto, então às vezes usamos o texto em negrito ou itálico, porém existe outro jeito bem simples e muito melhor para deixar uma parte do texto bem diferente de todo o resto.

Fazendo uma caixa de outra cor com essa parte que vamos dar destaque, o código é assim:

<div style="width: 300px;padding: 3px;border: 1px solid #000000;background-color: #CCCCCC;">Seu texto escrito aqui</div>

Para deixar essa caixa de texto em destaque do jeito que combine melhor com o seu blog, vamos entender como modificar o código.

width: 300px largura da caixa se quiser pode apagar essa linha e a caixa ficará com a maior largura possível.
padding: 3px margem entre o texto e as bordas
border: 1px solid #000000 espessura, estilo e cor das bordas, vejam mais sobre como fazer e alterar bordas.
background-color: #CCCCCC; cor de fundo veja o código de outras cores.

Então seguindo essas explicações fica fácil modificar a formatação dessa caixa de texto em destaque no seu blog, você pode usar isso nas colunas ou nas postagens do blog e se quiser pode até colocar imagens dentro da caixa, apenas observe para a largura da imagem não ser maior do que a própria caixa.

Veja também:
Dar Destaque em uma Parte do Texto (blockquote)
Formatar texto(negrito, itálico, tamanho e tipo de letra)
Efeito semi transparente em imagens

Marcadores: CSS, Efeitos, Iniciantes

Fazendo exibição de banners em posição randômica

Este script serve para quando você possui vários parceiros ou banners e recebe reclamações que os banners ficam muito em baixo ou ficam questionando você por que o banner de ciclano está lá no topo e o dele não. Para resolver este problema criei este sistema de randomização de banners que a cada vez que a página é recarregada os banners aparecerão em ordem aleatória na página.
Este script você colocará no local onde aparecerão os banners, então entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:

<script type="text/javascript">
/* Esta função irá fazer o randômico dos banners */
function randOrd()
{
return (Math.round(Math.random())-0.5);
}
/* Função que irá ecrever os banners na tela*/
function randBan(){
var parceiros = new Array();

/* Aqui você coloca a quantidade de banners que você irá rotacionar, voce pode criar de parceiros[0] até parceiros[N]. O exemplo abaixo é o exemplo usado em meu site que é exibido a lista de banners um abaixo do outro (colocarei apenas 3 banners para nao enxer muito a tela de código)*/
parceiros[0]='<a href="http://www.caixapretta.com.br" target="_blank" title="Caixa Pretta - Desligue a TV e vá ler um blog!"><img border="0" src="http://www.caixapretta.com.br/wp-content/themes/caixapretta/imagens/banner_cp.jpg"/></a>';

parceiros[1]='<a href="http://www.ocioso.com.br/default.asp" target="_blank" title="Está no seu momento de descanso né? Entao clique aqui!"><img border="0" alt="Está no seu momento de descanso né? Entao clique aqui!" src="http://www.ocioso.com.br/imagens/icone.gif"/></a>';

parceiros[2]='<a href="http://www.chongas.com.br" target="_blank"><img border="0" alt="As novidades da internet" src="http://i178.photobucket.com/albums/w268/lamenza/selo_chongas_120x60px.gif"/></a>';

//Aqui iremos randomizar a posição dos banners
parceiros.sort( randOrd );

//Aqui iremos escrever os banners em sua ordem aleatória
for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');
return;
}
randBan();
</script>

Salve e verifique se os banners estão alternando, depois disso basta você trocar os endereços dos site e imagens como quiser. Para colocar mais banners basta continuar repetindo a função parceiros[2]='....', claro que dando continuidade a numeração.

Veja também:
Mostrar Banners ou Imagens Aleatórias
Banners Deslizando
Colocar barra de rolagem no blog

Dica enviada pelo Site Boas Promoções

Marcadores: Códigos, Scripts

Enviar para Redes Sociais

Um bom jeito de conseguir mais visitas para o seu blog é colocar os botões para enviar suas postagens para as redes sociais, assim além de você qualquer pessoa que visitar seu blog pode indicar suas postagens para um desses sites e assim gerar um aumento no numero de visitantes do seu blog.
Para colocar esses links para redes sociais clique aqui e baixe o código completo, ele contém imagens com links para enviar as postagens do seu blog para o Dihitt, Twitter, Ocioso, Technorati, Blogblogs e muitas outras.

Depois entre na pagina layout, e coloque o código abaixo junto com os outros estilos CSS do seu blog, pode ser logo depois que fechar o estilo body{......}

.redesocial img{padding: 5px;display: inline}

Isso faz que as imagens das redes sociais apareçam uma do lado da outra, clique para salvar, agora clique para expandir modelos de widgets e procure por:

<div class='post-body entry-content'>

<data:post.body/>

Coloque o código que baixou em nosso link depois da linha acima, e clique para visualizar o blog, deve aparecer seu blog com o botão de varias redes logo após cada postagem. Junto com os botões das redes sociais colocamos como ultimo item na lista um botão com o link dessa postagem, é uma forma de permitir que outras pessoas achem facilmente esse código a partir do seu blog por isso pedimos para não retirar o ultimo botão do código.

Veja também:
Como usar um arquivo no formato Zip
Botão do Dihitt
Como divulgar seu blog
Mostrar suas notícias mais votadas no Dihitt
Como fazer seu blog aparecer nas pesquisas Google, Yahoo e outras

Marcadores: Conteúdo, Mais visitas, Scripts

Como Colocar Submenu no Blog

Colocar um submenu no blog é um pouco mais complicado que um menu normal. Para não deixar duvidas um submenu é quando você passa o mouse pelo menu e sobre algum item aparecem mais opções, por exemplo, um menu de um blog de downloads tem musica, jogos, filmes, games e outros itens, quando você coloca o mouse sobre o item filmes aparece um novo menu ao lado com os itens suspense, terror, comédia, adulto...

Veja nosso novo tutorial sobre: Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger

Agora que já explicamos como funciona o submenu vamos começar a dizer como colocar um no seu blog. Entre na pagina layout, adicionar gadget, html/javascript e coloque o código abaixo, por ser um código grande pode haver algum problema com o código em copiar e colar direito do blog, então temos aqui o mesmo código pronto para download.

<style type="text/css">

</style>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="link do Item 1.1">Item 1.1</a></li>
<li><a href="link do Item 1.2">Item 1.2</a></li>
<li><a href="link do Item 1.3">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a href="link do Item 3.1">Item 3.1</a> </li>
<li><a href="link do Item 3.2">Item 3.2</a></li>
<li><a href="link do Item 3.3">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p>
<script src="http://acessoriosparablogs.com.br/scripts/submenu.js" type="text/javascript"></script>
<script type="text/javascript">

</script>

Vamos falar sobre o item 1, isso é o texto que vai aparecer no seu blog, o link dele é daquele jeito mesmo só um sinal de jogo da velha, os subitens é só trocar onde está Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.

Você deve colocar esse código onde aparecerá o menu horizontal com submenu, lembre-se que se o espaço (largura) do seu blog não for suficiente para o menu completo um ou mais itens vão para linha debaixo, portanto é preciso ter cuidado com o numero de itens e a largura do botão para alterar a largura de cada botão mude o valor 150px, veja no código ele aparece 4 vezes width: 150px; você deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.

Para mudar as cores, letras, fundo e tudo mais dos botões é nesta parte do código:

ul.MenuBarHorizontal a
{background-color: #6633FF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
border-right: 1px solid #0000CC;
border-bottom: 1px solid #0000CC;
border-left: 1px solid #FFFFFF;
font-size: 120%;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
width: 150px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

E o estilo quando o mouse está sobre ele é aqui:

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}

Veja aqui uma demostração do menu com sub menu. Para fazer modificações nos botões é como se fosse qualquer outra coisa feita em CSS, então veja nossas dicas sobre:

Fazer e colocar botões
Mudar a imagem de fundo
Código das Cores
Como abrir e usar um arquivo no formato .zip

Marcadores: CSS, Efeitos, Scripts

Links lado a lado (menu horizontal)

Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas linhas de CSS, se quiser fazer o mesmo com imagens veja aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets. Além disso uma outra forma de colocar um bonito menu no seu blog é usar um menu accordion no blog (menu sanfona).

Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:

<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;

}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>

Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.

No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.

A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.

As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.

Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
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, Configurações Avançadas, Scripts, Template

Hospedar Arquivos para Download

Para os blogs de downloads de filmes, musicas, programas e outras coisas uma das coisas mais importantes saber onde e como hospedar seus arquivos que serão baixados pelos visitantes, então aqui estão algumas dicas de sites para hospedar os arquivos para download gratuitamente e às vezes é até possível ganhar dinheiro com os downloads feitos pelos visitantes do seu blog.

RapidShare
Site em inglês, não é necessário cadastro para enviar arquivos para o site.

Limite máximo do arquivo: 200MB.
O arquivo é excluído automaticamente após 90 dias de inatividade, mas se você fizer seu cadastro, os arquivos não são apagados.
A cada arquivo transferido (baixado) você ganha um ponto, porém, o arquivo deve ter um um tamanho maior que 5 megabytes, além de na última hora o usuário não ter ganho mais que 3 rapidPoints, depois é possível trocar esses pontos por prêmios.

Easy Share
Site em inglês, não é necessário cadastro para fazer o upload do arquivo.
Para quem é cadastrado pode-se fazer o upload também através de FTP.

Você pode ganhar dinheiro (ePoints) com o Easy Share, envie arquivos para o serviço (divulgue seus links), quanto mais baixarem seus arquivos mais você ganha; ao juntar 15.000 ePoints, pode-se solicitar no site 1 mês de conta premium, ou o resgate do dinheiro
Seus arquivos serão removidos se ficar mais de 30 dias sem fazer login no site.

4shared.com
Site em português, mas com algumas partes em inglês. Para enviar arquivos é necessário cadastro.
Possui um buscador de arquivos aberto a qualquer pessoa, isto é, busque e faça o download.

Tempo dos arquivos: deve-se logar ao menos uma vez a cada 30 dias para que a conta não seja excluída (inclusive os arquivos).
Você pode ganhar dinheiro com os downloads de seus arquivos, pois você ganhará ePoints cada vez que alguém baixar seus arquivos. Você vai fazer até 2 ePoints por download, com base no país de origem do usuário que baixar seu arquivo:
2 ePoints - Austrália, Áustria, Bélgica, Canadá, Dinamarca, Alemanha, Grã-Bretanha, Grécia, França, Finlândia, Irlanda, Itália, Holanda, Noruega, Portugal, Suécia, Espanha, Singapura, Arábia Saudita, EUA
1 ePoint - Brasil, República Checa, Índia, Japão, Malásia, México, Turquia, Polônia, Rússia, Ucrânia
0,1 ePoint - outros países

As informações foram retiradas do setor de ajuda dos próprios sites. Geralmente o melhor formato para hospedar um arquivo é .zip, veja como criar arquivos no formato .zip, pois é mais fácil achar hospedagem e o arquivo fica menor ou seja quando você colocar o arquivo no site ou alguém fizer o download do arquivo isso acontecerá mais rápido.

Marcadores: Conteúdo, Iniciantes, Sites Úteis