quinta-feira, 20 de junho de 2013
Como criar uma linha em HTML
Olá galera hoje vou mostrar como colocar uma linha em html em seu blog
Vamos a explicação ▼
1° Passo: O que está em vermelho é a largura da linha, se você deseja que a linha tenha exatamente a largura do seu blogger basta você alterar: "40" por "100%"
2° Passo: O que está em verde é a cor da linha, você pode alterar: color=red> por color= #3b5999>
3° Passo: Veja outros códigos de cores clicando neste link: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Espero ter ajudado galera até a proxima e boa 5° feira a todos.
O código é bem simples basta você copiar e colar onde deseja, ok vamos ao código ▼
<hr align="center" width="40" size="1" color=red>
Vamos a explicação ▼
1° Passo: O que está em vermelho é a largura da linha, se você deseja que a linha tenha exatamente a largura do seu blogger basta você alterar: "40" por "100%"
2° Passo: O que está em verde é a cor da linha, você pode alterar: color=red> por color= #3b5999>
3° Passo: Veja outros códigos de cores clicando neste link: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Espero ter ajudado galera até a proxima e boa 5° feira a todos.

quarta-feira, 19 de junho de 2013
Como colocar uma caixa de fans like a box no blogger
Olá galera tudo beleza com vocês ? Espero que sim!
Bom vamos ao post de hoje.
Todos sabem que o facebook é a maior rede social do momento, então muitos se perguntam como colocar aquela caixa do facebook que aparecem em sites e blogs?
Bom primeiro você tem que criar uma página no facebook e depois pegar o link mais vamos ao detalhes▼
1° Passo: Após criar a sua página no site facebook de um click em página inicial veja a foto abaixo ▼
2° Passo: Copie o link da pagina que você deseja, veja o exemplo na imagem abaixo▼
Att.
Bom vamos ao post de hoje.
Todos sabem que o facebook é a maior rede social do momento, então muitos se perguntam como colocar aquela caixa do facebook que aparecem em sites e blogs?
Bom primeiro você tem que criar uma página no facebook e depois pegar o link mais vamos ao detalhes▼
1° Passo: Após criar a sua página no site facebook de um click em página inicial veja a foto abaixo ▼
![]() |
Click na imagem para ampliar |
Click com o botão direito do seu mouse sobre a página que deseja e depois click em "copiar endereço do link"
3° Passo: Apos copiar o endereço do link entre nesse site: http://developers.facebook.com/docs/reference/plugins/like-box/
Onde está em vermelho apague e cole o link que você copiou no lugar.
4° Passo: Depois personalize a seu gosto clicando em: Show Faces | Show Border | Show Header
5° Passo: Após personalizar click em: GET CODE e escolha a opção Inframe, copie o código e cole no html/javascript de seu blog.
É isso galera espero ter ajudado qualquer coisa só perguntar no bloco mensagem ▼
![]() |
Click na imagem para ampliar |
Att.
Danilo Hernani Silva

sexta-feira, 14 de junho de 2013
Botão voltar ao topo personalizado
Ola galera hoje vou mostrar como colocar um botão voltar ao topo personalizado, diferente dos tradicionais que é apenas uma imagem ou texto.
Esse modo que irei mostrar a imagem só aparece após o usuário estar vendo a parte de baixo de seu blog ▼
E quando clicar em voltar ao topo ele irá dar um efeito bem legal
Vamos ao processo:
1° Passo: Faça o Backup antes de mecher no código de seu blog.
2° Passo: Vá em modelo + Editar HTML
3° Passo: Click com o botão esquerdo de seu mouse dentro do corpo de códigos e em seguida aperte Ctrl+L
4° Passo: Procure por;
5° Passo: Acima dela cole esse código CSS;
6° Passo: Agora vamos adicionar o script que faz o botão funcionar
Procure por:
7° Passo: Preste bastante atenção o código deve ser colacado acima ▲ de </body> ok
Onde está em Vermelho você coloca a URL da imagem que desejar ok
Salve e visualize.
É isso galera até aproxima
via: elainegaspareto
Esse modo que irei mostrar a imagem só aparece após o usuário estar vendo a parte de baixo de seu blog ▼
E quando clicar em voltar ao topo ele irá dar um efeito bem legal
Vamos ao processo:
1° Passo: Faça o Backup antes de mecher no código de seu blog.
2° Passo: Vá em modelo + Editar HTML
3° Passo: Click com o botão esquerdo de seu mouse dentro do corpo de códigos e em seguida aperte Ctrl+L
4° Passo: Procure por;
]]></b:skin>
5° Passo: Acima dela cole esse código CSS;
/* to top */
#toTop {
<span style="color: #38761d;"> width:50px;</span> /* Largura do botão * /
border:1px solid #000; /* Cor e tipo da borda */
text-align:center; /* Alinhamento do texto */
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:5px;
right:5px;
cursor:pointer;
color:#eee; /* Cor da fonte do botão */
text-decoration:none;
font-weight:700; /* Define o negrito da fonte */
-moz-border-radius:5px; /* Definições para o ângulo do botão */
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
6° Passo: Agora vamos adicionar o script que faz o botão funcionar
Procure por:
</body>
7° Passo: Preste bastante atenção o código deve ser colacado acima ▲ de </body> ok
<a href='#' id='toTop'><img src='AQUI O ENDEREÇO DE SUA IMAGEM'> </img></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Onde está em Vermelho você coloca a URL da imagem que desejar ok
Salve e visualize.
É isso galera até aproxima
via: elainegaspareto

