Danilo Codigos: setembro 2013

Como colocar uma imagem ou um objeto flutuante em seu blog ?

Siga os seguintes passos:

1. Vá até “Layout” e abra a aba “Editar HTML” e marque “Expandir modelos de widgets”.

2. procure pela seguinte linha: ]]></b:skin>

3. Logo Acima dessa linha cole o seguinte código:

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

4. O destaque em vermelho é a posição com relação à tela, que pode ser: “left”, “right”, “top”, “buttom”.

5. Agora encontre a linha “<body>” e cole abaixo dela:

<div id="float_corner">
O que quer q flutue na tela…
</div>

Entre essas duas linhas de código, coloque o q vc quiser q flutue na tela. Pode ser uma imagem, um menu, um link ou até publicidades – como já dissemos antes. Cabe a sua criatividade.

6. Salve e veja o resultado.

Faça vários teste e veja como fica.

Via: Ferramentas Blog

tag de busca: flutua, flutuante, flutuar

Leia Mais ►

Como colocar senha nas postagens do blogger ?

Buscar por: Senhas nos posts, Senha no Post, Senha

1. Faça login em seu blog.

2. No painel de configurações do Blogger, clique em Modelo e depois em Editar HTML. Na tela de confirmação clique em Prosseguir.

3. Pressione Ctrl F do teclado e procure pela seguinte tag: ]]></b:skin>

4. Exatamente ABAIXO (depois) da tag pesquisada, cole o código Javascript a seguir.

<!--ST SENHA CODIGO --> <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

5. Clique em Salvar Modelo.

Configurando a Inserção de Senha

1. Crie sua postagem normalmente e, após criá-la, mude o conteúdo da postagem para a opção HTML. Copie a parte do post que recebrá a proteção ou, caso queira proteger o post inteiro, copie todo o HTML dele.

2. Agora acesse esta página e faça a configuração das opções de acordo com a figura abaixo, depois clique no botão Encrypt (posicionado abaixo do campo verde Plain Text).

3. Desça até o campo roxo HTML Code. Selecione o modo como será exibido o texto uma vez protegido, escolhendo entre Standard, Inline ou asteríscos (***). Depois disso, copie todo código dentro da caixa HTML Code.

4. Agora simplesmente cole este código no lugar do texto do post em seu editor HTML no Blogger.

5. Visualize e veja se está tudo ok. Estando tudo certo, basta publicar o post!

Nota: Se desejar alterar o título "Show encrypted text" por um outro de sua preferência, basta encontrá-lo no código copiado do site (no final do código) e alterar normalmente.

Quando alguém clicar no título do texto protegido, receberá uma pop-up como esta abaixo, onde ela deverá inserir a senha.

tag de busca: Senha, senhas, senha nos posts

Leia Mais ►

Retirando o aviso de não há postagens

<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>

Rosana B. tem como sim, basta ir no seu html, marque a opção 'Expandir modelos de widgets', após isso aperte Ctrl+F para pesquisar no html o trecho:
<div class='status-msg-body'>
<data:navMessage/>
</div>

Apague esse trecho e visualize, pode ver que a mensagem 'Nenhuma Postagem' só ficou o fundo.
Volte no html e salve. Depois de salvar, vamos retirar o fundo. Ctrl+F novamente, pesquise o trecho:
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>

E o apague, visualize, sumiu. Salve e pronto. Comigo deu certo, se com você não deu me avise que eu te ajudo com outra forma de retirar essa mensagem. Créditos por favor, estava com essa duvida, procurei no google e não achei nada sobre, só sua pergunta, então fui analisar meu html, e achei esse modo, e tem vários outros jeitos, depende do modelo do seu template.

tag de busca: retirar aviso, aviso, não há postagem, postagens

Leia Mais ►

Criando o efeito "Apagar a luz" para ver vídeos no Blogger

Este é um efeito super interessante e que poucas pessoas sabem fazer, recebi alguns comentários no nosso Formulário de Avaliação pedindo que fizemos um tutorial ensinando a como fazer isto.
Vejamos agora como fazer este efeito que diminui a luz ao redor de um vídeo e o deixa em destaque na página:

Vídeo exibido sem o efeito

Vídeo exibido com o efeito

Clique aqui e veja como isto funciona na prática

Vejamos:

