Cabeçalho

domingo, 14 de abril de 2013

Como Colocar Slide de Postagens Recentes no Blog

A seguir clique na aba Modelo, à sua esquerda. Vai abrir o código-fonte de seu blog. Localize esta tag:


</body>


Preste atenção, tem que ser exatamente assim, tá?
Acima dela cole este código, que é o arquivo JQuery que fará o slide funcionar:








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







Agora vamos aplicar os estilos ao slide. Localize este trecho:



]]></b:skin>


E acima dele cole este código:









/*----- 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:50%;bottom:-42px;


 margin-left:-40px; /* Tweak this to center bullets */


}


.theme-default .nivo-controlNav a {


 display:block;width:22px;height:20px;


 background:url(http://1.bp.blogspot.com/-c_huDpWSgJM/UWIYlbuqZzI/AAAAAAAAFAE/1bEsEghvU-E/s1600/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;


 color:#fff;


 opacity:0.8; /* Overridden by captionOpacity setting */


 width:100%;


 z-index:8;


}


.nivo-caption p {


 padding:5px;


 margin:0;


}


.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:10px -20px 60px 10px; /* Aqui você define a posição do slide */


width:610px; /* Certifique-se de suas imagens são do mesmo tamanho */


height:300px; /* Certifique-se de suas imagens são do mesmo tamanho */


}


.theme-pascal.slider-wrapper,


.theme-orman.slider-wrapper {


 margin-top:150px;


}


.clear {


 clear:both;


}





Atenção para as partes marcadas no código: elas indicam o que pode ser personalizado em termos de cores, tamanhos, etc.

Importante:
Você pode alterar a altura e a largura que o slide terá. Lembre-se que o ideal é que sejam números iguais para não deformar as imagens.
Depois de inserir os códigos em seu blog clique em Salvar modelo. Não adianta visualizar pois nada aparecerá. Falta incluir o gadget.

Para fazer aparecer em seu blog depois de salvar clique para fechar o código-fonte e selecione a abaLayout. Na página que abrir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT. Na janela que abrir cole este código:










<div class="slider-wrapper theme-default"><div class="ribbon"></div><script src="http://teste.bymetemplates.zip.net/galleryposts.js"></script>


<script>


var numposts_gal = 6;   //number of posts


var image_height = 246; //image height


var image_width = 618;  //image width


</script>


<script src="http://ENDEREÇODOBLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>


</div>






EXEMPLO






<div class="slider-wrapper theme-default">


<div class="ribbon"></div>


 <script style="text/javascript" src="https://sites.google.com/site/jbollton/arquivo/GallerySlide.js"></script>


<script style="text/javascript">


 var numposts_gal = 10;   //number of posts


 var image_height = 320; //image height


 var image_width = 610;  //image width


</script>


<script src="http://postsinteressantes.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>


</div>












FONTE:
Related Posts Plugin for WordPress, Blogger...
Posts Relacionados