Como colocar páginas numeradas no blogger
Olá pessoal hoje eu vou mostrar como colocar páginas numeradas no blogger ficara parecido com as que eu utilizo aqui no [A Escola Blogger]
<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGQVfxMHE4NeFKH0LPUymaHjnQe3dSWaHIfVsiB9z2V4iuziS3GBfe1JkwIy7wtgR61iA5nAy11hplsj504fCge9ZxS7OM8Fimqu5ZcKKr6RnDxT3LLwdZbYEAtCcJhXD2rgOFolVEtI/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LC2m9du0mkXzCZpEQOziNCnJAHDwMt4u2tcT-_ldzfLY_eRhT-F-ALQ0KQqIIYjP1XByXEJC1JlFlMnaudC5X5xsZpm96HQ39oPzu31F5phl3KygqZynGvy87sxsvtIu0m-gFJA-F2A/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var postperpage=10;var numshowpage=5;var upPageWord="Anterior";var downPageWord="Próxima";var urlactivepage=location.href;var home_page="/"</script><script src='http://code.helperblogger.com/hb-page-navi.js' type='text/javascript'></script>
Não tem segredo galera:
1° Passo: Vá em modelo + Layout
2° Passo: Click em Adicionar um gadget, escolha a opção <HTML JavaScript>
3° Passo: Cole e arraste como a figura acima ▲ mostra
É isso galera falei que seria simples, abraço
Veja a imagem ▼
Como o blog dessa maneira da um tom de profissionalismo e facilita a navegação de seus leitores.
Para instala-lo é bem simples, simples mesmo veja a imagem abaixo ▼
Vamos ao código ▼
<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGQVfxMHE4NeFKH0LPUymaHjnQe3dSWaHIfVsiB9z2V4iuziS3GBfe1JkwIy7wtgR61iA5nAy11hplsj504fCge9ZxS7OM8Fimqu5ZcKKr6RnDxT3LLwdZbYEAtCcJhXD2rgOFolVEtI/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LC2m9du0mkXzCZpEQOziNCnJAHDwMt4u2tcT-_ldzfLY_eRhT-F-ALQ0KQqIIYjP1XByXEJC1JlFlMnaudC5X5xsZpm96HQ39oPzu31F5phl3KygqZynGvy87sxsvtIu0m-gFJA-F2A/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var postperpage=10;var numshowpage=5;var upPageWord="Anterior";var downPageWord="Próxima";var urlactivepage=location.href;var home_page="/"</script><script src='http://code.helperblogger.com/hb-page-navi.js' type='text/javascript'></script>
Não tem segredo galera:
1° Passo: Vá em modelo + Layout
2° Passo: Click em Adicionar um gadget, escolha a opção <HTML JavaScript>
3° Passo: Cole e arraste como a figura acima ▲ mostra
É isso galera falei que seria simples, abraço

