Hey galerinha ! Gostaram do novo Lay ? Achei que ficou bem bonito , como o outro era só duas cores resolvi fazer nesse lay uma coisa mais colorida !Mais vamos ao que enteressa .
Vocês sabem que eu nunca coloquei um slide aqui no blog , pelo motivo de eu ter muita preguissa , porque slides são muitos complicados e tal , tem que ficar trocando de foto e link sempre , e isso e muito chato né !
Ai eu fui procurando como fazer um slide que não tem todas essas preocupações todas até que eu achei no blog :ECLETICUS então todos os creditos a ele !
Quer aprender ? e bem facinho .
1º Vá em Designer > Editar HTML e procure pela seguinte tag ]]></b:skin>
2º Acima dela coloque o seguinte código.
/*----- INÍCIO DO SLIDE ----------------------------------------*/3º Depois procure por </body> e acima dele coloque o código abaixo.
.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: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;
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:100px auto 50px auto;
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
<!-- jQuery -->4º Em seguida salve.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://teste.bymetemplates.zip.net/nivo-slider-modified.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
5º Agora vá em Designer e adiciona um novo HTML/Javascript e cole o seguinte código.
<div class="slider-wrapper theme-default">6º O código destacado de vermelho se refere a quantidade post que você deseja mostrar no slide, o meu eu coloquei 6. MAIS AI FICA AO SEU CRITERIO
<div class="ribbon"></div>
<script style="text/javascript" src="http://teste.bymetemplates.zip.net/galleryposts.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height = 246; //image height
var image_width = 618; //image width
</script>
<script src="LINK DO SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>
7º O código destacado de azul, se refere a largura(width) e altura(height) do slide, caso não esteja ao seu gosto, só mudar os número para o tamanho desejado.
8º O código destacado de laranja se refere ao endereço do seu blog.
Atenção, só troque a parte destacada de laranja, nada de passar dai.
Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.
kisuus
Ótimo tutorial, deve ser boa essa slide assim não precisa ficar atualizando né =D
ResponderExcluirBeijos
e sim , e totalmente automatico só basta você colocar o link do blog e pronto !
Excluirbeijos
Adorei o tuto! Seguindo aqui e lhe convido a visitar e seguir meu blog.
ResponderExcluirBeijos e uma ótima semana!
Blog: http://blogparisvie.blogspot.com.br/
Instagram: @gibertolini
owww! obrigada por seguir e fico feliz que tenha gostado do tuto! visito SIM!
Excluirbeijos
Amei o tuto *--*
ResponderExcluirQuem sabe,um dia eu use...
Segue esse blog ammr?http://mygoodies1.blogspot.com.br/ :3
Beijos
que bom que você gostou MB!
Excluirbeijos
Gostei do tutorial, o efeito é incrivel! Sempre quis saber como fazia!
ResponderExcluirSeu blog é lindo!
TRASH ROCK
e sim o efeito fica lindo e bem facinho né!
Excluirobrigada!
=D
Eu não conhecia, mas achei super interessante.. Talvez use foi muito útil :3
ResponderExcluirBeijos,Morangos Silvestres
NO MEU PROXIMO LAY EU VOU USAR CONCERTEZA , E SIM É MUITO UTIL!
ExcluirBEIJOS =)
muito bom mesmo esse slide de postagens recentes, alias, o melhor. meus parabéns pelo ótimo trabalho linda, espero que seu blog continue crescendo sempre, pois tem tudo para isso. quando quizer um download revolucionário, esteja avontade para visitar o meu blog:
ResponderExcluirhttp://leandroultradownloads.blogspot.com.br/
Mais uma vez muito obrigado mesmo pelo tutorial, vou adicionar esse seu tutorial e dar os créditos ao seu site, pois um bom trabalho tem muito valor pra mim. um beijão e até mais ver minha linda.
Tifane Alves gostei muito do slide que você postou como faz. Eu queria saber como faz para ele passar no google chrome? Porque lá fica sem as setas e a descrição. Obrigado pela dica!
ResponderExcluireu fiz tudo certinho mas quando eu salvo ,não aparece o slide me ajuda por favor !
ResponderExcluirobrigado adorei http://meumundoilusao.blogspot.com.br/
ResponderExcluirObrigado sua linda
ResponderExcluir