sábado, 24 de maio de 2014

Uma dica para amostra - Como colocar slides rolantes no blog


AHHHHHHHHHHHHHHH!!!!!
Derrepente vc vê esse título,e se pergunta,que treta que é essa?
Bom,clique e veja!!! 

Aí vocês se perguntam,quê que slides nem sei quiqué issu!!! tem a ver com Gravity Falls.
Eu repondo,não tem nada a ver,pq se depois rolar comentários falando como tem isso no blog (slides),e acharei este post bem necessário.

Então,para começar,antes de adicionar o html (raíz de algo),iremos colocar o css (personalização da raíz da coisa).Para adicioná-lo,vá em Modelo>Personalizar>Avançado>Adicionar CSS .E aí,achou?!
Se tiver achado,no campo em branco digite (cole) o seguinte :

 <style type="text/css">
#myGallery
{
width: 100% !important;
height: 250px !important;
}
</style>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>


Pronto!Salve e faça o seguinte:
Vá no Layout,e adicione o gadget HTML/Javascript.Depois disso,cole o código:

<div id="myGallery">
<div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>


Em read more,coloque qualquer coisa,tipo Leia Mais,Confira Tudo,Voe para o post,etc...

Para adicionar mais abas,digite:

 <div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>

 

Nenhum comentário:

Postar um comentário