12/24/2014

Slide No Cabeçalho+Gadgets Também.

O tutorial de hoje é do blog Bunny Crazy espero que gostem e se usar credite~Kisses
                                         
Oi jujubinhas tudo bom??Hoje eu fiquei bem animada e decidi postar aqui no blog um Tutorial e Goodie aqui no blog,como vocês sabem eu sou fã de tutoriais,html,e scripts e bom hoje decidi postar um tutorial que envolvesse isso :) .Eu vi esse tutorial no blog Bunny Crazy que é muito legal,e tem vários tutorias e dicas!
Espero que ajude a vocês e que vocês gostem!!Ai vai o tutorial:
--------------------------------------------------------------------------------------------------------------------------
1-Passo:Excluir o Cabeçalho do Seu Blog:
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 Bobagens da Vitória.Então usando o atalho Ctrl+f  procure e você irá achar 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 essa parte e visualize caso tenha dado algum erro.
-------------------------------------------------------------------------------------------------------------------------
2-Passo:Colocando o 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; e cole:
background: url(endereço da imagem aqui) no-repeat; background-position:center; padding-top: 600px;
 Coloque a URL da imagem onde indica, e substitua o 600px, pelo número da altura do seu cabeçalho. Visualize,okVeja 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 e gadgets do blog). Então, vamos dar um arrumar isso. Salve o que já foi feito, e selecione Expandir modelos de widgets, usando o atalho Ctrl+F, procure por: /* tabs
/* tabs



Quando você achar o código acima, apague essa trecho:
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 até que o cabeçalho esteja junto com o corpo do layout (gadgets,postagems etc.),e se deu tudo certo salve.
--------------------------------------------------------------------------------------------------------------------------
3-Passo:Colando o Slide:
Desmarque a opção ''Expandir Modelo'' e procure por:
</head>
E acima dele adicione esse código e não altere nadinha:
 <!-- JavaScript Slider Horizontal - Inicio--><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script><br /> <!-- JavaScript Slider Horizonta - Fim-->
Agora procure por:
]]></b:skin>
E acima do código procurado cole:
/*--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; }
Entendendo melhor:
 #bad5d9: Cor dos número não ativos
 #b97ac9: Cor do número ativo
 Agora salve. 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 em nada, eles não vão funcionar no slide, é só para aparecer aquela mãozinha do mouse em cima dos tais  números.
<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>
Agora procure por:
 main_view {
E quando achar você encontrará mais ou menos isso:
 .main_view { float: left; position: relative; }
Apague tudo isso e cole 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 */ }
Vai mudando os números até ver que o slide está no lugar em que você deseja.
-------------------------------------------------------------------------------------------------------------------------
4-Passo:Gadgets No Cabeçalho:
Já tá quase acabando,agora vá em Layout,adicionar gadget e selecione HTML,e antes de qualquer código ou gadget abaixo do cabeçalho cole isso:
 <div style="position: absolute; margin-top: -150px; left: 2px;">
E no final do código cole:
 </div>
 Os tais 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, pois cada layout tem uma largura e tamanho.E bom esse é o Big Tutorial,espero que tenha te ajudado e comentem se deu certinho!!
~Kisses.
Ver Postagem Original.





Nenhum comentário :

Postar um comentário