[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
Assinar: Postagens (Atom)
▲ Ir para Topo