Imagens Deslizantes com JQuery Slider

Em outro artigo publicado, você já viu Como Instalar um Slide no Blog.
Agora neste tutorial você aprenderá um outro modelo de Slider usando o JQuery.
Para aplicação, é necessário usar HTML, CSS e Javascript.
Clicando na imagem abaixo você pode ver um exemplo deste efeito em funcionamento.


Demo

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

Para instalar este Slider,siga os passos a seguir:

1.Instalar o arquivo Javascript:

Acesse o painel do blogger, no menu “modelo”, vá em “Editar HTML” e procure pela tag </head>
e cole logo ACIMA dela o conteúdo deste arquivo.txt.
Salve as modificações!

2.Aplicar estilos ao Slide – código CSS:

Agora volte no menu “Modelo” >> “Editar HTML” , e procure pela tag ]]></b:skin>
e cole ANTES dela:

 /*--Container geral--*/ 
.main_view { float: left; position: relative; } 
/*--Estilos do container das imagens--*/ 
.window { 
height:289px; 
/*-- as imagens devem ter a mesma altura ou mais-- */
 width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */ 
border:1px solid #610000;
 overflow: hidden; 
position: relative; 
}
.image_reel { position: absolute; top: 0; left: 0; } 
.image_reel img { float: left; } 
/*--Estilos do container da numeração--*/ 
.paging { position: absolute; 
bottom: 40px; right: -1px; 
width: 220px; height:41px;
 z-index: 100; text-align: center; 
line-height: 40px; 
background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png); 
-moz-border-radius-topleft: 15px;
 -moz-border-radius-bottomleft: 15px; 
-webkit-border-radius-bottomleft: 15px; 
-webkit-border-radius-topleft: 15px; border:1px solid #000; 
display: none; } 
/*--Estilos do link da numeração--*/ 
.paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #999; 
background: #000;border: 1px solid #000; -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; border: 1px solid #000; color: #fff; 
background: #920000; -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; } 

Salve!

3.Editando cores de fundo, bordas, altura e largura do Slide:

Em .window , edite os valores de height(altura) e widht (largura) total do seu slide. Personalize de acordo com o tamanho de seu template (Coloque o mesmo valor para largura que possuir a sua Header)
Lembrando que as imagens utilizadas devem ter a mesma largura ou mais!

Edite as cores de bordas em “border“.
Edite cor de fundo em “background“.

Em .paging, onde está background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png), eu usei uma imagem como exemplo, mas você pode trocar por uma imagem de sua preferência, basta alterar a url (endereço) de sua imagem.

4.Escolhendo local que ficará o slide:

Agora você deve escolher onde quer posicionar o slide.

4.1. Abaixo do cabeçalho:

Um excelente local é logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).

Vá no menu “layout” verá um campo para “Adicionar Gadget” bem abaixo do cabeçalho do blog, é lá que você irá colar o código do slide que você quer instalar.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template. Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

5.Código HTML:

Vá para o menu “Layout” .
Clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<div class="main_view"> 
<div class="window"> <div class="image_reel">
<img src="url-imagem-1" alt="" /> 
<img src="url-imagem-2" alt="" /> 
<img src="url-imagem-3" alt="" /> 
<img src="url-imagem-4" alt="" /> 
</div></div> 
<div class="paging"> 
<a href="insira-seu-link-1" rel="1">1</a> 
<a href="insira-seu-link-2" rel="2">2</a> 
<a href="insira-seu-link-3" rel="3">3</a> 
<a href="insira-seu-link-4" rel="4">4</a> 
</div></div>

Para fazer com que a numeração que aparece no slide funcione como um menu que redirecione para determinada postagem, você poderá, basta inserir a url da sua postagem onde está “insira-seu-link”.

Se você quiser inserir um link diretamente nas imagens, basta inserir
<a href=”link-para-imagem-1″> antes de <img src=”url-imagem-1″ alt=”” />
devendo ficar assim:

<a href="url-link-para-imagem-1"> <img src="endereço-imagem-1" alt="" /></a>
Slide somente na página inicial (opcional):

Se você quiser que ete slide apareça somente na página inicial do seu blog, você terá que incluir o código da condicional.
Você deve colar o código de abertura da condicional logo ACIMA da linha que inicia o código html do slide, e APÓS o código de encerramento do slide, você deve colar e a tag de fechamento da condicional.

