[INÍCIO] | [BOLETIM INFORMATIVO] | [DOCUMENTÁRIOS] | [EVENTOS] | [BANNER] | [PARCEIROS] | [SUGESTÕES] | [FALE CONOSCO]
A DATA É 23/04/2011
Acabe com a sua curiosidade referente as inovações tecnológicas da área elétrica. Encontre aqui reportagens, eventos, novidades, documentários, ... Objetivando atingir um público alvo diversificado, desde leigos à especialistas do ramo. Desfrute ao máximo!

quinta-feira, 11 de outubro de 2012

Colocar imagem ou objetos flutuantes na página do 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>
Postado por às 0 comentários

quinta-feira, 2 de agosto de 2012

WIDGET, CAIXA FLUTUANTE COM JQUERY NA PAGINA INICIAL NO BLOGGER





Hoje vou mostrar como inserir uma caixa flutuante no canto da página, essa caixa funciona como um widget, sendo assim você pode inserir o que quiser nela pelo "Elementos de Página", sendo necessário mexer na sua template apenas na instalação. Vamos aos códigos.

1- Antes de tudo é recomendável que faça um backup da sua template, clicando em "Baixar modelo completo" em "Design > Editar HTML".

2- Feito o backup da sua template, vamos no "Editar HTML", procure por:
]]></b:skin>
E acima dele insira o seguinte código :

.mensagem{
    border:1px solid #333;
    position:fixed;
    width:250px;
    margin: 0 5px 5px 0;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYDTy3Au6tpuQuML6kjVhygGpBU4Exbk57gJqhJcGP7PA5honOt7G5liN2dYT2xZiWxR6PhlIkGkbzsxnWmGCcauRIxUR20R91OG-5jkyVBtaEkFovcR01FU6aKtv3_cYb66fEM7HjiDY/s1600/top.png) repeat-x;
    padding:5px;
    right:2px;
    bottom : 25px;
}

3- Depois novemente procure por:
]]></b:skin>

E insira abaixo o seguinte código:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
// Carrega jQuery
google.load("jquery", "1.3");

google.setOnLoadCallback(function() {
$(document).ready(function()
{
//Caixa cai quando a pagina é carregada
    $("#caixa").animate({
        bottom: "-1px"
      }, 2500
).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
//Fechar a caixa quando o X é clicado
   $("#fechar_mensagem").click(function()
    {
       $("#caixa").fadeOut("slow");
    });
});
});
</script>

3- Agora procure por:
</body>

E acima insira o seguinte código:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='mensagem' id='caixa'>
<img id='fechar_mensagem' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1m6vszqq_OKwkfsq0ZSzL99OltVHfv2jrWM9biUVnAq1TZqEa6w6XehWr5UGtVPHSy7L6xjLVQgiKyf0Yl4HT_aT53lERGF05gWlNXfQqKpRj87odzUTZQtVvjPhByXeuX1hDHUIGxI30/s1600/Untitled-1.png' style='float:right;cursor:pointer'/>
<div style='color: #fff;'>Blogger widgets</div><b:section class='widget1' id='widet1' maxwidgets='1'/>
<center><small><small>Widget modificado por <a alt='Blogocracia, dicas de comor criar um blog' href='http://www.blogocracia.com/' style='color: rgb(255, 153, 0);'>Blogocracia</a></small></small></center>
</div>
<b:else/>
</b:if>

Agora clique em "Salvar modelo", e a caixa ja estará funcionando. Para mudar o nome que vai ser visto na caixa edite o texto marcado em vermelho, pelo nome que queira.
Para inserir seus widgets na caixa, é simples, é só ir em "Design > Elementos da página" e no canto você vai ver a caixa flutuante. Parecido como na imagem abaixo.


Lembrando que a caixa flutuante irá aparecer apenas na página inicial, para não ficar cansativo para quem vê. È interessante colocar o Widget, "Follow by email", que está na página inicial dos widgets do blogger. Abaixo um link com um exemplo.
Postado por às 0 comentários

segunda-feira, 30 de julho de 2012

hfbhgj

jhggjh
j
hgjhj
hkj
h
j
Mais informações »
Postado por às 0 comentários

gfhfghgf

hgfffffffffffffffffffgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
g
g
g
ffffffffffffffg
Mais informações »
Postado por às 0 comentários

terça-feira, 24 de julho de 2012

Fechando um blogger para manutenção / construção

http://www.noticiaeblog.com/2009/08/manutencao.html



<div style='text-align: center;'><img src='http://eletrocuriosidade.webs.com/eletromanutencao.png'/></div><div style='display:none'>&gt;
Postado por às 0 comentários

domingo, 15 de julho de 2012

MENU FIXO


COLOCAR O CÓDIGO ABAIXO DEPOIS DO </head>



<style>

#fixeddiv2 {
position:fixed;
 width:100%;
 height:35px;
 z-index:56213;
 top:0px;  padding:0;
 left: 0px;
 box-shadow:0 2px 4px #b0b6bd;
 -moz-box-shadow:0 2px 4px #b0b6bd;
 -webkit-box-shadow:0 2px 4px #b0b6bd;
}

