Como Inserir uma contagem regressiva no blog

Como Inserir uma contagem regressiva no blog

Publicado em: 7 de janeiro de 2011 - Arquivado em: Blogger, Tutoriais

Olá pessoal, estou aqui com mais um tutorial, neste tutorial eu irei ensinar como inserir uma contagem regressiva no blog. Uma contagem regressiva é uma espécie de contador,você escolhe uma data, quando chegar o determinado segundo, do determinado minuto, da determinada hora do dia que você escolheu surge uma mensagem dizendo que chegou o momento que você marcou. Eu utilizou muito este serviço para marcar a hora em que o resultado de minhas promoções serão publicadas.

1. COMO CRIAR E INSERIR UMA CONTAGEM REGRESSIVA NO BLOG

Vamos ao Tutorial:
1º - Acesse o Seguinte Site: http://clockeasy.com/
2º - De cara você vai ver uma tela similar à esta:

ESPECIFICAÇÕES:

Clock - Um relógio para seu blog,

Alarm - Despertadorque desperta na hora determinada em seu Blog,

Countdown - Um contagem regressiva ou seja uma contagem decrescente.

Chrono - Cronômetro ou seja uma contagem crescente.

3º - Em seguida nós iremos selecionar o tipo de contador, que no nosso caso é Countdown.

4º - Vamos as especificações de cada campo:

5º - Após preencher clique no botão Generate.

6º - Agora espere e clique no botão Get code após isso copie o código que ele lhe mostrará.

7º - Agora acesse o Painel do seu Blog e clique na Aba Design.

8º - Agora clique em adicionar um gadget na Sub-aba Elementos da página.

9º - Agora selecione o tipo de Gagdet HTML/Javascript

10º - E cole o código que você copiou anteriormente.

11º - Agora clique em Salvar. (Caso você for seguir os passos de como deixar em português NÃO SALVE)

2. COMO DEIXAR A CONTAGEM REGRESSIVA EM PORTUGUÊS

Vamos ao Tutorial:

1º - Agora nós iremos editar aquele código que copiamos.

2º - Seguramos as teclas CTRL + F (Teclas de busca na página).

3º - Agora procure por day e substitua por dia.

4º - Procure por hours e Substitua por horas.

5º - Agora procure por minutes e substitua por minutos.

6º - Agora procure por Seconds e Substitua por segundos.

PRONTO! CONTAGEM REGRESSIVA E AINDA MAIS EM PORTUGUÊS APLICADA!

mudar o plano de fundo do template,

Para mudar o plano de fundo do template, procure por Body  no código CSS e alterar o que está emBackground:

body {
background-color: $bgcolor;}

Se você deseja alterar somente a cor, faça como no exemplo: background-color e coloque o código da cor (hexadecimal, como: #ffffff), ficando assim:
body{
background-color: #ffffff;

Se deseja colocar uma imagem:

background: url(url da imagem) repeat;

Dica:  para que o navegador Intenet Explore consiga interpretar o código, dê um espaço maior entre o endereço da imagem e repeat, caso contrário não aparecerá no navegador, apesar de aparecer normalmente no Firefox e no Ópera.

A imagem escolhida para o fundo do template não precisa necessariamente se repetir indefinidamente. Você pode querer, por exemplo, que esta imagem seja fixa no topo do template. Veja as maneiras como você pode estipular o comportamento da imagem do background (isto vale para a definição de background de qualquer elemento da página, seja body, main, sidebar, etc)

repeat; repete por todo o elemento
repeat-y; repete na vertical
repeat-x; repete na horizontal
no-repeat; não repete

quando for estipulado que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer:

background: url(url da imagem) no-repeat top left; -> não repete e se apresenta no topo à esquerda.

Para que a imagem fique fixa na tela:
background-attachment: fixed;

Para que a imagem role com a tela:
background-attachment: scroll;

Abrir link de um texto em nova aba

acrescente target="_blank" após a url ;

<a href="URL DO LINK" target="_blank">TEXTO</a>

CÓDIGO FONTE DE JANELAS POP UP

<a href="#" onclick="window.open('http://www.hanytech.com', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=770, HEIGHT=400');">Clique para abrir a janela POP-up</a>
------------------------------------------------------------------------------------------------------------


Explicarei os comandos que utilizei neste códigofonte: 

  'http://codigofonte.net'  

- Aqui fica o endereço da página que será exibida na janela pop-up. 

  'Pagina'  

- Nome interno para a janela. NÃO É O TÍTULO. 

  STATUS=NO  

- Este, exibe a barra de status do IE. 

  LOCATION: NO  

  - Serve para exibir a localização do site (aquela barrinha de endereços). 

  TOOLBAR=NO  

  - Exibe a barra de ícones básicos do IE. Do tipo COPIAR, COLAR... 

  DIRECTORIES: NO  

- Serve para exibir a barra de links (atalhos do IE). 

  RESISABLE=NO  

- Permite que o usuário redimensione a janela. 

  SCROLLBARS=YES  

- Exibe a barra de rolagem. 

  TOP=10  

- Define com quantos pxls a página irá ser exibida a partir do topo. 

  LEFT=10  

- Define com quantos pxls a página irá ser exibida a partir da esquerda. 

  WIDTH=600  

- Largura da Janela 

  HEIGHT=400  
Abaixo o exemplo clique e confira.

Clique para abrir a janela POP-up

menu fixo

Eis o código, copie-os, depois faça o login no blogger e entre no painel principal do seu blog.

<style type='text/css'>
#topmenu {
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 95469148;
background: #F1F1F1;
width: 100%;
border-width: 1px 0;
border-style: solid;
border-color: #EBEBEB;
border-bottom: 3px solid gainsboro;
-moz-box-shadow: 0px 6px 30px #c9c9c9;
-webkit-box-shadow: 0px 6px 30px #c9c9c9;
box-shadow: 0px 6px 30px #c9c9c9;
}
#topmenu ul {
padding-top: 1px;
color: #555;
margin-top: 8px;
}
.topmenuativo a:link {
color: #c60;
}
#topmenu li {
list-style-type: none;
display: inline;
color: #555;
cursor: pointer;
line-height: 26px;
text-align: center;
font-size: 14px;
font-weight: bold;
}
#topmenu li a {
color: #555;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
text-decoration: none;
padding-left: 26px;
}
#topmenu li a:hover {
color: #C60;
-webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
text-decoration: none;
}
</style>
<div id="topmenu">
<ul>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
</ul>
</div>

