Slideshow CSS3 sem salto de página para Blogger

Slaideshow CSS3
Olá amigos Mult-focos, neste post trazemos mais uma opção de slideshow, é um slideshow CSS3 sem salto de página para Blogger. Este lindo slideshow tem um efeito de girar as imagens e salta de páginas só ao ser clicado na página correspondente.

Veja seu demo clicando no botão abaixo ou em result no Box de códigos.

DEMO
 
Adicionando o slideshow no seu blog.

I - Vá ao painel do Blogger->clique em modelo->Editar HTML->use Ctrl+F e localize a tag

]]></b:skin>

acima dela copie e cole o código CSS do Box de códigos.

II – Agora copie o código JS do Box de códigos cole em um bloco de notas e faça as modificações.

III - Feito isto adicione no gadget ( não sabe como adicionar aprenda AQUI).

Bem pessoal isto é tudo.


<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
</ul>
 <span style="font-size: 80%; float:right;">Adquira este <a href="http://mult-focos.blogspot.com/2014/09/slaideshow-puro-css3.html" target="_blank">widget</a></span>           
See the Pen gdvEq by Mairink (@Oemes) on CodePen.


Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter