Mostrando postagens com marcador Código slide de destaques modelo 1. Mostrar todas as postagens
Mostrando postagens com marcador Código slide de destaques modelo 1. Mostrar todas as postagens

Código slide de destaques modelo 1

no dia 21 março 2015

HTML:
<center>
<div id="slider">
<a href="https://draft.blogger.com/LINK%20AQUI"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir1ToQl0bs_jCID17pSd8DZqQMHBwyQdb6GioQMLLvWcAq3DPAjADMle-PytbNMU-Q_ofnKDqtWsGpXOgcBmpxiGCPJNvUIYAuEmFZWwXdvoIrKK6JiXpCnas1THM2e44YK5-ATnoKjHKu/s1600/exemplo1.jpg=" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOaUBUhK_5xBFg0iqE-zy9yW69CWeovvzbsRiiBf0QuZWzDFWkv4gS5FlFl4bcbTt8i2dVOVLaGkVK6IE3n0ERbkopdyaHu7eYpW5m_2kc299Jph1yGBQ5w_n6LMR3IW78kYCQljVnlm1_/s1600/exemplo2.jpg" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z0UAfwCdI2S56QFLX4f1P4fcmAYFeRcxgXoZPYU8OhY8MFrbZv98zJXptN-DT3EKIdJkk5nz1KDKFdpabXQYLkx6GnQUC3MeJgeztAQsj5HGpf8BulS-6vvl8BayzbTJvJkrpla5L6OQ/s1600/exemplo3.jpg" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgatiCM0qY6eNPaElHhD7Q1lCCV7zMMjP_Sx4cbnzDnIGFY0UcP7E2sIn8DfVh5WUMWPXJ8AvLbz2NBtrE379UaoeN3aVF17BWZZ7noGV3pKQjrgc2-l4132ffkKacxos9p9VM2Y-2GFz/s1600/exemplo4.JPG" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CXmuIPhXd0RnvStjOk94qPQiSlxsWmaAV_wFFtl102jkqpCOZrxbD5iZzwrhk4MUvnFkLXAffV7cy5JBdq1xNNnaA57DrmRY5ibJeffeGi8w1B8-gnqxURSNViHsAh5o_tZsh3WENFAt/s1600/exemplo6.jpg" title=" Aqui a legenda da imagem" /></a>
</div>
<div class="clear">
</div>
</center>

Javascript (abaixo de <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(window).load(function(){
    jQuery(&quot;#slider&quot;).nivoSlider({
        effect:&quot;fade&quot;,
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:500,
        pauseTime:4000,
        startSlide:0,
        directionNav:true,
        controlNav:true,
        controlNavThumbs:false,
        pauseOnHover:true,
        manualAdvance:false,
afterLoad: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;0&quot;)},
beforeChange: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;-700px&quot;)},
afterChange: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;0&quot;)}
    });
});
</script>

CSS:
/* SLIDE
---------------------------------------------*/
#slider {background: url('http://static.tumblr.com/wvgucgb/xIzn3uqba/ajax-loader.gif') no-repeat 50% 50%; width: 790px; height: 320px; margin: 0 0 40px 0; border-radius: 10px;}
#slider img {position: absolute; top: 0; left: 0; display: none;}
#slider a {border: 0; display: block;}
#slider img {max-width: 790px; height: auto; border-radius: 10px;}
/* If an image is wrapped in a link */
.nivoSlider {overflow:hidden;}
.nivoSlider a.nivo-imageLink {position: absolute; top: 0; left:; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; z-index: 6; display: none;}
/* Caption styles */
.nivo-caption {position: absolute; left: 0px; bottom: 0px; color:#fff; opacity: 0.3; width: 100%; z-index: 8; background: url('http://static.tumblr.com/wvgucgb/Dt3n9pu1g/slide.png');
-webkit-transition:all 1s ease; /* delay = 1 s */ -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; left:-790px; width: 100%;}
.nivo-caption p {font: italic 20px Georgia; letter-spacing: -1px; padding: 10px 15px; margin: 0; text-transform: lowercase;}
.nivo-caption a {display: inline !important;}
.nivo-html-caption {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;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8c4q1rujtCPsHd1Kxl0f0fi6oKROjrF3LB2NaqHj7FMUh26c4etCgohore2TrJd5rscqgHt8l3xWo9DdsWP7HB55SVpGaTyNK75cCLMIjftLbfQUGJUHdSU1nWaPuJE33eL-V2ONB5gbs/s1600/setas-fff.png') no-repeat; display: block; width: 30px; height: 30px; text-indent: -9999px; border: 0; position: absolute; top: 45%; z-index: 9; cursor: pointer;}
.nivo-prevNav {left: 0;}
.nivo-nextNav {right: 0;}
a.nivo-nextNav {background-position: -30px 0; right: 15px;}
a.nivo-prevNav {left: 15px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {}
.nivo-controlNav a {background: url('http://static.tumblr.com/wvgucgb/VkLn9ptgj/bullet.png') no-repeat; width: 15px; height: 13px;  margin-top: 300px;margin-left: 3px;float: right; display: block; text-indent: -9999px; border: 0; position: relative; z-index: 9; cursor: pointer;}
.nivo-controlNav a.active {background-position: 0 -13px;}
http://loja.cozinhadoquintal.com.br

Postagens mais visitadas

Minha lista de blogs