Slide show cubos em fatias para Blogger

Slide show
Olá e bem-vindo ao Mult-focos. Trazemos para você um lindo slide show cubos em fatias para Blogger.
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.

Veja mais modelos de slides clicando AQUI

DEMO

Como adicionar em seu blog

  • 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 
Próximo passo
  • 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). 
Configuração 
  • 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. 
 Isto é tudo.

<!-- 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.



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