20/09/2016

" Dicas Para Blogger"



Tutorial: Slider Automático com Posts Recentes 




      Oi pessoal, hoje vou mostrar para vocês como fazer um slide para blogger, ele funciona automaticamente, você não precisa está trocando direto as imagens, assim que você fizer algum post novo, ele vai automaticamente para o slide. Então, decidi mostrar esse tutorial aqui pra vocês, espero que gostem e que agradem a todos. 





1 - No painel do Blogger vá em MODELO -> Editar HTML. Clique na área de códigos do template e aperte Ctrl + F para abrir a caixa de pesquisa.


Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados. 

 - Pesquise por ]]></b:skin> e logo acima disso adicione o código seguinte:

   /*----- INÍCIO DO SLIDER  ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://4.bp.blogspot.com/-ly7fzdRVYSw/Unaw16dpWOI/AAAAAAAAB98/Y-MCamn7gTg/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://lh6.googleusercontent.com/-0EkJ0yn2heg/VFk-76AZAZI/AAAAAAAADjs/93B4rr-mLvA/s40/BolinhaCinza.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://2.bp.blogspot.com/-ZfMy0_axq9I/UnaxF7X_BgI/AAAAAAAAB-M/F4rPrDMd2Xo/s1600/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;
}

/* 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:#888888;
color:#fff;
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; /* Aqui você define a posição do slide */
width:600px;
height:300px;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
/*----- FIM DO SLIDER ----------------------------------------*/

Em azul está o tamanho em pixels da altura de cada slide.
Em verde está o tamanho em pixels da largura de cada slide.
Em lilás está o código da imagem dos controladores (os coraçõezinhos que controlam os slides).
Em rosa está a cor do plano de fundo das legendas.



2 - Pesquise por </head> e acima cole o código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9634421461/nivo-slider-modified-min.js' type='text/javascript'/>
<script type='text/javascript'> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider(); }); </script>


3- Agora vá na aba LAYOUT. Adicione um novo gadget e escolha HTML/Java Script. Nele, cole o código:




<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<script style="text/javascript" src="http://yourjavascript.com/9644611160/galleryslide.js"></script>
<script style="text/javascript">
var numposts_gal = 4;   //number of posts
var image_height = 300; //image height
var image_width = 600;  //image width
</script>
<script src="http://ENDEREÇO DO SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>



 Troque o trecho rosa pelo endereço do seu blog.

Em vermelho está o número de slides.
Em azul está o tamanho em pixels da altura de cada imagem do slide.
Em verde está o tamanho em pixels da largura de cada imagem do slide.
Lembre-se de deixar o tamanho das imagens igual ao tamanho dos slides no passo 2.

 Gente é super fácil. Não tem erro. Porém qualquer problema que dê ou alguma dúvida vocês podem deixar aqui abaixo nos comentários.
    E se gostarem desse tutorial e quiserem ver outros é só deixar os pedidos aqui abaixo. Estarei sempre trazendo tutoriais relacionados a blogosfera e entre outros temas. 



Nenhum comentário:

Postar um comentário