Slide show com efeito na transição de imagens para Blogger

Slide show
Olá e bem-vindo ao Mult-focos. Neste post estamos trazendo mais um slide show com efeito para Blogger. Este slide você pode usar para destacar seus posts, pois nele tem como além das imagens, colocar os links dos posts.
Veja outros modelos de slides clicando AQUI

Veja um demo clicando no botão abaixo.

DEMO

Como adicionar no seu blog

  • Ir para o painel do blogger->layout Clique em Adicionar um Gadget. 
  •  Na janela Adicionar um gadget->HTML/JavaScript. 
  •  Copie o código JS 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ções
  • Copie o código JS e cole em um bloco de notas e faça as modificações em: AQUI URL DO POST, AQUI O TÍTULO DO POST, AQUI A URL DA IMAGEM. 
  • As imagens são de 600x280 pixels 
Como funciona 
  • O slide muda as imagens automaticamente e ou clicando nos botões abaixo das imagens. 
  • Clicando nas imagens ele leva ao post correspondente. 
  • No modelo mostrado no demo apenas a 1º imagem coloquei link, que aponta para o Mult-focos. 
Isto é tudo.


<style type="text/css"/>
 /* Mult-focos- Estilo Básico */
body{
 background: transparent;
 font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
 margin:0;
 padding:0;
}
a{outline:0 none}
#pagewrap{
 margin:10px auto;
 padding:0;
 position:relative;
 height:400px;
 width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider images {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
 position:absolute;
 right:20px;
 text-align:center;
 top:130px;
 width:192px;
 z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
 opacity: 0.6;
}
.nivo-controlNav a{
 background:transparent url(https://lh4.googleusercontent.com/-ZZ5ylFUQDn0/VFIqv5ztwLI/AAAAAAAAH9s/VGoEjv7KD4U/s10-no/Bot%C3%A3o.png) no-repeat center center;
 display:inline-block;
 height:14px;
 width:14px;
 text-indent:-9999px;
 cursor:pointer;
}
.nivo-controlNav .active{
 background:transparent url(https://lh4.googleusercontent.com/-FrzPmEy7Q6I/VFIq6Zq_YzI/AAAAAAAAH98/NZNJ2-rWII4/s14-no/Bot%C3%A3o%2Bativo.png); 
}
 </style>
 <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="https://sites.google.com/site/multfocosjavascript/slide---s3slider/jQueryNivoSlider.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
 </script>
 <!--[if IE]>
  <script src="Mult-focos"></script>
 <![endif]-->   

<div id="pagewrap">
<div id="slidewrap">
 <div id="slider">
 <a href="http://mult-focos.blogspot.com.br/" target="_blank"><img alt="" title="Mult-focos" src="https://lh6.googleusercontent.com/-dW6UewL_xd8/VFIr2FWy5AI/AAAAAAAAH-Q/e3UVaAqSdxo/w600-h280-no/Cabe%C3%A7ario%2BMF%2BA%2B600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Oslo - Noruega" src="https://lh3.googleusercontent.com/-y-zv4fRMdlg/VFIsueHIF-I/AAAAAAAAH-k/-HdZoI47pMA/w600-h280-no/Oslo%2B-%2BNoruega%2B600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Vancouver - Canadá" src="https://lh5.googleusercontent.com/-871aDOxX8_A/VFIxfvnJKrI/AAAAAAAAH_E/vaqilU2mqCU/w600-h280-no/Vancouver%2B-%2BCanada600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Cocalzinho de Goiás" src="https://lh4.googleusercontent.com/-d0yaHnXYE-c/VFIyH-ux27I/AAAAAAAAH_c/PPd525yTQXk/w600-h280-no/Cocalzinho%2Bde%2BGoi%C3%A1s600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Igreja da Pampulha - BH" src="https://lh6.googleusercontent.com/-CcUyg9GgA5c/VFIzvWuZLAI/AAAAAAAAH_0/HqnB6k9MONc/w600-h280-no/Igreja%2Bda%2BPampulha600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Cruzeiro E.C." src="https://lh6.googleusercontent.com/-XQneXTowph4/VFI2hfAPmPI/AAAAAAAAIAM/GAXgPrWti2c/w600-h280-no/Cruzeiro%2BE.C..jpg" /></a>
 </div>
</div>
</div>

<span style="font-size: 80%; float:right;">Adquira este <a href="http://mult-focos.blogspot.com/2014/10/slide-mf-efect.html" target="_blank">widget</a></span>

See the Pen Slideshow para Blogger com efeito by Mairink (@Oemes) on CodePen.



Postado por Mairink Oemes

2 comentários:

  1. MULT-FOCOS
    Já tinha colocado em meu blog este tipo de slides,mas a pagina fica muito pesada para rodar e as pessoas reclamam,tem como por sem ficar prendendo a pagina.
    Se tiver, por favor, é só dizer que ficarei muito agradecida sempre que enviar post novos me indique, pois adoro prestigiar os amigos.
    Abraços sempre.
    ClaraSol
    .

    ResponderExcluir
  2. @Clara Sol
    Linda ClaraSol, realmente ele é um pouco pesado, mas lhe dou uma alternativa bem leve (http://mult-focos.blogspot.com.br/2014/06/widget-de-apresentacao-de-slides-para_9.html)espero que goste. Obrigado por nos prestigiar.

    ResponderExcluir

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