Slide automático com posts recentes

| |

domingo, 25 de janeiro de 2015

Minhas flor de maracujá
Tudo bem com vocês?



Perceberam que não postei esses dias? então, tenho motivos lá vem eu, com minhas desculpas ahah.

Quinta-feira eu não postei porque resolvi modificar o blog, mudei muita coisa, vejam meu ultimo post, onde falo do novo layout e vejam agora, mudei bastante coisa rs

Sexta-feira eu não postei porque o blog bugou, não queria aparecer os códigos e eu entrem em pani, porque eu não sabia o que fazer, como muitos sabem, eu não sou web design ainda não, mas um dia eu serei webmaster, tudo que sei, aprendi na internet, mas uma AMIGA ILUMINADA, me ajudou nessa, se quer fazer seu template, fale com ela, ela é uma web boa demais e super gente boa, clique aqui e conheça o trabalho da Carol Mascarenhas.

Agora sem enrolação vamos ao post -risos-.




Hoje vou ensinar a colocar o bendito slide e automático, porque não sei vocês, mas odeio aquela trabalheira do slide manual, ahahah preguiçosa.com

Vamos ao tutorial!


Vá em:  modelo → Editar html

Aperte Ctrl+F para abrir a caixinha de pesquisas.



Agora procure por:


]]></b:skin>


 E logo acima 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 rosa está a cor do plano de fundo das legendas.


Procure por:

</head>

E acima cole o seguinte 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>

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. 



Então esse é o tutorial pessoal, espero que consigam, qualquer dúvida ou erro, falem aqui nos comentários e te ajudarei, com toda certeza!

Beijo e fiquem com Deus!



Nenhum comentário:

Postar um comentário