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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4e16YmxJIxgMbA0PaQipOWvNqvJLGCE_zIOSmw0Nh7dYWjtvmxvvStRWw8CgYyFbJ-GJh7ZsWay8Lekeloqb6T0okxMBcDT7tXKJ-H7eZUJWKnNysQXsAoU0lmIt3_rKluIaHiILzga9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_2ZKMZlBIDbvgE60tOxIFoJkXs7kdNY2myI8yt-x9H3uJgfs8h7MviWQeAZfj-2elikfwYPOGcMRWeQTgLJV7YmwAUouC0keXFiZxJPoakaMnJltOY9uLfrfWho2o0ueMQh22PANbhvSc/s14-no/Bot%C3%A3o+ativo.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJs0xE2cKGavwqcNbV6nbXPOGN5PA6jD390bfmbv8e6eFrrgdI43GCL0apF9-1Jf3cR5_2PCJDLS0etyDIHe3QYKQkauultRtWAn53XYhJsc2D7qy5CanMZBpuFZL3epMz293AUz_u7D3/w600-h280-no/Cabe%C3%A7ario+MF+A+600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Oslo - Noruega" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLTS7mt9O5uRmjm0b0ymhcm3SgKYZ58hNmnwdmsiARB8oi67BVzHCR_9InvLHwiOmuhPh0SEdmDFc1yHws0ClO8lFwI220xQAN954QJ4yDMMohI9OzXR-VTRLZPayzlOTTZ4kmLmnddB2/w600-h280-no/Oslo+-+Noruega+600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Vancouver - Canadá" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3STzY91Z9Utat9PyuBio4Zxldt9KyxrFSGPRGXB7nX2WOFd9Ltthlyix3r5sdL8sYhAfOUIL0OUJE8-9tz-FyVa1WSGWHTJhRBlJvUBPzV5fjj3xutnpbwE-1FN2-XkWJz1kCcNMKGB4/w600-h280-no/Vancouver+-+Canada600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Cocalzinho de Goiás" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rLs9z9yHp3vkR4R5GVw2YJdyAgFmk8rwXoSLXKKuaEF9KaLtbYOEl-uIpn0f4mye6BQ7YABsygfovQAnGOEDmh7cbi3Cswg84Jcsk2yQV4ZYBPaKO2x1XEtkmcONL4Y3pRnap0HXiROO/w600-h280-no/Cocalzinho+de+Goi%C3%A1s600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Igreja da Pampulha - BH" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAF7T7INPGJGZvTczFEd2W1LYdsz9Q2Wl0oWhbVHVkadu1txBOad0EzwXhlflDTB9SCDTa36gbVK8MxItaVN7Tufp9gGvSq4NM44OHyVK1vkYCBgQA_ElutleP-wZIjO33BOG7Wc_fHyOE/w600-h280-no/Igreja+da+Pampulha600x280.jpg" /></a>
 <a href="AQUI URL DO POST" target="_blank"><img alt="" title="Cruzeiro E.C." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVCEbw2BVJKO1xx0FvPsRPWcmJ5EyIHhqC5tptnaoHutzaXLW143WNphc_zVAELRGIoTB82nshuhoYyeHl_gqT1RJDSztFGXDkwBqj4vNcc3F5f9O3Rv7ISL9nrpKPMkTE3WpGGrOZljb/w600-h280-no/Cruzeiro+E.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.

---

---