Slide nas Postagens
Autor: Kelly Costa | Publicado: 2016-01-28T08:32:00-08:00





Olá pessoal, tudo bom? Hoje estarei ensinando um tutorial que há muito tempo me pedem, então, clique em Leia Mais para acompanhar!




ATENÇÃO! Esse tutorial exige um nível de conhecimento mais elevado em edição de html. Se você não é acostumada a editar muito, recomendo poucas alterações, pois o código é muito sucetível a erros! Recomendo também, em caso de erro, ter uma cópia do seu layout salva no computador.


&nbsp;&nbsp;TUTORIAL FEITO COM CARINHO POR UPRISING TEEN, NÃO REPASSE SEM CRÉDITOS&nbsp;

TUTORIAL


Vamos começar! Primeiro, abra o editor HTML do seu blog e procure por &nbsp;]]&gt;&lt;/b:skin&gt; &nbsp;e acima cole:


#divMenu, .divMenu {background: none; /* Fundo de onde fica as imagens miniatura */clear:both; /* Não mexa */height:90px; /* Altura de onde fica as miniaturas */margin-left:0px; /* Não mexa */padding: 70px 0px 10px; 0px; /* Margem interna */text-align:left; /* Não mexa */width:520px; /* Laargura */}#divMenu li, .divMenu li { list-style:none; /* Não mexa */float:left; /* Não mexa */overflow:hidden; /* Não mexa */padding:5px; /* Margem interna de onde fica as miniaturas */}#btnPE, #gb, #btnPD, .btnPE, .gb, .btnPD {float:left; /* Não mexa */}#btnPE, #btnPD, .btnPE, .btnPD {height:50px; /* Altura do Botão */width:50px; /* Largura do Botão */}#btnPD, .btnPD { /* Botão avançar */background: url(URL_DO_BOTÃO) 0px 0 no-repeat;margin:5px 0 0; /* Margem */z-index:1000; /* Não mexa */}#btnPE, .btnPE { /* Botão voltar */background:url(URL_DO_BOTÃO) 0px 0 no-repeat;margin:5px 0 0 5px; /* Margem */z-index:1000; /* Não mexa */}#btnPE a, #btnPD a, .btnPE a, .btnPD a {overflow:hidden; /* Não mexa */display:block; /* Não mexa */text-indent:-2000px; /* Não mexa */width:50px; /* Largura do Botão */height:50px; /* Altura do Botão */}#btnPE a, .btnPE a { /* Botão voltar */background:url(URL DO BOTÃO QUE APARECE AO PASSAR O MOUSE SOBRE A IMAGEM) 0 0 no-repeat;}#btnPD a, .btnPD a { /* Botão avançar */background:url(URL DO BOTÃO QUE APARECE AO PASSAR O MOUSE SOBRE A IMAGEM) -65px 0 no-repeat scroll; /* Dependendo da largura do seu slide, você altera o -65px */}#gb, .gb { /* Ícones */overflow:hidden;width:410px; /* Largura da área interna dos ícones */height:90px; /* Altura da área interna dos ícones */text-align:left; /* Não mexa */padding-top:10px; /* Margem acima */}.atual {border: solid 5px #COR_AQUI; /* Borda do item selecionado */}.none {border: 5px solid #COR_AQUI; /* Borda do item não selecionado */}/*.imgThumb {width:80px; /* Largura do container onde fica cada miniatura individual */height:80px; &nbsp;/* Altura do container onde fica cada miniatura individual */}*/#bordaImg, .bordaImg { &nbsp;/* Área onde a Imagem fica */background: none; /* Cor de fundo */margin-left:0px; /* Margem esquerda */margin-right:0px; &nbsp;/* Margem direita */overflow:hidden; &nbsp;/* Não mexa */padding:10px 10px 5px 10px; &nbsp;/* Margem interna (topo, lado, lado, embaixo) */position:relative; &nbsp;/* Não mexa */text-align:center; &nbsp;/* Não mexa */width:500px; &nbsp;/* Largura */}#bordaImg img, .bordaImg img {margin:auto; /* Não mexa */}#bordaImg h4, .bordaImg h4 { /* Margem direita */position:absolute;bottom:10px;left:-45px;padding:8px 10px;color:#fff;background: none;font-size:13px;font-family:Arial;font-weight:100;}#ftAnt a, #ftPro a, .ftAnt a, .ftPro a { /* Área onde aparecem as setas sob a imagem, não é necessário mexer */width:50%;height:350px; /* Se você escolher um tamanho maior que 500px para suas imagens, é recomendado aumentar a altura aqui */position:absolute;top:0;}#ftAnt a, .ftAnt a { /* anterior */left:0;}#ftPro a, .ftPro a { /* próximo */left:50%;}#ftAnt a:hover, .ftAnt a:hover {background:url(URL DA IMAGEM SETA QUANDO O MOUSE ESTÁ EM CIMA) 10px 50% no-repeat;}#ftPro a:hover, .ftPro a:hover {background:url(URL DA IMAGEM SETA QUANDO O MOUSE ESTÁ EM CIMA) 200px 50% no-repeat;}.esconde {display:none;}#divMini, .divMini { /* Não é necessário mexer aqui */background:none;margin:0 !important;padding:0px !important;}.materia .galleryHome ul{margin:0 0 0px 0;width:500px; &nbsp;/* Altere para o tamanho da imagem que você quer */overflow:hidden;background:none;padding:0;}.galleryHome ul li{ &nbsp;/* Não é necessário mexer aqui */float:left;padding-right:5px;list-style:none;}.galleryHome p{font-size:13px; &nbsp;/* Tamanho da fonte dentro da caixinha */padding:0px 0;}.galleryHome ul li img{border:none;}.descrifoto{ &nbsp;/* Área da Caixinha com a Descrição da Imagem */background: #DB7093; &nbsp;/* Cor de fundo */color:#FFFFFF; &nbsp;/* Cor da fonte */text-align:justify; &nbsp;/* Alinhamento do texto: Justificado */height:60px; &nbsp;/* Altura da caixinha */margin:-3px 0 0 10px !important; &nbsp;/* Margem, altere se necessário*/font-family:Arial; &nbsp;/* Fonte, personalize se desejar */padding:10px; &nbsp;/* Margem interna, altere se necessário */position:absolute; &nbsp;/* Não mexa */width:482px; &nbsp;/* Tamanho da Caixinha (deve ser menor que o tamanho normal da imagem) */}.descrifoto a {color:#fff; &nbsp;/* Cor do Texto */}