A Primeira coisa a fazer é um Backup de seu template. Caso o script não funcione no seu template, você pode voltar a ter seu template original.

Depois que você fez o Backup, abra o "Editar HTML" dê CTRL+F e procure por:</head> e cole antes dela o script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar a Luz").removeClass("turnedOff");
else
$(this).html("Acender as Luzes").addClass("turnedOff");
});
});
//]]>
</script>

Logo após colar o script, procure por: ]]></b:skin> e cole acima dela o CSS:

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWcGqUh2dc4eoOpX3N0IPEgAPAbmQZ29r0wxLRnNNdmZv5TY1wM5SnKUJL45X1snKlr5gzaEozvILNYFST0iTfuijYH5SNpWdDpLy1YJ7vZIeb7yS6Y5Nt5-azmiI_NjcTzuDq3qnrmo/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_B7hXflCD6EYGnI78fqZjiRJTVto_ryZ7lPhDAd6oDJOfLjwob-5y1qjqTXGziyEFYAOoVdVyuEzFUiO4Wk700vbk9j2Wo3Kwm448-krxnyd3ufaAFNtnNK6A5rNOwECJX_Bqdkh3n8s/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidade da Tela */
filter:alpha(opacity=90); /* Opacidade da tela */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Antes da tag </body> cole o seguinte código:

<div id='oscuridad'/>

Visualize seu template, se estiver tudo OK salve!

Agora toda vez que você publicar um vídeo em seus artigos, adicione o seguinte código:

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
...Aqui cole o código do Vídeo...
</div>
</center>

E pronto!

Se este script não funcionar em seu template, pode ser que você tenha outros scripts em seu blog e isto pode acarretar conflitos. Verifique o artigo da Vanessa do Mundo Blogger para tentar resolver este problema:

Por que alguns scripts não funcionam no meu blog?

Este script foi localizado no blog em espanhol: Cuidadblogger

Até Mais!

tag de busca: efeito, apagar, luzes, luz, pagar luz, apagar luzes

Leia Mais ►

Código de imagem passando para o lado

<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>

tag de busca: imagem, imagens, passando, imagem passando, movimento, imagem em movimento

Leia Mais ►

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:

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

tag de busca: caixa, caixa link-me, link

Leia Mais ►

Como colocar páginas numeradas no blogger

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 ▼

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

tag de busca: página, páginas, pagina, pagina, números, número, numeros, numero, numerada, numeradas

Leia Mais ►

Botão voltar ao topo personalizado

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 &quot;Scroll to Top&quot; 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(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var   scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html,  body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
  $(function() {     
                $(&quot;#toTop&quot;).scrollToTop();      
            });      
        </script>

Onde está em Vermelho você coloca a URL da imagem que desejar ok

Salve e visualize.

tag de busca: botão, botões, voltar ao topo, botão voltar ao topo

Leia Mais ►

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 ▼

Click na imagem para ampliar

2° Passo: Copie o link da pagina que você deseja, veja o exemplo na imagem abaixo▼

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.

tag de busca: facebook, caixa de fans, like a box

Leia Mais ►

Como criar uma linha em HTML

O código é bem simples basta você copiar e colar onde deseja, ok vamos ao código ▼

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.

tag de busca: linha, linhas, html, linha em html

Leia Mais ►

Como colocar um botão para ocultar e mostrar o conteúdo de uma postagem

Como colocar algo oculto no blog, vamos ao tutorial ▼

Se você fizer uma postagem muito grande ou simplismente quiser ocultar uma parte da postagem, você pode fazê-lo de uma forma simples utilizando javascript.

Veja um exemplo clicando sobre o botão:

Agora você só terá que colocar no local indicado, o conteúdo que deseja ocultar. Se preferir, pode usar um texto ao invés do botão:

Mostrar / Ocultar ▼▲

Se preferir uma imagem:

Vamos aos códigos ▼

Código com botão ▼

<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="divspoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

Código com Texto▼

<div class="divspoiler">
<a href="javascript:void(0);" 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';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="divspoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>

Código com imagem▼

<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="divspoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>

tag de buscas: Ocultar, Esconder, Ocultar algo em seu blog

Leia Mais ►

Bordas para textos e códigos

HTML, códigos HTML para textos

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>

tag de busca: códigos HTML, HTML, Bordas, Borda

Leia Mais ►