Eu sempre Quis colocar deslize nenhum blog de teste, mas de Todos os modelos Que Eu conhecia precisavam Editar e hospedar como Imagens para Poder atualizar.Então, pesquisei, pesquisei, pesquisei (Perguntei Ao Professor Meu) E encontrei Dois Códigos de desliza that atualizam automáticamente.
Gostaram? Agora Vamos ao tutorial!
1º-Vá em Modelo> Editar HTML e Procuradoria tag Pela Abaixo:
]]> </ B: skin>
2º-Acima dela cole o código Abaixo:
/ * ----- INÍCIO DO SLIDE ---------------------------------------- * /
.theme-default .nivoSlider {
position: relative;
background: url #fff (http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% a 50%;
-webkit-box-shadow: 0px 0px 1px 5px # 4a4a4a;
-moz-box-shadow: 0px 0px 1px 5px # 4a4a4a;
box-shadow: 0px 0px 1px 5px # 4a4a4a;
}
.theme-default img {.nivoSlider
position: absolute; top: 0px; left: 0px; display: none;
}
.theme-default .nivoSlider a {
border: 0; display: block;
}
.theme-default .nivo-controlNav {
position: absolute; left: -20%; bottom: -25px;
margin-left: 60px; / * Posicionamento dos botoes * /
}
.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;
}
a.active .nivo-controlNav .theme-default {
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; direita: 15px;
}
.theme-default a.nivo-prevNav {
left: 15px;
}
.nivo-caption .theme-default {
font-family: Helvetica, Arial, sans-serif;
}
-caption .nivo .theme-default a {
color: # fff;
border-bottom: 1px #fff pontilhada;
}
.theme-default .nivo-caption a: hover {
color: # fff;
}
/ * ----- END Tema padrão ---------------------------------------- * /
/ * Os estilos Nivo Slider * /
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute; top: 0px; left: 0px;
}
/ * Se uma imagem é envolto em um 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;
}
/ * As fatias e caixas no Slider * /
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/ * Estilos de legenda * /
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: # 000; / * Cor do Fundo da legenda * /
color: # fff; / * Cor do texto da legenda * /
opacidade: 0,8; / * Substituída configurando captionOpacity * /
width: 100%; / * Comprimento do Fundo da legenda * /
height: 45px; / * Altura do Fundo da legenda * /
z-index: 8;
border: 3px tracejado # 000; / * Cor da borda * /
}
.nivo-caption p {
padding: 5px;
margin: 0;
font-size: 12px; / * Tamanho da fonte da legenda * /
}
.nivo-caption a {
! display: inline importante;
}
.nivo-html-caption {
display: none;
}
/ * Estilos Direction nav (eg Próximo & Prev) * /
.nivo-directionNav um {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
direito: 0px;
}
/ * Estilos nav Controle (por exemplo 1,2,3 ...) * /
.nivo-controlNav um {
position: relative;
z-index: 9;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
#slider .theme-default {
margin: 20px -5px -20px 0px; / * Aqui rápido você definir uma posição fazer slides * /
width: 300px; / * Altura da Imagem * /
height: 250px; / * Comprimento da Imagem * /
}
.theme-pascal.slider-wrapper,
-.theme-orman.slider invólucro {
margin-top: 150px;
}
.clear {
clear: both;
}
Lembrando Que deixei OS Lugares Especificado nenhum código Acima Para Que rápido Você POSSA altera, cor da borda, cor de Fundo da legenda, TAMANHO fazer slide, TAMANHO da Fonte e etc ... Mas QUALQUÉR duvida envie hum comentário Que estarei here to auxiliar Voce. ..
3º- DEPOIS adquirir </ body> e Acima DELE coloque o código Abaixo.
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type = "text / javascript"> </ script> <script src = "https: // sites.google.com/site/tdevdev/dev2/nivo-slider-modified.min.js "type =" text / javascript "> </ script> <script type =" text / javascript "> $ (window) .load (function () {$ (& # 39; # deslizante & # 39;). nivoSlider ();}); </ Script>
4º- Salve. Agora Vá em LAYOUT e Preço total: Adicionar GADGET E Depois HTML / Javascript e cole o código SEGUINTE:
<Div class = "slider-wrapper tema-default">
<Div class = "fita">
</ Div>
<Script src = "https://sites.google.com/site/jbollton/arquivo/GallerySlide.js"> </ script>
<Script>
var numposts_gal = 12; / * Numero de slides um Ser mostrado * /
var image_height = 250; / * Altura da Imagem * /
var image_width = 300; / * Comprimento da Imagem * /
</ Script>
<Script src = "ENDERECO DO BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</ Div>
<Div align = "center">
<Span style = "font-family: arial; font-size: 14-small;"> <a Widget por href="Link Do Seu Blog" target="_blank"> </a> Bizu Online - <a href = "http://bizuonline.blogspot.com.br/2013/10/como-colocar-slide-automatico-que.html" target = "_ blank"> Instale este Gadget </a> </ span> </ div>
OBS: Onde Está ENDERECO DO BLOG (MAIÚSCULO), DEVE rápido Você Change cabelo ENDEREÇO fazer Seu blog.
Lembrando AINDA that also deixei Especificado OS Lugares Para Que rápido Você POSSA Change o numero de slides, altura da Imagem, Largura da Imagem. Mas se rápido você altera a altura da Imagem e da Largura da Imagem, must Fazer o MESMO Procedimento não Cima código colado em fazer]]> </ b: skin>, Para Que Seu desliza Padrão Fique ... No entanto, QUALQUÉR tipo de duvidas estarei pronto Pará Ajuda-lo.
Entao, gostaram, Me Fale Nos Comentarios.
Nenhum comentário:
Postar um comentário