Agora clique na guia “Modelo” -> “Editar Modelo”.

Procure por:

<body>

Cole o código abaixo dessa tag.

Depois de ter configurado o menu conforme as partes em destaque de vermelho no código, salve!

Obs. Para acrescentar um novo item no menu, copie a parte em negrito e cole abaixo do mesmo.

efeito neve

Neste artigo irei ensinar como colocar um efeito de neve caindo nas páginas no seu blog do blogger/blogspot.

1. Siga o passo a passo abaixo:
2. Entre em sua conta do Blogger/Blogspot.
3. Entre na parte de “Design” do blog que deseja colocar o efeito de neve.
4. Adicione um novo Gadget “HTML/JavaScript”.
5. Cole o script a seguir dentro do novo gadget: <script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>
6. Salve o gadget.
7. Pronto, vá até seu blog e o efeito de neve já estará funcionando.

Você também poderá aplicar este efeito em sites e blogs que não são do blogger/blogspot, basta adicionar o script entre as tags e .

ar condicionado caseiro

Entendeu agora como o ar condicionado caseiro funciona?

Na verdade ele furou uma lata para o ar frio sair, pressionado pela vento criado pelo cooler, e água que derrete do gelo acaba ficando no fundo da lata.

Bem eu não cheguei a fazer teste para ver se essa experiência do ar caseiro funciona de verdade, mas caso você faça um teste e ele funcione, deixe seu comentário, só tome cuidado para não acabar queimando a saída USB do seu computador, pois dependendo do caso sai mais barato comprar um ar condicionado de verdade do que fazer um….rs :-)

bolhas no cursor do mouse

No tutorial de hoje vou ensinar a colocar bolhas saindo do seu mouse, parecidas com essas que estão saindo do seu cursor, aqui no blog. Se você não está vendo clique em Continue Lendo aqui em baixo, para você ir para a página do post e ver como é o efeito.


1º Passo) Copiar o código abaixo e colar em algum editor de texto que você tenho no seu computador.(Bloco de notas ou Word)


<script type="text/javascript">
// <![CDATA[
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
  var rats, div;
  for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
    rats.appendChild(div);
div=div.style;
    div.top="1px";
    div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
    div.top="0px";
    div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
    div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);
bubb[i]=rats.style;
  }
  set_scroll();
  set_width();
  bubble();
}}

function bubble() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
      bubb[c].left=(bubbx[c]=x)+"px";
      bubb[c].top=(bubby[c]=y)+"px";
      bubb[c].width="3px";
  bubb[c].height="3px"
  bubb[c].visibility="visible";
  bubbs[c]=3;
      break;
}
  }
  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
}

function update_bubb(i) {
  if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
  if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
  }
      bubb[i].top=bubby[i]+"px";
      bubb[i].left=bubbx[i]+"px";
    }
    else {
      bubb[i].visibility="hidden";
      bubby[i]=0;
      return;
    }
  }
}

document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sleft;
  x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  else {
    swide=800;
shigh=600;
  }
}

window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height;
  div.style.width=width;
  div.style.overflow="hidden";
  return (div);
}
// ]]>
</script>

2º Passo) Escolher as cores das bolhas. No começo do código tem uma parte que está destacada com várias cores. Vou repetir essa linha do código aqui para poder explicar como muda as cores.

var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc");

A parte em :
                    Vermelho: Cor da parte de cima da bolha
                     Laranja   : Cor do lado direito da bolha
                     Azul        : Cor da parte de baixo da bolha
                     Roxo       : Cor do lado esquerdo da bolha
                     Preto       : Cor do fundo da bolha

OBS: Muito cuidado antes de alterar o código.

Para alterar as cores entre nesse site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e copie o código HTML da cor e substitua no lugar de qualquer uma das cores do código.

3º Passo) Agora vamos escolher quantas bolhas no máximo vai ter na página. Vou copiar outra parte do código aqui só pra exemplificar. Essa parte esta no começo do código também, junto com a parte das cores.

var bubbles=66


Aqui é só ir mudando o valor e ver qual quantidade de bolhas você prefere.

4º Passo) Agora é só copiar o código que você editou e ir no Tumblr >> Customize >> Themes >> Use Custom HTML >> Agora procure no código por </body>, use CTLR F para procurar. Agora cole o código que você modificou imediatamente antes do </body>. Aperte Update Preview e espere a página carregar, passe o mouse pela sua página que está ao fundo veja se as bolhas estão saindo do mouse e se você gostou do resultado, se sim salve e saia se não gostou aperte Cancel.