Como colocar SlideShow em cima dos Posts no Blogspot
Hoje irei mostrar como botar um SlideShow em cima dos posts no blogspot!
Obs.: Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Modelo 1 – largura 500 x 280px
Passo 1- entre no HTML do template e procure por ]]></b:skin> Cole antes dessa tag o seguinte código:/* Image Slideshow */ #s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;} #s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; } .s3sliderImage{float:left; position:relative;display:none; } .s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }
Passo 2- procure pela tag </head> e cole ACIMA dela:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- /* ------------------------------------------------------------------------ s3Slider Developped By: Boban Karišik -> http://www.serie3.info/ CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. ------------------------------------------------------------------------- */ (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //--><!]]></script> <script type='text/javascript'> $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); </script>
Passo3 - procure por <div id='main-wrapper'> e cole este código logo embaixo:
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'> <ul id='s3sliderContent'> <li class='s3sliderImage'> <a href='url do link'> <img src='url da imagem'/> <span>DESCRIÇÃO.</span></a></li> <li class='s3sliderImage'> <a href='url do link'> <img src='url da imagem'/> <span>DESCRIÇÃO.</span></a></li> <li class='s3sliderImage'> <a href='url do link'> <img src='url da imagem'/> <span>DESCRIÇÃO.</span></a></li> <li class='s3sliderImage'> <a href='url do link'> <img src='url da imagem'/> <span>DESCRIÇÃO.</span></a></li> <li class='s3sliderImage'> <a href='url do link'> <img src='url da imagem'/> <span>DESCRIÇÃO.</span></a></li> <div class='clear s3sliderImage'/> </ul> </div> </b:if>
Substitua “url do link” (em vermelho)pelo endereço do post e substitua "url da imagem" (em verde) pelo endereço da imagem e onde tive azul (DESCRIÇÃO.) escreva algo sobre aquele post.
Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home.
Modelo 2 -largura 610 x 320px
Utilize imagens de 610 x 320 px
Entre no HTML do template e cole este código antes da tag ]]></b:skin>
#slider-holder{width: 610px;height: 320px;overflow: hidden; margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;} #s3slider { width: 610px; /* largura da imagem */ height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */} #s3sliderContent {width: 610px; /* largura */ position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */} .s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */} .s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff; padding: 20px 15px 50px 13px; height: 73px; width: 600px; background-color: #4e4d3c; filter: alpha(opacity=70); /* opacidade do box */ -moz-opacity: 0.7; /* opacidade do box */ -khtml-opacity: 0.7; /* opacidade do box */ opacity: 0.7; display: none; bottom: 0; } .s3sliderImage span a.featured-title:link, .s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;} .s3sliderImage span a.featured-title:hover{color: #999;} .s3sliderImage span a:link, .s3sliderImage span a:visited{color: #888;} .s3sliderImage span a:hover{color: #555;}
Siga o passo 2 do modelo1.
Siga o passo 3 do modelo 1, mas use este código:
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div class='black-bg' id='slider-holder'> <div id='s3slider'> <ul id='s3sliderContent'> <li class='s3sliderImage' style='display: list-item;'> <a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a> <span style='display: block;'> <a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/> DESCRIÇÃO </span> </li> <li class='clear s3sliderImage'/> </ul> </div> </div> </b:if></b:if>
A parte em vermelho deve se repetir para cada nova imagem. Em Link, coloque a url que será associada à imagem. Em url da imagem, cole o endereço da imagem. De um título e uma descrição às imagens.
Nos dois modelos, foram utilizados javascript. O endereço do arquivo é: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
O script pode ser colocado diretamente no template. Preste muita atenção!
Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>Agora, copie este código, colando todo o script (JS) no local indicado.
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>
![Como encontrar e editar códigos de Templates no Blogger [Vídeo]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ufDUq26nF635QgfbNiwCDrSUViyc6i-nw4RhcpeFK07ed073e1UqlSR4GSPxKcZFUr1abbbBId3TGSGjQdGVlERGpnX1Rm6fwDDwIvo9UgqjW-WA=w180)
0 Comentários