Além das imagens ele tem um menu ao lado com os nomes das imagens.
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.
- Copie o código CSS do Box de códigos Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize ]]></b:skin>
- Acima desta tag cole o código CSS
- Ir para o painel do blogger->layout Clique em Adicionar um Gadget.
- Na janela Adicionar um gadget->HTML/JavaScript.
- Copie o código HTML abaixo e cole-o dentro da caixa de conteúdo.
- Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo.
- Clique no botão Salve (canto superior direito).
- Este slide show requer um pouco de atenção para sua configuração no código CSS é que estão as URLs das imagens que devem ser trocadas por suas URLs, ou seja, as URLs das suas imagens.
- No código HTML estão os títulos das imagens Ex: Açores e deve ser trocado pelo nome de suas imagens.
<!-- Usage-->
<!---->
<!--.box
+dropdown(1,['one', 'two', 'three', 'four', 'five', 'six'], 3,true)
+dropdown(2,['apples', 'oranges', 'bananas', 'pineapple', 'watermelon', 'cherries', 'pears'], 2)
+dropdown(3,[1,2,3,4,5,6,7,8,9,10,11,12], 5)
-->
<!-- Usage-->
<!--+PENS_ALSO_LIKE({
user: 'pixelass',
pens: ['uIvCK','Fxmws'],
colors: ['#eee','#aaa'],
editors:'010'})
-->
<!--+PENS_ALSO_LIKE('pixelass', ['uIvCK','Fxmws'], ['#00f','#fff']) -->
<!--+PENS_ALSO_LIKE('pixelass', ['uIvCK','Fxmws'], ['#00f','#fff'], '010') -->
<!--+PENS_ALSO_LIKE('pixelass', ['uIvCK','Fxmws'], '010') -->
<!--+PENS_ALSO_LIKE('pixelass', ['uIvCK','Fxmws'], ) -->
<style>@import 'http://codepen.io/pixelass/pen/wftos.css'</style>
<input type="radio" name="radio___1" checked="checked" id="radio0___1" class="hidden radio0"/>
<input type="radio" name="radio___1" id="radio1___1" class="hidden radio1"/>
<input type="radio" name="radio___1" id="radio2___1" class="hidden radio2"/>
<input type="radio" name="radio___1" id="radio3___1" class="hidden radio3"/>
<input type="radio" name="radio___1" id="radio4___1" class="hidden radio4"/>
<div lang="en" id="dropwown____1" class="dropdown DROPDOWN">
<input type="checkbox" name="dropdown___1" id="dropdown___1" class="hidden dropdown-toggle"/>
<label for="dropdown___1" data-label-0="Slideshow" data-label-1="Slide 1" data-label-2="Slide 2" data-label-3="Slide 3" data-label-4="Slide 4" data-label-5="undefined" data-label-6="undefined" data-label-7="undefined" data-label-8="undefined" data-label-9="undefined" data-label-10="undefined" data-label-11="undefined" data-label-12="undefined" data-label-13="undefined" data-label-14="undefined" data-label-15="undefined" data-label-16="undefined" data-label-17="undefined" data-label-18="undefined" data-label-19="undefined" data-label-20="undefined" data-label-21="undefined" data-label-22="undefined" data-label-23="undefined" data-label-24="undefined" data-label-25="undefined" data-label-26="undefined" data-label-27="undefined" data-label-28="undefined" data-label-29="undefined" class="dropdown-select"></label>
<ul class="dropdown-menu">
<li class="dropdown-option">
<label for="radio0___1" class="radio0">Slideshow </label>
</li>
<li class="dropdown-option">
<label for="radio1___1" class="radio1">Açores </label>
</li>
<li class="dropdown-option">
<label for="radio2___1" class="radio2">Costa Rica </label>
</li>
<li class="dropdown-option">
<label for="radio3___1" class="radio3">Cuidar da natureza </label>
</li>
<li class="dropdown-option">
<label for="radio4___1" class="radio4">Olhar humano </label>
</li>
</ul>
</div>
<div class="pane">
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="cube">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
<nav id="PENS" style="background-color:#678;color:#fff">
<style>@import 'http://codepen.io/pixelass/pen/oiqzn.css'</style>
<script>
PENS = window.PENS || {}
PENS.toggle = function(target){
document.getElementById('PENS').classList.toggle('open')
}
</script>
See the Pen Slideshow cubos em fatias by Mairink (@Oemes) on CodePen.
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!