segunda-feira, 10 de junho de 2013
Como retirar aquele aviso de "NÃO HÁ POSTAGEM"
Muitas pessoas quando começam há desenvolver seus blogs se deparam com algumas dificuldades, por exemplo quando comecei a desenvolver meu blog de telefones comerciais da cidade de Pirassununga SP, onde eu moro me deparei com uma situação estranha, pois na página principal de meu blog não iria ter nenhuma postagem pois seria um blog de pesquisa e então ficou aquela coisa ridicula "Não existe nenhuma postagem"
Para resolver esse problema é super fácil, veja o exemplo
Vamos ao processo:
5° Passo: Pesquise somente pela linha vermelha é mais fácil de achar e assim que encontrar apague todo o código acima.
É isso galera espero que tenham gostado e até a próxima
Abraços.
Para resolver esse problema é super fácil, veja o exemplo
![]() |
Click na imagem para ampliar |
Vamos ao processo:
1° Passo: Faça download em sua conta no blogger e click em "Modelo"
2° Passo: Click em "Editar HTML"
3° Passo: De um click dentro da área de códigos com o botão esquerdo de seu mouse e em seguida aperte "Ctrl + F", para abria a barra de pesquisa
4° Passo: Pesquise por:
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-bg'>
<div class='status-msg-hidden'>< data:navMessage/></div>
</div>
</div>
<data:navMessage/>
</div>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><
</div>
</div>
5° Passo: Pesquise somente pela linha vermelha é mais fácil de achar e assim que encontrar apague todo o código acima.
É isso galera espero que tenham gostado e até a próxima
Abraços.

Código HTML para textos
Olá galera tudo beleza com vocês, já faz tempo que eu não posto então mãos as obras e vamos lá !
Hoje eu irei mostrar como usar códigos HTML para dar efeito em textos, vale lembrar que a sua criatividade é tudo e só depende de você.
Vamos aos códigos:
Fundo vermelho:
SEU TEXTO AQUI
<div style="background-color: red;"> SEU TEXTO AQUI </div>
Fundo laraja:
SEU TEXTO AQUI
<div style="background-color: orange;"> SEU TEXTO AQUI </div>
Fundo amarelo:
SEU TEXTO AQUI
<div style="background-color: yellow;"> SEU TEXTO AQUI </div>
Fundo limão:
SEU TEXTO AQUI
<div style="background-color: limegreen;"> SEU TEXTO AQUI </div>
Fundo azul claro:
SEU TEXTO AQUI
<div style="background-color: lightblue;"> SEU TEXTO AQUI </div>
Fundo roxo:
SEU TEXTO AQUI
<div style="background-color: purple;"> SEU TEXTO AQUI </div>
Fundo rosa:
SEU TEXTO AQUI
<div style="background-color: pink;"> SEU TEXTO AQUI </div>
Fundo preto:
SEU TEXTO AQUI
<div style="background-color: black; color:white;"> SEU TEXTO AQUI </div>
Texto apertado:
SEU TEXTO AQUI
<div style="letter-spacing: -3px"> SEU TEXTO AQUI </div>
Texto apertado grande:
SEU TEXTO AQUI
<span style="line-height: 115%; font-family: 'Georgia', 'serif'; letter-spacing: -5.6pt; font-size: 38pt"> SEU TEXTO AQUI </span>
Borda pontilhada:
SEU TEXTO AQUI
<div style="border: 2px dotted red;"> SEU TEXTO AQUI </div>
Fundo rosa com texto no centro:
SEU TEXTO AQUI
<div style="padding: 10px; color: rgb(255, 255, 255); position: relative; background-color: hotpink; text-align: center;"> SEU TEXTO AQUI </div>
Fundo preto com texto no centro:
SEU TEXTO AQUI
<div style="padding: 10px; color: rgb(255, 255, 255); position: relative; background-color: black; text-align: center; text-color:white;"> SEU TEXTO AQUI </div>
Borda sólida:
SEU TEXTO AQUI
<div style="border: 2px solid red;"> SEU TEXTO AQUI </div>
Borda pontilhada:
SEU TEXTO AQUI
<div style="border:2px dashed red;"> SEU TEXTO AQUI </div>

sábado, 25 de maio de 2013
Como colocar caixa link-me personalizada

Olá pessoal sábado hoje é dia de folga e eu venho com esse tutorial sobre a caixinha link-me.
Na verdade eu não a uso em meu blog, mais fica ai para quem quiser.
A função dela é a divulgação de seu blog pois toda vez que alguém clicar será redirecionado para o mesmo, exemplo: Eu sou fan deu um determinado blog, então copio o código da caixinha link-me que ele disponibilizar e coloco em meu blog ou na área de postagens ou no Gadgets html/javascript. Desse modo toda vez que eu clicar na imagem ou alguém que estiver navegando pelo blog e clicar na imagem serão levados para o blog.

