Slide Com Posts Recentes Automático No Blogger
17:00
Olá Amoras!! Tudo bem com vocês? Esse é mais um tuto bem legal para vocês. Só eu que acho que o slide da um toque a mais em um blog?
Eu acho slides super legais mas da uma preguiça só de pensar em ficar toda hora mudando as imagens e tal.. então eu fui atrás de um slide que atualizasse sozinho, e não é que eu achei!!
Quer conferir? Clica em Leia Mais
Vamos começar?
Primeiro vá em Modelo>Editar HTML de um Ctrl + F e procure por ]]></b:skin> acima dele cole esse código:
/*----- INÍCIO DO SLIDE ----------------------------------------*/.theme-default .nivoSlider {position:relative;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMVleO9W-MONvb1iDuyYaVNvGu3PzXwVwuyRGyWxeahuZCffHoLsfP5eGjTCrTfkOvLfvgpxTiIyrGRLHnHgvgZcnw2_xBtXv0mqFln6ePnS7VJkDqmohz68IteC-89UQl7bXtvdOhI00/s1600/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:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGqZdSQVtbhxiS33ZJ6NN8723Waiccv3Xg-wBpN949fdChxz7lIxtpsdjIlM_H0lZ4-oxwIPguhql53B7nQsxIitrYFzwS20TO6DWWj2n8nSC23ipvFG3-yogJ6GJXHk9-nGiOlq9Lrk/s1600/bullets.png) no-repeat; /*URL da imagem da bolinha*/ 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfkOycPUVaMH7OCw2z5KheYXs2Dif0Fjq1EWE03O9Wxhg-XHf1-46CMgkbWsZxk_0cPjLY1ONY_cn5KCWF85Vk7Iv3nOGQtiBSDTK6TN-Dc2BRzhgSLSUCuM1KqqoQWqYQpwbL9zubsQQ/s1600/arrows.png) no-repeat; /*URL da imagem da seta*/
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 da fonte da legenda*/ opacity:0.8; /* Overridden by captionOpacity setting */ width:100%;height:50px; z-index:8;}.nivo-caption p { padding:10px; margin:0;font-size:15px;}.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;width:610px; /* Aqui você define a largura do slide */ height:300px; /* Aqui você define a altura do slide */ }.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper { margin-top:150px;}.clear { clear:both;}
Mude apenas onde está Destacado !!
Pesquise agora por </head>, logo acima dele cole isso:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/34324213544/nivo-slider-modified-min.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
Clique em Salvar Modelo
Agora vá em Layout>Adicionar um gadget>HTML/JavaScript e cole esse código:
<div class="slider-wrapper theme-default"><div class="ribbon"></div> <script style="text/javascript" src="http://yourjavascript.com/42432749341/galleryslide.js"></script><script style="text/javascript"> var numposts_gal = 4; //number of posts /* Quantidade de posts que vão aparecer */var image_height = 300; //image height /* Altura das imagens */var image_width = 610; //image width /* Largura das imagens */</script><script src="http://endereçodeseublog/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script></div>
Altere apenas onde está Destacado!!
Pronto, agora é só visualizar para ver se está tudo certinho!!
Créditos: Pro Developer.
1 comentários
Você poderia dizer qual são as partes destacadas ... está tudo em negrito
ResponderExcluirFique a vontade para expressar a sua opinião mas se lembre dessas regrinha:
-Comentários desrespeitosos serão excluídos.
-Comentários do tipo " Estou te seguindo me segue de volta ? " serão ignorados. Faça um comentário sobre o post em questão e deixe o link do seu blog no final do comentário , ficarei feliz de entrar no seu blog!
Obrigada