Menu Slide para Rodapé (Footer)

victoria's secret, angel, angels, blonde

Olá lindo e lindas, como estão? Hoje o dia está friozinho por aqui! Vim enfim postar o tutorial que me pediram, muita gente já ficou curioso desde que postei. É esse slide que você pode ver no rodapé do blog, que se assemelha ao slide do site CAPRICHO, e muita gente já havia procurado como fazê-lo, mas sem êxito. Vamos lá? Clique em Leia Mais!


O slide que tanto falo gente, é esse abaixo:


Esse slide aí, para que não sabe, é feito por profissionais em WebDesign, já que envolve HTML, JavaScript e CSS. Além disso, o tutorial que aprendi foi em inglês e foi tudo na marra! KK

Mas, como eu sou muito boa u_u eu facilitei para vocês poderem também instalar slide semelhante no blog de vocês. Vamos lá? Antes, leia os avisos:


AVISO: Bem gente, o aviso é o seguinte, é que durante meus incansáveis testes com esse tipo de slide, o 'Carousel', outros slides já instalados no blog não funcionaram normalmente como de costume. Então, se você deseja esse tipo de slide no blog, fique atenta que em alguns blogs só poderá ter ele como slide.

AVISO 2: O aviso dois, é que eu recomendo que vocês comecem a editar este slide fora do blogger, assim, você já confere se ele funcionará no mesmo. Eu recomendo usar o Real-time HTML Editor, mas se você possui outro melhor, utilize esse então.


Vamos ao tutorial então!

TUTORIAL

Layout > Adicionar Gadget HTML/JavaScript:

Vamos ir com calma, porque o código é grandinho (mas tudo deve ficar no mesmo gadget), tá bem?


<a href="http://www.uprisingteen.com/" target="_blank" title="Widgets"><img src="https://lh4.googleusercontent.com/-JptxMHp_H7o/US6Ig8d2soI/AAAAAAAAHC0/nisWc9WrpTs/s37/logo.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://uprisingteen.webs.com/Java_Slider_Carousel_Footer1.js' type='text/javascript'></script>
<script src='http://uprisingteen.webs.com/Java_Slider_Carousel_Footer2.js' type='text/javascript'></script>
<script src='http://uprisingteen.webs.com/Java_Slider_Carousel_Footer3.js' type='text/javascript'></script>

Nesse primeiro código, são os Scripts. Não altere absolutamente, NADA.


<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:4,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#mycarousel-next-button').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#mycarousel-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
Nesse segundo, mexemos com as Funções do Slide (JavaScript), ok? Não é necessário e nem recomendado alterar nada.

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px; /* Borda Arredondada */
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 920px; /* Largura do Slide */
margin: 0 auto;
padding:0 0px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
top: 0px;
width:920px; /* Largura do Slide */
height: 100px; /* Altura do Slide */
}
.jcarousel-skin-tango .jcarousel-item {
width: 115px; /* Largura do Lugar onde Ficam as Imagens (Item) */
height: 100px; /* Altura do Slide */
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px; /* Margem Esquerda do Item do Slide */
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff; /* Cor do Item do Slide */
color: #000; /* Fonte do Item do Slide */
}
/* Código da Seta para Avançar (Direita) */
.jcarousel-skin-tango .jcarousel-next-horizontal {
background: url(IMAGEM AQUI) no-repeat scroll -0px 0;  /* Imagem da Seta */
width:70px; /* Largura da Imagem */
height:69px; /* Altura da Imagem */
right:-50px; /* Margem Direita (Ajuste para ficar certinho se necessessário) */
position:absolute; /* Não altere */
top:20px; /* Margem do Topo (Para a seta ficar mais para baixo) */
}
/* Código da Seta para Voltar (Esquerda) */
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background: url(IMAGEM AQUI) no-repeat scroll 0 0; /* Imagem da Seta */
width:70px; /* Largura da Imagem */
height:69px; /* Altura da Imagem */
left:-50px; /* Margem Esquerda (Ajuste para ficar certinho se necessessário) */
position:absolute; /* Não altere */
top:20px; /* Margem do Topo (Para a seta ficar mais para baixo) */
}

.jcarousel-container {position: relative;} /* Não Altere Nada Aqui */
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} /* Não Altere Nada Aqui */
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} /* Não Altere Nada Aqui */
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} /* Altere as Larguras 75 para uma largura um pouco maior das setas */
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;} /* Fundo do Slide */
#news-slider img{border:none;height:93px;width:93px;} /* Tamanho da Imagem */
</style>

Agora sim vamos por a mão na massa! Esse é o código que eu uso. As imagens são do tamanho 90x90 e eu não recomendo que se altere esse valor, foi bem difícil eu entender como aprender a utilizar nesse slide, apenas caso você mecha bem com CSS.  Coloque as setas do seu slide no lugar indicado e faça seus devidos ajustes.


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><img src='IMAGEM AQUI'/></a></li>
</ul></div>


Esse código acima é o último, o mais fácil. Você só precisa das imagens e dos links. Todos esses códigos devem estar no MESMO gadget HMTL/JavaScript tá bem?

Salve e visualize. Esse gadget deve ficar no footer do blog, então, é bom vocês darem uma personalizada no rodapé, podem fazer isso neste tutorial: Personalizar Rodapé.

Ufa! Acabou Kelly? Sim, sim, acabou! Espero que tenham entendido direitinho, tentei explicar passo a passo, mas é mesmo algo que me deu trabalho! kk Até o próximo post gente :*

Esse tutorial eu achei neste blog: 24work.blogspot.com, porém, foi adaptado por mim. Devidos créditos hein galera ;D

ATENÇÃO: o script acima foi retirado de uso devido a violação de direitos autoriais. Algum tutorial UT sendo usado indevidamente em algum blog? Denuncie! Faça do UT melhor! Em breve o script acima será recolocado. 

PROÍBIDO REBLOGAR