Para fazer a sua é bem simples. Copie o código abaixo e cole em um gadget de HTML/Javascript em seu blog:
<p align="center"><img src="URL_DO_BANNER"/><br />
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:10px; color: #000; border:1px solid #000; background-color:#fff; width: 120px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL_DO_BANNER" border="0" /></a>
</textarea>
</p>
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:10px; color: #000; border:1px solid #000; background-color:#fff; width: 120px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL_DO_BANNER" border="0" /></a>
</textarea>
</p>
Você só precisa colocar a url do seu banner de link-me e o link do seu blog nos lugares indicados, e alterar a fonte, cor de fundo e etc. nas partes que estão em cinza. Para quem não sabe, aqui a explicação de cada código:
Font-family: O tipo de fonte da letra (Ex: Arial, Calibri, Georgia)
Font-size: tamanho da fonte
Color: Cor do texto
Border: Estilo da borda você pode mudar o tamanho, a cor e o tipo de borda.
Background: Cor de fundo da caixa
Width: Largura em pixels da sua caixinha
Espero que tenham gostado, créditos deste tuto vai para o blog da Cherry Bomb

quinta-feira, 23 de maio de 2013
Como colocar música no blogger
Hoje vou ensinar a como colocar música em seu blog, tanto pode ser na área das postagens, páginas e HTML/JavaScript
Vamos ao processo:
1° Passo: Click no link (http://www.goear.com/)
2° Passo: Digite o nome da musica ou do cantor que queira colocar em seu blog, veja o exemplo abaixo:
3° Passo: Click em buscar e escolha a música que quiser.
4° Passo: Cópie o código para seu blog, veja o exemplo abaixo:
Espero que tenham gostado, até a próxima braços.
![]() |
Música: Temporal |
Vamos ao processo:
1° Passo: Click no link (http://www.goear.com/)
2° Passo: Digite o nome da musica ou do cantor que queira colocar em seu blog, veja o exemplo abaixo:
![]() |
Click na imagem para ampliar |
4° Passo: Cópie o código para seu blog, veja o exemplo abaixo:
![]() |
Click na imagem para ampliar |
Espero que tenham gostado, até a próxima braços.

Como deixar o blog adaptável a qualquer tamanho de monitor.
Olá galera blz !
Hoje eu venho com esse tutorial e confesso que passei meses tentando descobrir como fazer para que o blog tivesse o mesmo efeito dos sites convencionais (Que se adaptassem automaticamente a qualquer resolução de tela)
Não achei essa explicação na internet pois muitos sites e blogs falavam e eu não entendia nada.
Então fui tentando modificar o HTML e acabei conseguindo encontrar o código que da esse efeito maneiro.
O blog da opção de você ajustar a largura mais dependendo do monitor do PC que acessar seu blog na internet pode ficar totalmente desorganizado.
Veja os exemplos abaixo:
As setas vermelhas estão mostrando a falta de organização no blogger e isso provavelmente não ira agradar os leitores de seu blog
Veja como o blog aparece inteiro sem ter que utilizar aquelas barras deslizantes.
Vamos ao código HTML para que você possa dar esse efeito ao seu blog:
1° Passo: Vá em Layout de seu blog e em seguida click em Modelo
2° Passo: Click em Editar HTML
3° Passo: De um click com o botão esquerdo do mouse dentro da área de código do seu blog e em seguida aperte "Ctrl F"
4° Passo: Pesquise por:
ou
O objetivo é você encontrar a linha 960 e seguindo a palavra WIDTH:
Logo após a palavra que está em vermelho você deve dar um espaço e digitar 100%
Simples né !
5° Passo: Click em salvar
Explicação:
Você devera encontrar o código assim:
E ele deverá ficar assim:
Hoje eu venho com esse tutorial e confesso que passei meses tentando descobrir como fazer para que o blog tivesse o mesmo efeito dos sites convencionais (Que se adaptassem automaticamente a qualquer resolução de tela)
Não achei essa explicação na internet pois muitos sites e blogs falavam e eu não entendia nada.
Então fui tentando modificar o HTML e acabei conseguindo encontrar o código que da esse efeito maneiro.
O blog da opção de você ajustar a largura mais dependendo do monitor do PC que acessar seu blog na internet pode ficar totalmente desorganizado.
Veja os exemplos abaixo:
![]() |
Blog sem auto ajuste Click na imagem para ampliar |
As setas vermelhas estão mostrando a falta de organização no blogger e isso provavelmente não ira agradar os leitores de seu blog
![]() |
Blog com auto ajuste Click na imagem para ampliar |
Veja como o blog aparece inteiro sem ter que utilizar aquelas barras deslizantes.
Vamos ao código HTML para que você possa dar esse efeito ao seu blog:
1° Passo: Vá em Layout de seu blog e em seguida click em Modelo
2° Passo: Click em Editar HTML
3° Passo: De um click com o botão esquerdo do mouse dentro da área de código do seu blog e em seguida aperte "Ctrl F"
4° Passo: Pesquise por:
960
ou
<b:variable default='960px' name='content.width:
O objetivo é você encontrar a linha 960 e seguindo a palavra WIDTH:
Logo após a palavra que está em vermelho você deve dar um espaço e digitar 100%
Simples né !
5° Passo: Click em salvar
Explicação:
Você devera encontrar o código assim:
<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
E ele deverá ficar assim:
<b:template-skin>
<b:variable default='960px' name='content.width 100%' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<b:variable default='960px' name='content.width 100%' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>

domingo, 19 de maio de 2013
Código HTML para ocultar algo em seu blog
Olá galera, hoje vou mostrar como colocar um código HTML em suas postagens para que possam ocultar algo como: Texto, Códigos HTML ou ... bom vai de sua criatividade.
Primeiro vou mostrar que o código funciona e uma boa prova disso é o blogger: A ESCOLA BLOGGER
Veja o exemplo com essas imagens abaixo!
Esse já vem com o botão pronto
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>
Caso queira uma imagem use esse código
<div class="divspoiler">
<img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>
É isso galera espero que tenham gostado do código
até a próxima falow
Primeiro vou mostrar que o código funciona e uma boa prova disso é o blogger: A ESCOLA BLOGGER
Veja o exemplo com essas imagens abaixo!
(Visualizem as imagem para verem melhor)
Vamos aos código:
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>
Caso queira uma imagem use esse código
<div class="divspoiler">
<img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>
É isso galera espero que tenham gostado do código
até a próxima falow

Código de imagens passando para o lado
Olá galera do A ESCOLA BLOGGER, hoje eu vou ensinar sobre um código HTML que permite fazer as imagens se movimentarem em seu blog.
Veja o exemplo abaixo:
Esse é o efeito + vamos ao código HTML
Vamos a explicação:
1° O que está em vermelho é a direção para onda a imagem vai, exemplo: UP (Imagem para cima) LEFT (Imagem para esquerda) e RIGHT (Imagem para direita).
2° O que está de laranja é o tamanho da imagem, você pode alterar mais somente os números "250"
3° O que está em azul é para você substituir com a URL da imagem que deseja. Para pegar a URL da imagem, basta você ir com o mouse sobre a imagem e com o botão direito click e copie a URL, veja o exemplo abaixo!

Bom entendido isso vamos ao funcionamento:
1° Copie todo o código e vá no layout de seu blogger e escolha a opção nova postagem
2° Vá na opção HTML que fica a esquerda na parte superior e cole seu código
3° Copie as URL que deseja e substitua, como explicado acima
4° por fim click em Publicar
Você pode incrementar esse código no meio das postagens, basta usar sua criatividade, ok
Até a próxima galera...
Veja o exemplo abaixo:
Esse é o efeito + vamos ao código HTML
<marquee direction="up" scrollamount="3" height="250px" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> </marquee>
Vamos a explicação:
1° O que está em vermelho é a direção para onda a imagem vai, exemplo: UP (Imagem para cima) LEFT (Imagem para esquerda) e RIGHT (Imagem para direita).
2° O que está de laranja é o tamanho da imagem, você pode alterar mais somente os números "250"
3° O que está em azul é para você substituir com a URL da imagem que deseja. Para pegar a URL da imagem, basta você ir com o mouse sobre a imagem e com o botão direito click e copie a URL, veja o exemplo abaixo!

Bom entendido isso vamos ao funcionamento:
1° Copie todo o código e vá no layout de seu blogger e escolha a opção nova postagem
2° Vá na opção HTML que fica a esquerda na parte superior e cole seu código
3° Copie as URL que deseja e substitua, como explicado acima
4° por fim click em Publicar
Você pode incrementar esse código no meio das postagens, basta usar sua criatividade, ok
Até a próxima galera...

Assinar:
Postagens (Atom)