20 de set de 2010

Como colocar Slide no Cabeçalho do Blog

Bem pessoal, posto hoje como Colocar Slide no Cabeçalho do blog. Este tutorial foi um pedido de meu amigo Animandré (pra quem não o conhece, ele é o dono do Blog Animação é coisa séria, mas divertida!, que por sinal, é um ótimo Blog ). Bem, sigam o tutorial abaixo, e boa sorte!

No painel de seu Blog vá em Design//editar Html, procure  utilizando CTRL+F, por </head>. Abaixo da mesma, cole o seguinte código:



 <script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>
 <script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>


Agora, procure po
]]></b:skin>
 e cole este segundo código, antes dele:




#myGallery{
width: 960px !important;
height: 200px !important;
overflow: hidden;
}

Salve as alterações e click em "Elementos da Página"

Os números em Azul podem ser alterados de acordo com as dimensões de seu cabeçalho, lembrando que as imagens também deverão ter as mesmas dimensões.

Agora Copie este código e adicione-o como um gadget,substituindo o que se pede:

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: true,
showCarousel: false,
});
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<a class="open" href="Endereço do Blog"/>
<img src="Url da imagem" class="full" />
<h3>Título do Texto</h3>
<p>Descrição </p>
</a></div>

<div class="imageElement">
<a class="open" href="Endereço do blog"/>
<img src="Url da Imagem" class="full" />
<h3>Título</h3>
<p>Descrição</p>
</a></div>

<div class="imageElement">
<a class="open" href="Endereço do Blog"/>
<img src="Url da imagem" class="full" />
<h3>Título</h3>
<p>Descrição</p>
</a></div>

<div class="imageElement">
<a class="open" href="Endereço do Blog"/>
<img src="Url da imagem" class="full" />
<h3>Título</h3>
<p>Descrição</p>
</a></div>

</div>

Agora exclua o antigo cabeçalho (click aqui se não souber excluir-lo) e mova o Slide para o local que era ocupado pelo cabeçalho.

Pronto! Seu cabeçalho/Slide está Pronto!


Se você deseja algum tutorial, visite este post que deixei exclusivamente para isso, e peça o seu! Farei o máximo para lhe ajudar ;) Ou deixe um comentário aqui mesmo!

Fonte: Qualo . Editado e modificado por DTP ;)




Gostou deste post? Então assine o feed deste blog ou se preferir receba todos os conteúdos Gratuitamente por email. Ah! O Blog está participando do ToPBlog! dá uma ajudinha aí!

23 Comentários:

sayonara disse...

Olá!!
Amei este tutorial coloquei no meu blog e ficou D+. Valeu obgda!

Say disse...

ola Andre!
Neste slide tem como tirar aquela faixa que aparece quando muda o slide onde esta escrito titulo do texto e descrição. Se tiver voce me mostra como fazer. Não que atrapalhe, mas para ter mais uma opção de ter com nome do slide ou sem ok! beijos que Deus continue te abençoando!!

Alex- Admin disse...

Olá Say! Desculpe a demora em lhe responder... Logo mais postarei o Slide com tais configurações, e mostrarei com fiz!
Obrigado pelo comentário!

Say disse...

Andre
obgda pela sua atenção as suas dicas são otimas e tem me ajudado bastante. E u monto blog e seu slide ficou otimo e meu cliente adorou. Gostaria tbém de saber se tem jeito de colocar nome no titulo do slide.
bjs
Que Deus te abençoe!
olha como ficou bom
http://pousadaportaldoitambe.blogspot.com/

Alex- Admin disse...

Olá Say! Obrigado pelo comentário! Que bom que a postagem lhe ajudou! O Slide no Blog ficou bom mesmo! Olha, só não entendi sua pergunta quanto a "Colocar nome no Título do Slide". Tem como você me explicar? Talvez eu possa lhe ajudar!
Desde já agradeço a visita! Até+

Say disse...

