18/12/2012

Big Tutorial: Slide no cabeçalho + Gadgets no cabeçalho


 Hayooo meus bunnys cuties! Ah pedido da blogueira Fer do blog Retardadas da Net, vim trazer esse tutorial que já estava pretendendo trazer como um "Big Tutorial" pela meta de 300 seguidores. Dentro de uma única postagem vou mostrar como fazer um cabeçalho igual no meu, completinho colocar o slide os gadgets e a base que fica eles. Ficara assim como fiz no meu theme Ice Cream.
Antes de tudo faça um backup do seu modelo, caso algo dê errado!

1º Passo: Remover o Cabeçalho

 

Agora precisamos excluir o cabeçalho atual do blog, ou seja o padrão que ele vem nos modelos Travel. Para isso vá em seu HTML e procure pelo Nome do seu blog exemplo, o meu se chama Bunny Crazy (Cantinho da Drw como era antigamente) então usando o atalho Ctrl+F irei procurar por ele você achara algo mais ou menos assim:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG' type='Header'/></b:section>

Agora apague toda a parte em negrito, vizualise pra ver se não deu erro ai salve.



2º Passo: Colocando novo Cabeçalho

 

Pegue a base principal que usara no fundo do blog, e hospede em algum site. E separe a URL dela. Agora vamos voltar ao blog no HTML do seu blog, aperte Ctrl+F e procure por: .tabs-inner { e quando achar, abaixo de padding: 0; cole:

background: url(Endereço da imagem aqui) no-repeat;
background-position:center;
padding-top: 600px;

Coloque a URL da imagem onde endica, e substitua o 600px,  pelo número da altura do seu cabeçalho. Visualize, e se seu cabeçalho estiver lá, salve. Deve ter percebido que o cabeçalho vai ficar um pouco longe do corpo do layout (área das postagens ecolunas do blog). Então, vamos dar um jeitinho nisso.

Salve o que já foi feito, e selecione Expandir modelos de widgets, usando o atalho Ctrl+F,  procure por:

/* Tabs

Quando achar o codigo acima, apague essa trexo: margin:1em 0 0;
Usando novamente o atalho, procure desta vez por:

/* Main


Agora, você vai ver que em baixo há padding: $(content.padding) 0; então abaixo desse código cole:

margin-top: -10px;

Vá aumentando o número ate que o cabeçalho esteja junto com o resto do blog (área das postagens e colunas), ou ate onde você desejar. Vá visualizando pra ver e se estiver tudo certo, salve.



3º Passo: Colocando o Slide


Agora vou mostrar como adicionar o slide, desmarque a opção Expandir modelos de widgets e procure usando o atalho por, </head> e acima dele adicione esse código, sem muda nada:




Depois de aplicar o código, procure por ]]></b:skin>, e acima dele coloque esse código:

 /*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:276px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 461px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */

overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links {
 display: none; }

Compreendendo melhor:

#bad5d9: Cor dos número não ativos
#b97ac9: Cor do número ativo

Agora salve! Eu coloquei a largura e a altura do mesmo tamanho que usei no meu de demostração. Agora prepare todas as imagens que vai usar, todas do mesmo tamanho que coloco na parte que esta em negrito. As hospede e guarde os endereços. Agora vá para:

Layout>> Adicionar Gadget >> HTML/JavaScript

E coloque esse proximo código dentro, colocando os endereços das imagens e os links que você desejar. Onde esta www.blogger.com não precisa mudar nada, eles  não vão funcionar no slide, é só para aparecer aquela mãozinha do mouse em cima dos números.(Ver Post Original do slide)


<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div> 

Salve, agora volte ao  HTML do seu blog, procure por: .main_view {
E quando achar, vai ver:

 .main_view {
float: left;
position: relative;
}

Apague toda essa parte colocando essa no lugar:

.main_view {
float: right; /* esta na esquerda, se o seu espaço for na direita bote: right; */
position: relative;
margin-top:-282px; /* Pra ele ir subir na altura do cabeçalho */
margin-right:250px; /* para ele ficar mais para a esquerda */

}

 Mude os número e á visualizando até ver que seu slide está no lugar onde deseja, depois e só salvar.


4º Passo: Gadgets no Cabeçalho



Tamos quase no finalzinho rsrs, agora vamos coloca um menu, pesquisa o que desejar no cabeçalho. Esse passo e conhecido como Objeto Flutuante, que já tem postado aqui no blog.

Agora vá em:

Layout>> Adicionar Gadget >> HTML/JavaScript

E antes do codigo do menu, ou outra coisa que você quiser que fique lá em cima flutuando, como um gadget de menus. Coloque esse código acima dele:

<div style="position: absolute; margin-top: -150px; left: 2px;">

E no final do codigo coloque:

</div>

Os números em negrito são para arrumar as posições e altura, não existe medida certa, o ideal e ir aumentando, diminuindo e ajeitando ate encaixar onde deseja, pós cada layout tem uma largura e tamanho. Bom e esse o Big Tutorial, espero que tenham gostado e comentem dizendo o que acharam. Beijinhos e ate a próxima.

17 comentários:

  1. Anônimo19/12/12

    Otimo tutorial, deu certinho!

    ResponderExcluir
  2. Oi, então eu não consigo .. na verdade nem consigo achar meu cabeçalho . Estou com um dos seus Layout > http://w-chanteste15.blogspot.com.br/ < e não consigo, pode me ajudar ?

    ResponderExcluir
    Respostas
    1. Bom me diga qual é o problema mais detalhadamente para que possa lhe ajudar.
      Você não consegue achar o cabeçalho dentro do lay free? Ou não esta conseguindo realizar o tutorial?

      Excluir
  3. eu fiz tudo, só que no final não apareceu o slide :((

    ResponderExcluir
    Respostas
    1. Colocou a imagens no mesmo tamanho ou coloco o slide no gadget?

      Excluir
  4. o meu as imagens fica uma do lado da outra pq?

    ResponderExcluir
  5. eu não entendi a parte do "E antes do codigo do menu, ou outra coisa que você quiser que fique lá em cima, antes do código que você deseja que flutue, como um gadget de menus. Coloque esse código acima dele:" pode me ajudar?

    ResponderExcluir
    Respostas
    1. Assim esse é um exemplo que dei. Se desejar colocar qualquer outro codigo no cabeçario é só usar o mesmo código. Porém repeti uma palavra e embolou tudo, peço desculpas por isso.

      Excluir
  6. Oie!
    Adorei seu tutorial, mas queria saber se com esse código o slide se ajusta de acordo com a resolução de diversos monitores? Porque eu tenho um slide no meu blog, e de acordo com cada monitor ele muda o posicionamento e aparece em um lugar diferente, e se a resolução do monitor for muito grande, o slide acaba atrapalhando o cabeçalho.

    Bjs bjs bjs Mih!
    Paradise Books || @ParadiseBooksBr

    ResponderExcluir
    Respostas
    1. Eu fiz teste e fica ajustado, mas as vezes tem exerções mas acho que vai do layout.

      Excluir
  7. Olá!
    Antes de tudo, eu amei o seu tutorial,é muito bem explicado!
    Mas gostaria de saber se pode usar o Nivo Slider em vez do com numeração. Pode?

    Beijos!

    ResponderExcluir
    Respostas
    1. Eu que agradeço e peço perdão a demora para responder. ^^
      Pode sim, dá certinho. ^^
      kiss, kiss

      Excluir
  8. Tem como colocar esse mesmo slide, no mesmo lugar, só que com as imagens redirecionando para a postagem correspondente?

    ResponderExcluir
    Respostas
    1. Tem sim ^^ basta fazer a postagem normalmente publicar e pegar o link da postagem e colocar no slide.

      Excluir
  9. Wendy, meu slide tá meio tortinho o que pode ser? aqui uma foto dele
    http://imgur.com/XA6tuhK

    ResponderExcluir
    Respostas
    1. Desculpe a demora amore tive uns probleminhas para acessar.Amore as imagens do slide estão todas do mesmo tamanho e do tamanho geral do slide?

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345