</style>

<div id='fixeddiv2' style='background:-webkit-linear-gradient(top, rgba(223, 223, 223, 0.9) 20%, #000000);background: -moz-linear-gradient(top, rgba(245, 211, 167, 0.9) 20%, #000000);background: -khtml-linear-gradient(top, rgba(245, 211, 167, 0.9) 20%, #000000);background: -o-linear-gradient(top, rgba(245, 211, 167, 0.9) 20%, #000000);-pie-background: linear-gradient(top, rgba(245, 211, 167, 0.9) 20%, #000000);'/>


<div id='fixeddiv2'>

<br/><center><span style='color: white;'>
[<a href='http://eletrocuriosidades.blogspot.com/'><b>INÍCIO</b></a>] |
[<a href='http://eletrocuriosidades.blogspot.com/p/boletim-informativo.html'><b>BOLETIM INFORMATIVO</b></a>]  |
[<a href='http://eletrocuriosidades.blogspot.com/p/documentarios.html'><b>DOCUMENTÁRIOS</b></a>]  |
[<a href='http://eletrocuriosidades.blogspot.com/p/eventos.html'><b>EVENTOS</b></a>] |
[<a href='http://eletrocuriosidades.blogspot.com/p/eletrobanner.html'><b>BANNER</b></a>]  |
[<a href='http://eletrocuriosidades.blogspot.com/p/parceiros.html'><b>PARCEIROS</b></a>]  |
[<a href='http://eletrocuriosidades.blogspot.com/p/sugestoes.html'><b>SUGESTÕES</b></a>] |
[<a href='http://eletrocuriosidades.blogspot.com/p/fale-conosco.html'><b>FALE CONOSCO</b></a>]
</span></center>
</div>

Postado por às 0 comentários

MENSAGEM AO ENTRAR NO BLOG

<script>alert('Bem-vindo ao ELETROTST');</script>
Postado por às 0 comentários

domingo, 1 de julho de 2012

Colocar slide no blog

Postado por às 0 comentários

sábado, 30 de junho de 2012

PESQUISAR EXPANSÍVEL



1. Acesse a guia Modelo e clique no botão Editar HTML. Depois, pressione Ctrl+F para abrir oLocalizador e procure pela linha abaixo.

]]></b:skin>


2. Imediatamente, cole o seguinte código acima da tag encontrada. Se você quiser fazer alterações pessoais na busca, fique a vontade.


#search {
}
#search input[type="text"] {
background: #7d7e7d;
background: -moz-linear-gradient(top,  #525252 0%, #333333 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#525252), color-stop(100%,#333333));
background: -webkit-linear-gradient(top,  #525252 0%,#333333 100%);
background: -o-linear-gradient(top,  #525252 0%,#333333 100%);
background: -ms-linear-gradient(top,  #525252 0%,#333333 100%);
background: linear-gradient(top,  #525252 0%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#333333',GradientType=0 );
border: 1px solid #222;
font: normal 12px ;
text-color: #FFFFFF;
height: 12px;
width: 120px;
padding: 6px 15px 6px 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
color: #000;
width: 200px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}


4. Depois, acesse a guia Layout e escolha o local onde colocará a busca. Depois, clique no linkAdicionar um gadget e cole o seguinte código na guia Conteúdo.




<form action="/search" id="search" method="get">
<input name="q" placeholder="Faça a sua busca" size="40" type="text" /></form>
Postado por às 0 comentários

COLUNAS

<div style="float: left; width: 45%;">TEXTO</div>
<div style="float: right; width: 45%;">TEXTO</div>
Postado por às 0 comentários

Código para Caixa de texto com barra de rolagem


<div style="height:100px; width:200px; overflow:auto; background-color:
#FFFFCC; text-align: center;padding: 2px; margin:5px ">
<div style="width:160px">
Conteúdo da caixa de rolagem
</div></div>



A legislação brasileira prevê a possibilidade de responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica ou invasão de privacidade pessoal/familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar dos leitores do /Eletrocuriosidades'.
Postado por às 0 comentários

quinta-feira, 28 de junho de 2012

Códigos HTML

  • <strong>Negrito</strong>
  • <em>Itálico</em>
  • <u>Sublinhado</u>
  • <strike>Tachado</strike> 
  • <p align="left">Alinhado à esquerda</p>
  • <p align="right">Alinhado à direita</p>
  • <p align="center">Centralizado</p>
    <p align="justify">Justificado (alinhado às duas margens)</p>
     
Postado por às 0 comentários

Imagem no BLOG

  • <img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />
  • <p align="center">
    <img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />
    </p>
  • <a href=”http://URL_de_destino”>
    <img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />
    </a>     
Postado por às 0 comentários

Como abrir links do Blog em outra aba ou janela

Para que abra numa nova aba/janela, basta adicionar em todo link o seguinte marcado em vermelho:

<a href=”URL_destino” target=”_blank”>Texto do link</a>
Postado por às 0 comentários
Assinar: Postagens (Atom)
▲ Ir para Topo