Após feito isso, procure por &nbsp;&lt;/head&gt; &nbsp;e acima cole:

Clique aqui para ver o script deste slide &nbsp;(o link abre em outra guia)

Tudo certo? Clique em &nbsp;SALVAR &nbsp;e vamos agora para a etapa final (e na minha opinião, a mais complicada): a edição da postagem!

Clique em "Nova Postagem" e vamos colocar as mãos a obra!

Escreva normalmente seu post e quando quiser adicionar o slide, clique em HTML e cole:


&lt;div class="bordaImg" id="bordaImg01"&gt;&lt;div class="ftPro"&gt;&lt;a href="javascript:next_imagens('01','prox');"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="ftAnt"&gt;&lt;a href="javascript:next_imagens('01','ant');"&gt;&lt;/a&gt;&lt;/div&gt;&lt;img src="URL DA IMAGEM 0" /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;div class="descrifoto" id="boxDesc010"&gt;DESCRIÇÃO DA IMAGEM 0&lt;/div&gt;&lt;div class="descrifoto" id="boxDesc011"&gt;DESCRIÇÃO DA IMAGEM 1&lt;/div&gt;&lt;div class="descrifoto" id="boxDesc012"&gt;DESCRIÇÃO DA IMAGEM 2&lt;/div&gt;&lt;div class="descrifoto" id="boxDesc013"&gt;DESCRIÇÃO DA IMAGEM 3&lt;/div&gt;&lt;div class="descrifoto" id="boxDesc014"&gt;DESCRIÇÃO DA IMAGEM 4&lt;/div&gt;&lt;div class="descrifoto" id="boxDesc015"&gt;DESCRIÇÃO DA IMAGEM 5&lt;/div&gt;&lt;div class="divMenu" id="divMenu01"&gt; /* Área do Botão "Fotos Anteriores" */&lt;div class="btnPE" id="btnPE01"&gt;&lt;a href="#foto" onmouseout="ScrollStop();" onmouseover="ScrollEsq('gb01');" title="Fotos anteriores"&gt;Fotos anteriores&lt;/a&gt;&lt;/div&gt;/* Área das Miniaturas das Imagens*/&lt;div class="gb" id="gb01"&gt;&lt;ul class="diviMini" id="divMini01"&gt;/* Miniatura da Imagem 0 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','0');return false;"&gt;&lt;img class="atual" height="ALTURA" id="imgThumb010" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;/* Miniatura da Imagem 1 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','1');return false;"&gt;&lt;img class="none" height="ALTURA" id="imgThumb011" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;/* Miniatura da Imagem 2 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','2');return false;"&gt;&lt;img class="none" height="ALTURA" id="imgThumb012" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;/* Miniatura da Imagem 3 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','3');return false;"&gt;&lt;img class="none" height="ALTURA" id="imgThumb013" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;/* Miniatura da Imagem 4 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','4');return false;"&gt;&lt;img class="none" height="ALTURA" id="imgThumb014" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;/* Miniatura da Imagem 5 */&lt;li&gt;&lt;a href="URL DA IMAGEM" onclick="mostra_imagens('01','5');return false;"&gt;&lt;img class="none" height="ALTURA" id="imgThumb015" src="URL DA IMAGEM" width="LARGURA" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btnPD" id="btnPD01"&gt; /* Área do Botão "Próximas Fotos" */&lt;a href="#foto" onmouseout="ScrollStop();" onmouseover="ScrollDir('gb01');" title="Próximas fotos"&gt;Próximas fotos&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;/* Área onde fica as Imagens */&lt;script type="text/javascript"&gt;&nbsp; &nbsp; &nbsp; &nbsp;if (imagens == undefined) {&nbsp; &nbsp; &nbsp; &nbsp; var imagens = new Array();&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;imagens[01] = new Array();&nbsp; &nbsp; &nbsp; &nbsp;imagens[01][0] = 'URL_DA_IMAGEM_0';imagens[01][1] = 'URL_DA_IMAGEM_1';imagens[01][2] = 'URL_DA_IMAGEM_2';imagens[01][3] = 'URL_DA_IMAGEM_3';imagens[01][4] = 'URL_DA_IMAGEM_4';imagens[01][5] = 'URL_DA_IMAGEM_5';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (imagensD == undefined) {&nbsp; &nbsp; &nbsp; &nbsp; var imagensD = new Array();&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;imagensD[01] = new Array();&nbsp; &nbsp; &nbsp; &nbsp;imagensD[01][0] = 'URL_DA_IMAGEM_0'; /* Não é necessário colocar o URL &nbsp;das outras imagens, coloque só o da imagem 0 mesmo */imagensD[01][1] = '';imagensD[01][2] = '';imagensD[01][3] = '';imagensD[01][4] = '';imagensD[01][5] = '';&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('divMini01').style.width = imagens[01].length*114+"px"; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;if (heranca == undefined) { var heranca = new Array(); }&nbsp; &nbsp; &nbsp; &nbsp;heranca[01]=0;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/script&gt;
Um tanto complexo certo? Mas tente preencher adequadamente o código, sempre tomando o cuidado de verificar se possui erros ou não. Agora vamos para mais um pouco de explicações!

&nbsp;Sobre o número que se repete e está destacado assim: &nbsp;Esse número, 01, significa que é seu slide número 1. Se você quiser adicionar esse slide em outras postagens, terá que trocar esse 01 e colocar 02 e assim sucessivamente! Sempre lembre de checar que o número do slide está certo em todos os lugares certos, pois se não acontecerá erros!

As imagens tem tamanho certo: É sempre necessário verificar ser as imagens estão com o tamanho certo ao que você colocou no slide. Se é 500px, as suas imagens devem ter exatamente este tamanho.

Preenchido corretamente, clique em &nbsp;PUBLICAR &nbsp;e veja se está tudo certo.


&nbsp; TUTORIAL FEITO COM CARINHO POR UPRISING TEEN, NÃO REPASSE SEM CRÉDITOS&nbsp;



Espero que tenham curtido o tutorial, eu realmente demorei a trazer pois achei que ele era meio complexo! Mas espero que tenham entendido tudo!

Dúvidas ou erros com o procedimento deste tutorial? Comente aí ;)