Menu Slide Com Imagem (Sidebar)


Olá gente! Hoje vou ensinar como fazer este menu novo que adicionei no blog. Querem aprender? Clique em Leia Mais logo! Vocês vão ver como dá para economizar o espaço da sidebar do blog de vocês ^^

As vezes tem tanta coisa para por numa sidebar não acham? Que tal economizar com este menu super lindo? O melhor? Você pode personalizar ele. Seja para um menu como o meu, ou para um 'giro' de novas postagens ou notícias, fica a seu critério isso! Vamos ao tuto!

DEMO

Blogueiro
Página para você que é blogueiro, aproveitar os melhores tutoriais!

Signos do Mês
Venha saber mais sobre o signo do mês de Dezembro!

Scrapbook
Venha saber mais sobre por onde o UT tem passado!



TUTORIAL

 Blogger

Modelo > Editar HTML > Prosseguir
Cole o código abaixo ANTES de </head>.

 WordPress (com hospedagem e domínio próprio)

Editor > Cabeçalho (header.php) > Cole antes da linha </head>.

<style type="text/css"> 
#s6 { width: 300px; height: 230px; border: 1px solid #ddd; background-color: #eee; } 
#s6 div { width: 270px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px;
#s6 div img { float: left; margin: 0 10px 10px 0; width: 200px; height: 200px; padding: 3px; background: #fff
#s6 div { top: 0; left: 0 } 
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript"> 
$('#s6').cycle({ 
    fx:     'scrollUp', 
    timeout: 6000
    delay:  -2000 
}); 
</script>

Editando:

Em Amarelo, são os tamanhos (Na primeira linha o tamanho total do menu e na segunda o tamanho interno - a área que o texto e imagem vai ocupar).

Em Rosa, é a borda do menu. No meu caso, eu não quis por, mas se você quiser, pode personalizar.

Em Azul, é a cor de fundo do menu.

Em Verde, é a área de personalização do texto (tamanho, cor, alinhamento).

Em Cinza, é a largura e a altura máxima da imagem.

Em Vermelho, é o fundo da imagem (como se fosse a borda, no meu caso é azul).

Em Laranja, é a velocidade (tempo) em que o slide muda.

Sem problemas até aí? Salve e vamos continuar!

Agora, adicione um gadget HTML/JavaScript e nele cole:

<div id="s6"> 
            <div> 
                <img src="URL_da_IMAGEM_1" width="200" height="200" /> 
                <p>Escreva aqui um texto de descrição ou link...</p> 
            </div> 
            <div> 
                <img src="URL_da_IMAGEM_2" width="200" height="200" /> 
                <p>Escreva aqui um texto de descrição ou link...</p> 
            </div> 
            <div> 
                <img src="URL_da_IMAGEM_3" width="200" height="200" /> 
                <p>Escreva aqui um texto de descrição ou link...</p> 
            </div> 
</div>

Nesse código você só precisa colocar o URL das imagens(em Roxo), editar o tamanho das mesmas (deve ser o mesmo do código anterior) e escrever a sua descrição(em Itálico).

Prontinho? Espero que tenham curtido esse tutorial que eu aprendi no Ferramentas Blog, um dos melhores blogs de tutoriais *-*