Andre
Cada slide tem um titulo de descrição. Caso queira dar nome a cada foto. Isto que gostaria de saber se é possivel escrever o nome de cada foto slide. Se puder me ajudar ficarei grata.
bjs

Alex- Admin disse...

Olá Say! Onde está escrito "Título" no código do Slide (aquele que você adicionou como Gadget), você deverá colocar o Nome da foto, e onde está "Descrição', se quiser, você pode falar sobre ela.
Perceba, que, no Slide, ao passar cada imagem, aparece uma barra com o Nome Título, que é onde você colocará o Nome da imagem.
Tipo: Se eu colocasse este Slide aqui no Blog, e colocasse uma imagem, por exemplo, do CorelDraw, em "Título", eu colocaria o nome CORELDRAW, e na descrição, falaria um pouco sobre o Software. Entendeu? Espero ter ajudado!

Anônimo disse...

Adorei a dica, mas eu queria que o slide ocupasse todo o espaço da pagina lá em cima, sabe? De esquerda a direita, tudo preenchido. Isso é possível?

Alex- Admin disse...

Olá! "Anônimo". Basta que você modifique esta parte no código:

#myGallery{
width: 960px !important;
height: 200px !important;
overflow: hidden;
}

Alterando os valores 960 e 200 pelos valores correspondentes à sua Página!
Obrigado pelo comentário!

Anônimo disse...

Ah, sim, só que o slide começa centralizado e continua, e assim fica uma parte da esquerda não preenchida. Queria que ele começasse alinhado a esquerda, assim preenchendo toda a largura da página. Aliás há tempos que estou tentando achar um tutorial pra fazer um cabeçalho que ocupe a página inteira lá em cima. Se souber, me ajude!

Rudney disse...

Oi eu gostaria de fazer um slide igual desse blog aqui toninhokalunga.blogspot.com

Guilherme Mazone disse...

Olá, não achei aonde ta escrito "Elementos da Página", aonde que fica ?

City ville disse...

Como faço para desfazer tudo isso ?

Livia Arte e Fotografia disse...

gente eu exclui o cabeçalho mas agora quero de volta to desesperada o que faço? me judem por favor! Obrigada

Luci Arteira disse...

Boa Noite,não estou conseguindo achar a palavra "HEAD" !

stallonge disse...

Valeu amigo sou novo nisso e você e 10 para ajudar que deus o abençoe

VII Copa Primo Fernandes disse...

Amigo, no meu não dar certo, pq aparece um erro no HTML4, o meu é desses mais novos, não é o antigo, o que faço pra concertar isso, ou não tem como?

Enrico rosato de deus disse...

cara temtei fase mas não comsegui poderia faser pra min ce puder meu e mail é esse enricorosatodedeus@gmail.com

breno disse...

Amigo eu fiz todos os passos conforme você falou, porem as imagens não aparecem, acontece apenas o slide das descrições,a imagem aparece, não fica nem 2segundos e passa pros slide só as descrições,se puder me ajudar dês de já agradeço

Anônimo disse...

olápf me ajuda? =/ bom pra fazer os slides a imagem tem que ter url né,então todas as imagens tenho que por no google?pode no flickr tbm??? ajuda plisss

Julliet Yanks Walker disse...

Ooi oq ér a image element? eu tenho quee mudar algo la?

O seu parceiro de negócios. disse...

O efeito no seu blog é otimo mas as imagens nao aparecem, estao hospedadas no picasa

Mariana Fernandes disse...

Olá, adorei mesmo o seu blog. Você explica tudo de forma muito clara e precisa, além de ter me ajudado muito com algo que quase ninguém conseguiu me informar direito. Obrigada pela iniciativa!

Postar um comentário

Todos os comentários a partir de hoje serão moderados!
Porém isso não impede de comentar ;)
Não é permitido:
1-Palavras ofensivas
2-Palavras torpes
3-Falar mal de outro Blog ou Blogueiro
4-Não deixar comentário ;)

  ©Detudoumpouco - Todos os direitos reservados.

Template by Dicas Blogger Personalizado por: Alex| Topo