Como criar área de texto com selecionar tudo

Olá amigos Mult-focos vamos ver neste artigo como criar área de texto com selecionar tudo.

Vá ao painel do Blogger->Tema->Editar Html->Procure por </head> ->abaixo desta tag copie e cole o código clicando em JS no box  abaixo,salve o modelo.

See the Pen Script l by Mairink (@Oemes) on CodePen.

Agora Vá para o layout -> Elementos da página ->clique em 'Adicionar um Gadget' na barra lateral->
selecione 'HTML / Javascript' e adicione o código clicando em JS no box abaixo e clique em salvar.

See the Pen script ll by Mairink (@Oemes) on CodePen.

Lembre-se de substituir INSIRA SEU CONTEÚDO AQUI com seu conteúdo real.
Isto é tudo.

---

Como colocar zoom em imagens

Olá amigos Mult-focos!

Neste post vamos ver um modo simples de como colocar zoom em imagens.

Veja o DEMO  AQUI ou click em result no box abaixo

Gostou? Então é só copiar o código JS do box abaixo em um documento de texto, tomando os seguintes parâmetros de personalização: mudar AQUI URL DA IMAGEM, tamanho da Imagem usada, largura(width) 100 por  80, quando clicar na mesma ela ampliará para, largura(width) 500 por altura(height) 400

OBS: O código correto é o JS, isto é tudo.

See the Pen Zoom para imagens by Mairink (@Oemes) on CodePen.

---

Mensagem seguindo o mouse

Olá amigos Mult- focos!
Neste post vamos ver como colocar uma mensagem seguindo o mouse, com um código simples e pontual.

Sem mais delongas primeiro veja demo AQUI ou clique em result na caixa de código.

1º – Copie o código HTML da caixa de código abaixo e cole em um documento de texto, onde está escrito “MULT-FOCOS SUA REVISTA DIGITAL” substitua por sua mensagem.

2º – Depois copie o código modificado com sua mensagem e localize em seu template </head> e antes desta tag cole-o.

OBS: Se quizer mude a cor Vemelho #FF0000 por outra da sua preferência.
Isto é tudo.

---

Como adicionar data e hora na aba do seu navegador

Olá e bem-vindo ao Mult-focos. Vamos mostrar neste post como adicionar data e hora na aba do seu navegador. Este código permite que quando abrir sua página na aba do navegador vai aparecer data e hora, uma utilidade a mais para oferecer seu visitante.

Cubo de imagens animado

Olá e bem-vindo ao Mult-focos. Vamos ver neste post como adicionar um cubo de imagens animado no seu blog. Este ornamento em forma de cubo é composto por seis imagens 200x200 pixels e pode ser útil para você destacar imagens em seu blog.

Botão voltar ao início para Blogger

Olá amigos Mult-focos, estamos trazendo neste post uma ferramenta muito útil para blogs de páginas muito longas é o botão voltar ao início para Blogger.

Veja um demo clicando a aba Result no Box de códigos.

Blogger JSON - Lista de Arquivos

Olá amigos mult-focos, esta precisando fazer uma página com todos os dados do seu blog?
Então experimente o blogger Json – Lista de dados, com este código você vai fazer uma página e ou um gadget (não recomendado se seu arquivo é muito grande) com a base de dados de todos os seus post.

Popup para copiar código

Olá amigos Mult-focos, está procurando por um meio de postar seus códigos com simplicidade e elegância? Que tal um popup para copiar código.

Veja um demo clicando no botão abaixo.

Botão CSS oferta Mult-focos para blogger

Olá amigos Mult-focos, temos aqui um lindo botão para seu blog, é o Botão CSS oferta Mult-focos para blogger, bastante configurável se assim você quiser.

Acordeom CSS horizontal para blogger

Olá amigos Mult-focos, vamos ver neste post um lindo acordeon CSS horizontal para blogger

Painel acordeom CSS3 para Blogger

Olá amigos Mult-focos, neste post temos um painel acordeom CSS3 para Blogger com quatro destaques que pode ser modificado para mais ou menos como lhe convier.

Veja um demo clicando no botão abaixo.

DEMO
Como adicionar no seu blog?

 I - Vá ao painel do Blogger->Modelo->Editar HTML->use Ctrl+F e localize esta tag

]]></b:skin>

Acima desta tag copie e cole o código CSS abaixo

(Clique na seta para ver o código)

.accordion {
position:relative;
background-color:LightBlue;
border-radius: 5px;
}
.accordion > input {
display:block;
margin:0 0;
width:100%;
height:30px;
position:relative;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.accordion > label {
display:block;
font:normal bold 12px/30px 'Lato',sans-serif;
background-color:#358DB6;
border-radius: 5px;
color:white;
margin:-30px 0 0 0;
padding:0 15px;
}
.accordion > div {
padding:10px 15px;
display:none;
}
.accordion > input:checked + label {
background-color:#00688B;
border-radius: 5px;
}
.accordion > input:checked + label + div {
display:block;
}

II – Copie o código javascript abaixo e cole em um bloco de notas e coloque a URL do seu blog.

 (Clique na seta para ver o código)

<div class="accordion">
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
<input type="checkbox">
<label>Título</label>
<div>Conteúdo</div>
</div>

III – Agora com o código configurado em mãos vá ao painel do Blogger -> Layout->adicionar um gadget- >HTML/javascript->na janela que abrir cole o código em conteúdo->salve.
Isto é tudo.

---

---

Animação 3D usando puro CSS3

Olá amigos Mult-focos, neste post vamos ver uma linda animação 3D usando puro CSS3, aqui está um exemplo da muito poderosa animação CSS3 e efeitos 3D. Apenas certifique se você está executando a versão mais recente de um webkit navegador baseado (Apple Safari ou Google Chrome) para ver o efeito, pois até o momento o internet explore e o Firefox não são compatíveis com o efeito.

Botões Firefox CSS3

Olá amigos Mult-focos, trazemos botões mult uso para seu blog, neste post temos , para você usar como lhe convier.

Veja demo clicando em result no Box de códigos ou no botão abaixo.

Galeria de imagens deslizantes para blogger

Olá amigos Mult-focos, neste post veremos como adicionar uma Galeria de imagens deslizantes para blogger.
Nesta galeria a imagem desliza para cima destacando seu titulo, descrição e um link para o restante do artigo.

Texto rolando na aba ou barra de endereço do browser

Olá amigos Mult-focos, quer dar uma incrementada no seu Blogger?

Por que não colocar um texto rolando na aba ou barra de endereço do browser.

É muito fácil você coloca o texto que quiser, sugerimos o nome ou

seguimento do seu blog por exemplo.

Carregamento de imagens com scroll lazy load

Olá pessoal trazemos neste post uma dica muito boa para você aplicar no seu site/blog, trata se de um plugin muito útil que faz o carregamento de imagens com scroll lazy load, sua página vai carregando conforme você rolar o scroll do mouse.
Lazy Load é um plugin feito em javascript acelera o carregamento do blog além de dar um efeito fade ele irá fazer com que as imagens carreguem a partir que você for rolando a página.