Slide carousel de posts para Blogger

Olá amigos Mult-focos, veremos neste post um slide carousel de posts para Blogger,
Como o próprio nome diz é um slide que mostrará seus posts(até 100) se assim quiser, caso contrário é só modificar em(var numposts_gal = 100)para a quantidade que desejar.


Demonstração
Como configurar para seu blog

• Copie e cole o código HTML do box abaixo
• Localize no código seguinte linha abaixo e mude a parte em laranja para o endereço do feed.
• <script src="http://mult-focos.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
• Depois basta ir ao painel do Blogger e adicionar o gadget

OBS: Com um pouco mais de conhecimento, poderás mudar também o  background,etc.

Isto é tudo.

<style>
#slide-container {width:720px;height:360px;position:relative;}
#slider {width:720px;height:360px;left:30px;background:#3583AD;overflow-x:hidden;overflow-y:hidden;position:relative;}
.slide-desc {
background:#3583AD;
color:#FFF;
font-family:Arial;
font-size:13 px;
padding:10px;
position:absolute;
top:0;right:0px;
text-align:left;
width:220px;
z-index:99999;}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}
#slider2{margin-top:4px;}
#slider li, #slider2 li{width:720px;height:360px;overflow:hidden;}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{display:block;width:30px;height:360px;position:absolute;left:-30px;text-indent:-9999px;
top:0px;z-index:1000;}
#prevBtn, #slider1prev{left:0px !important;}
#nextBtn, #slider1next{left:750px !important;}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;height:360px;left:0;position:absolute;top:0px;width:30px;z-index:1000;}
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:360px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKNE505l5TO0kEcSdF1AyWwZP8gUHVEhgoVW6NIOM3wGcqqgmCl4BohtroDXXZZJxn5Y9LKhC64Oe4e6GuyES5UA4QUDkbeL-_aXl6LvMs3rs7QxuwokcLtrDbWtIMaFRaPYK_qWmMuJO/s64-no/arrowleft.png) center;background-repeat:no-repeat; z-index:100;cursor:pointer;border-right:1px solid #ccc; background-color:#3CA0C6;} 
#nextBtn a, #slider1next a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5map8Fvcg3MCyRbpI0fVEA2mOFsuSajRrXy44BhahctcHn4xu3_M6jfaEAe5MgP_NvFZkSwGnZ48-FDPAyHtX4W4bSh8N20CwT0pgY1EMHmJccwrhJRfXTE_eZjx-acyVOncULqq9HER/s64-no/arrowright.png) center;background-repeat:no-repeat; z-index:100;cursor:pointer;border-left:1px solid #ccc; background-color:#3CA0C6;} 
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B8GeBeRdN9NsaXhGTFRvWEpNR2s' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true });});
</script>
<div id="slider">
<script src='https://googledrive.com/host/0B8GeBeRdN9NsM3NpLXU5QVNGNjQ' type='text/javascript'></script>
<script style="text/javascript">
 var numposts_gal = 100;
 var numchars_gal = 400;
 var random_posts = false;
</script>
<script src="http://mult-focos.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>

See the Pen PPNvaQ by Mairink (@Oemes) on CodePen.

---