Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cristhopher

[Resolvido] Slide no Blogger (blogspot)

Por , em Javascript

Recommended Posts

cristhopher    0

cristhopher
Postado

Olá!

Eu gostaria de usar esse slide no meu blogger (blogspot), mas não sei onde eu colo os códigos pra fazer ele funcionar no meu blog.

Se alguém puder fazer um passo a passo, mostrando como e onde colar os códigos pra que ele funcione perfeitamente, eu agradeceria. :)

 

O link do slide é esse:

 

SLIDE

 

 

 

O código é esse:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

 <title>jquery sliders</title>

 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

 <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/scripts.js"></script>

</head>

<body>



 <!--/top-->

 <div id="header"><div class="wrap">

  <div id="slide-holder">

<div id="slide-runner">

   <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>

   <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>

   <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>

   <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>

   <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>

   <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> 

   <div id="slide-controls">

    <p id="slide-client" class="text"><strong>post: </strong><span></span></p>

    <p id="slide-desc" class="text"></p>

    <p id="slide-nav"></p>

   </div>

</div>



<!--content featured gallery here -->

  </div>

  <script type="text/javascript">

   if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];

  </script>

 </div></div><!--/header-->

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Não existe um passo a passo à ser seguido, isso depende muito de como está o código do seu blog. Talvez seja necessário alterar alguma marcações CSS e a estrutura HTML do slider para funcionar sem conflitos com o tema original do blog.

 

Mas você pode tentar colar esta parte do código:

<div id="header">
     <div class="wrap">
       <div id="slide-holder">
         <div id="slide-runner">
           <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
           <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> 
           <div id="slide-controls">
             <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
             <p id="slide-desc" class="text"></p>
             <p id="slide-nav"></p>
           </div>
         </div>
         <!--content featured gallery here -->
       </div>
       <script type="text/javascript">
         if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
       </script>
     </div>
   </div>

 

logo abaixo da tag <body> do seu blog.

 

E os recursos CSS e JS necessários:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

devem ficar dentro de <head> </head>

 

Tente dessa forma, mas como disse, pode ser que entre em conflito com o tema original.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito