Slide com Postagens Recentes

Slide automático que mostra postagens recentes do Blogger, slides atualiza automaticamente com as imagens de suas postagens recentes.

Demonstração

1. Ir até Modelo > Editar HTML e procure pela tag abaixo:

]]></b:skin>

2. Acima dela cole o código abaixo

/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:-20%;bottom:-25px;
 margin-left:60px; /* Posicionamento dos botoes */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 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;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000; /* cor do fundo da legenda */
 color:#fff; /* cor do texto da legenda  */
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%; /* comprimento do fundo da legenda  */
 height:45px; /* altura do fundo da legenda  */
 z-index:8;
border: 3px dashed #000; /* cor da borda */
}
.nivo-caption p {
 padding:5px;
 margin:0;
 font-size:12px; /* tamanho da fonte da legenda  */
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
margin:-5px -20px 20px 0px; /* Aqui você define a posição do slide */
width:300px; /* altura da imagem */
height:250px; /* comprimento da imagem */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}

3. Depois procure </body> e acima dele coloque o código abaixo.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> <script src="https://sites.google.com/site/tdevdev/dev2/nivo-slider-modified.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

4. Salvar Modelo. 

5. Vá em Layout  e Adicionar um Gadget e depois Html/Javascript e cole o seguinte código:

<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<script src="https://sites.google.com/site/jbollton/arquivo/GallerySlide.js"></script>
<script>
 var numposts_gal = 12;  /* numero de slide a ser mostrado */
 var image_height = 250; /* altura da imagem */
 var image_width = 300;  /* comprimento da imagem */
</script>
<script src="http://www.SEU BLOG.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>
<div align="center">

<span style="font-family: arial; font-size: 14-small;">Widget editado By <a href="http://www.comosefez.com/" target="_blank">www.comosefez.com</a></span></div>

OBS: Onde esta SEU BLOG ,você deve alterar pelo endereço do seu blog.

Em todos os códigos está definições sobre alterações, como largura, altura, tamanho da fonte, posição do Gadget entre outros. Sempre que for feito alguma alteração em um código é preciso alterar o mesmo em todos os outros.
Havendo qualquer dúvida, por favor deixe seu comentário

21:22:00