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

Código dos botões de compartilhar

Modelo 1:
<div style='background:#f3f3f3;  padding:8px 0; color: #ff435d; margin:12px 0px; margin-top: -20px;width:100%; float:none; height:20px'>
<div style='float:right;padding-right:10px;'>
<style type='text/css'>
#twitter {float:right;margin-top: -14px;}
#share {float:left;margin-top: -21px;margin-left:-97px}
#pin {float:right;margin-top: -16px;margin-right:35px}
#facebook {float:right;margin-top: -14px;margin-right:50px}
</style>
<div style='display:block;height:25px;margin-top:10px;padding-top:5px;margin-bottom:5px;border-top:0px dashed;border-bottom:0px dashed;'>
<div id='pin'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='https://lh3.googleusercontent.com/-Vh5EBmRrOTI/T4SHj0gPjJI/AAAAAAAAD-c/yl0lJLYxaRk/s49/PinIt.png'/></a></div>
<div id='twitter'>
<a class='twitter-share-button' data-lang='pt' data-via='elainegaspareto' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweetar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div>
<div id='facebook'>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false'/></div>

<div id='share'>
<g:plusone expr:href='data:post.url' size='medium' style='float:left;width:120px;'/>
<script type='text/javascript'>window.___gapisync=false;(function(){
var po=document.createElement(&#39;script&#39;);
po.type=&#39;text/javascript&#39;;
po.async=true;
po.src=&#39;https://apis.google.com/js/plusone.js&#39;;
var s=document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po,s);lang:&#39;pt-BR&#39;;})();(function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)) return;js=d.createElement(s);js.id=id;js.src=&#39;//connect.facebook.net/pt_BR/all.js#xfbml=1&#39;;fjs.parentNode.insertBefore(js,fjs);}(document,&#39;script&#39;,&#39;facebook-jssdk&#39;));
</script>

 </div>
</div>
<div style='float:left;  font:normal 15px Oswald;  color:#ff435d;  padding-left: -80px;              margin-top: -15px;              margin-left: -230px; '>
COMPARTILHE:

</div>
</div></div></div>


Modelo 2:
<div style='background:TRANSPARENT;   padding:8px 0; color: #f92b4f; margin:12px 0px; width:100%; float:none; height:20px'>
<div style='float:right;padding-right:10px;'>
<style type='text/css'>
#tumblr {float:right;margin-top: -18px; margin-right: 50px}
#twitter {float:right;margin-top: -18px; margin-right: 20px}
#share {float:left;margin-top: -55px;margin-left:-70px}
#pin {float:right;margin-top: -18px;margin-right:20px}
#facebook {float:right;margin-top: -18px;margin-right:20px}
</style>
<div style='display:block;height:25px;margin-top:10px;padding-top:5px;margin-bottom:5px;border-top:0px dashed;border-bottom:0px dashed;'>

<div id='tumblr'>
<a href='http://www.tumblr.com/share' style='display:inline-block; text-indent:-9999px; overflow:hidden; width:50px; height:50px; background:url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWiGLCh5_AfR5s0BS23ok975Jtc7plK4t9HqR-IBFUCJB5Foh0bmlKpm4-I3ohU2zSKp-AQKg9R0wAQwcXWoW7ixrKS2Y2J7RijZhRWbeYMlswU3Pbwtk8405SzBxPQ9bEdYTxnpG6l2I/s1600/tumblr.png&apos;) top left no-repeat transparent;' title='Share on Tumblr'>Share on Tumblr</a></div>
<div id='pin'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoer2FearSTJeCi4OPORrQZdNZDbdN_FLaMiHP3yPE7SHHy4DFa367d3XSdam2fA9BuIGcKUzy4qE7eZfEl1RtOmKVepuSztryureHlogagWUPFVA5MELwDAJyoT0FHFMaccDLVS-Hm4/s1600/pinterest.png'/></a>
 </div>

<div id='twitter'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeV7XD0EA9ZQaLCvrxi0VLRvtB904ZQH97aZoRgeNP_ktWlnFSYZJuW2EerhN0RKAdDEMuz_GO3sLxBg_pLOyVHGHw9aWL0p1ilnX8A1z2v8KD0NqCWWjUZCYW9jnsoIhjn9rVdNgnmHM/s1600/twitter.png' title='Twitter'/></a></div>
<div id='facebook'>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAY23fAcHsRBSNuR6H1zzhXh10iZSsg1XE1ZfHjNuz8hMPiYtXKmrrDk__GUPlzBR_EWkFHy05WW9Bmux8EOWTJN5YAv7WJGets-l1wCMGtWSLQf2hpnypMKscqi1wNPwju9GD3KDSEEs/s1600/facebook.png' title='Facebook'/></a></div>

<div id='share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNrQjXAV5fZ8wbCIDedS39rD18kPc19ZwtX7wjsvCgtBR4GP-irSiMYuIf7k3j2emhba0kfkCl7s9Z7paFrae-kQBp3ZpPFstMdi5JnI4y71m7zGed8EU2KgNNEyEMFDf4xgucm41BV4/s1600/googleplus.png' title='G+'/></a>
 </div>
</div>
<div style='float:left;  text-align: center; font: normal 17px Oswald;  color:#000;  padding-left: -120px;               margin-top: -5px;               margin-left: -300px;   text-shadow: 1px 1px 1px #f4f6f7'>
COMPARTILHE ESTE POST:

</div>
</div></div></div>

Modelo 3:



Modelo 4:
<div style='background:#fffafa;   padding:8px 0; color: #f92b4f; margin:12px 0px; margin-left: -20px;margin-top: 15px;width:104%; float:none; height:35px'>
<div style='float:right;padding-right:10px;'>
<style type='text/css'>
#tumblr {float:right;margin-top: 2px; margin-right: 10px}
#curte {float:right;margin-top: 7px;margin-right:5px}
#twitter {float:right;margin-top: 2px; margin-right: 8px}
#share {float:left;margin-top: -40px;margin-left:-45px}
#pin {float:right;margin-top: 2px;margin-right:8px}
#facebook {float:right;margin-top: 2px;margin-right:10px}
</style>


<div id='curte'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:30px'/>
 </div>
<div id='tumblr'>
<a href='http://www.tumblr.com/share' style='display:inline-block; text-indent:-9999px; overflow:hidden; width:35px; height:35px; background:url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYbrhDeHA62msaBHUkmPNuUbgi0fHeYOUybQ8jZ0VGSBNVyrf8IGvaTPn5zU-EgmnrUgvg-I7RGG_0YObWUcMM__v4QNBNoAoVst87AWDbD4MRvP4DsGhHzxj3TrmFt5rUTMOgXU3iTAr/s1600/tumblr.png&apos;) top left no-repeat transparent;' title='Share on Tumblr'>Share on Tumblr</a></div>
<div id='pin'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5N8bqjgg-i_q-wczjEdC0GJXmxNlgxxzDbjBn93ie23yRRLEmLNuCx_WVJvu7MHc-vBQnF9vv8R5xcJxtcFV8wQ7-cCe1_IYrS7XCpnXSYsZagmOXWS3xlhdnDsO-_2H_SBlTLBLfdpV/s1600/pinterest.png'/></a>
 </div>

<div id='twitter'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6rNKLFxcUcf_YA4C9vvpcfyTIVJJ-3LGwQvo7Sn8TmXZm0-EYSTlTE5XE1oS8uZbHh8EcpFNEYhkv-A20FgzGwvX1zFjxmFxJH7YgjLdl7DjTitYL0TspqrfQcHDsMaEf5m9hfit_2iK4/s1600/twitter.png' title='Twitter'/></a></div>
<div id='facebook'>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5Uib9c3eaAxwnKkMhStRqfFTMB3aFELkk_yyf_X8TIuxrQNKoiEmlHKqaKTFKmXH_N2GYSPOu4HsqRgy_gEyMDQw4-kYGF_5okaHwJcwAOtWrtRcNSKK_rQo35XWe69cCVGWLpbwYXvf/s1600/facebook.png' title='Facebook'/></a></div>

<div id='share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgXV4N12O2yzXat0D9bxeYWiL8t3dWn6F2j3dER_qeQp5yfPWOKZp6wJewOvSOQ7TpQlGirW-T_5_7oQevqtb9fWw1BW9rLIlYKX79eX-90G5WDUnRNc7X8lZ7m0txrynSiiJfDMFXyHW9/s1600/googleplus-revised.png' title='G+'/></a>
 </div>



</div>
<div style='float:center;  text-align: center; font: normal 25px Parisienne;  color:#000;  padding-left: -120px;               margin-top: -50px;               margin-left: -340px;   text-shadow: 1px 1px 1px #f4f6f7'>
Compartilhe este post:          

</div>
</div></div></div>

Postagens mais visitadas

Minha lista de blogs