Deverá ficar assim:


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class="main_view">
<---restante do código--->
</div></div>


</b:if>



O código destacado em “azul” é a condicional.
O código destacado em “laranja” é o código de instalação do slide.



Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery. Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:
Ocultar Elementos em Página Específica

Vanessa é blogueira desde 2009, e 'aspirante' a web design nas horas vagas. Autodidata, viciada em internet, adoradora de blogs, seus códigos e templates, apaixonada por programas gráficos, tecnologia e web design,e fascinada pelo estilo gótico. Leia Mais sobre a autora »

Comentários
  1. Céu Carvalho
  2. Jose wellington
    • Vanessa
  3. natanael
    • Vanessa
      • natanael
  4. Taillard
  5. lenilson
    • Vanessa
  6. natanael
    • Vanessa
      • natanael
        • Jose wellington
  7. vivi
    • Vanessa
      • vivi
        • Taillard
  8. Gaga Loves News
    • Vanessa
  9. Mariano
    • Vanessa
  10. alarcon
  11. willian carvalho
  12. Everson Oliveira
    • Vanessa
  13. Aline
    • Vanessa
      • Aline
        • Aline
  14. Erica
  15. Leonardo
    • Vanessa
  16. AlinneSoares
    • Vanessa
  17. Aline
  18. Aline
  19. Dani
    • Vanessa
      • Dani
  20. Wdesign
  21. Daniela Milagres
    • Vanessa
    • Jared
    • Weverson Cruz
  22. Mahomies
  23. Erico Graeff Fotografia
  24. Jéssica
  25. Jéssica
  26. .:: Nessa ::.
  27. Caio Cesar
  28. Web Designer Caxias
  29. - Gmais -
  30. Beleza Sergipana
  31. Beleza Sergipana
  32. Beleza Sergipana
  33. Yuuki May ::
  34. .
  35. Samuel Souza
  36. DeskP
  37. José Viriato
  38. Priscila Batista Brasil
  39. Bruh_SM
  40. .:: Nessa ::.
  41. M1$@£L
  42. Kayo
  43. Blog de testes
  44. .:: Clau ::.
  45. Beatriz Moura
  46. Divulgacion RBD
  47. .:: Clau ::.
  48. Rock in Barro
  49. .:: Clau ::.
  50. Backstage
  51. .:: Clau ::.
  52. René Gustavo
  53. André Felipe
  54. .:: Clau ::.
  55. Carol
  56. .:: Clau ::.
  57. natineces
  58. .:: Clau ::.
  59. Gamus
  60. Jorge
  61. Vídeo Aulas d
  62. Leo2505
  63. Leo2505
  64. Enche Lingüiça
  65. ADM
  66. Luiz
  67. Dftmarques
  68. Mania Surf
  69. ENTER MICRO INFORMÁTICA
  70. Chico Canavieira
  71. Fael
  72. Felipe
  73. Luiz Roberto Monteiro
  74. Luiz Roberto Monteiro
  75. Mariana Borges.
  76. Rhuann Tavares
  77. .:: Clau ::.
  78. Rhuann Tavares
  79. Gontijø
  80. Gontijø
  81. .:: Clau ::.
  82. José Filho
  83. .:: Clau ::.
  84. José Filho
  85. .:: Clau ::.
  86. X-Pro Games
  87. andraD
  88. ::Clau::
  89. ::Clau::
  90. imagine - comunicação impressa e digital
  91. imagine - comunicação impressa e digital
  92. Gabriel Braganholo
  93. ::Clau::
  94. Gabriel Braganholo
  95. ::Clau::
  96. imagine - comunicação impressa e digital
  97. imagine - comunicação impressa e digital
  98. ::Clau::
  99. Usina Gamer
  100. Carlos antonio correia de farias
  101. gabriel
  102. karatuca
  103. ::Clau::
  104. karatuca
  105. Rosariano (o) Forever
  106. ::Clau::
  107. Diário da Erva
  108. ::Clau::
  109. Video Aula
  110. ::Clau::
  111. Derick Furlanetto
  112. ::Clau::
  113. Enzzopaiva
  114. ::Clau::
  115. Renatto França
  116. Žéß?_?T