Bom, como esse é um elemento muito usado por uns, e muito desejado por outros, trouxe aqui este slide para postagens em destaque. Alguns templates já o possuem, outros não. Então se seu template não tem, não perca tempo, adicione-o já!
Um Slide bonito e agradavel é indispensável para blogs de noticias, mas indenpendente do nicho em que seu blog atua, este slide pode ser um aliado para deixar seus melhores posts em destaque. Este Slide não deixará seu blog pesado, irá se ajustar automaticamente ao tamanho de sua pagina e possui setas de para esquerda e direita.
1.Entre em Layout > Editar HTML
Adicione o código abaixo antes de </HEAD>:
2. E esta parte acima de ]]></b:skin> Clique para ver o Codigo!
3. Agora vá até Layout > Elementos da pagina:
Crie um novo elemento HTML / JavaScript com o seguinte codigo:
<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>
<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>
4. Agora adicione as URLS de suas imagens e os titulos nos locais indicados em vermelho no codigo,
Um Slide bonito e agradavel é indispensável para blogs de noticias, mas indenpendente do nicho em que seu blog atua, este slide pode ser um aliado para deixar seus melhores posts em destaque. Este Slide não deixará seu blog pesado, irá se ajustar automaticamente ao tamanho de sua pagina e possui setas de para esquerda e direita.
Antes de começar recomendo que faça um backup do seu template.
Colocando Slide no Blog
1.Entre em Layout > Editar HTML
Adicione o código abaixo antes de </HEAD>:
<script src="http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js" type="text/javascript"></script>
2. E esta parte acima de ]]></b:skin> Clique para ver o Codigo!
3. Agora vá até Layout > Elementos da pagina:
Crie um novo elemento HTML / JavaScript com o seguinte codigo:
<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>
<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>
4. Agora adicione as URLS de suas imagens e os titulos nos locais indicados em vermelho no codigo,
5. Salve e veja o resultado
Se quiser adicionar mais imagens copie o código abaixo e cole entre: <div id="myGallery"> & </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>
Se quiser adicionar mais imagens copie o código abaixo e cole entre: <div id="myGallery"> & </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>
1 comentários:
Oi td bem obrigado pelas dicas dificil ver pessoas ajudando umas as outras, mas me explica uma coisa deu tudo perfeito na instalção e o blog até apareceu na página inicial.Mas na hora do html/javascrip inserir url da imagem eu coloco mais não parece nada,tem algum formato certo..eu sou obrigado a preencher o titulo e a descrição do blog pois eu só vou no url da imagem para aparecer..Obrigado pelas dicas.Abraços
Postar um comentário
Os leitores são responsáveis pelos seus comentários postados neste site.
O Connect - Technology não se responsabiliza pelo conteúdo colaborativo apresentado e ainda se reserva ao direito de deletar, sem aviso ou consulta prévia, comentários com conteúdo ofensivo, palavras de baixo calão, spams ou, ainda, que não sejam relacionados ao tema proposto pelo post do blog ou notícia.