Personalizando a Página Inicial do seu Navegador

No post anterior, vocês viram como personalizar a nova guia do Google Chrome. Agora vou mostrar como criar sua própria página inicial para qualquer navegador usando HTML, Css e JavaScript, e com esse tutorial será possível para você criar qualquer coisa em html, como por exemplo, um esboço de um layout/template, testar códigos e o que mais quiser, porque é tudo feito como se você estivesse codificando algum layout, e o melhor é que nem ter internet é necessário.

Primeiro, você precisará de um editor de html. Eu uso e recomendo o Notepad++.

Crie uma pasta na área de trabalho do seu pc e dentro dela coloque todas as imagens que pretende usar. Eu estou usando essas (os ícones foram encontrados no site Flaticon, só personalizei, com exceção dessa rosa, que uso como favicon):

A maneira como faço aqui é para deixar mais fofo, mas existem páginas mais minimalistas, mais parecidas com a página inicial com a qual a gente está mais acostumado, tipo essa (onde encontrei os códigos para estruturar a homepage e da data):

Abra o editor de html e cole isso:

 <?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-Br" lang="pt-Br">
<head>
<title>Digite um título</title>
<link rel="shortcut icon" href="favicon">
<META HTTP-EQUIV="Content-Type" CONTENT=""text/html; CHARSET=utf-8" />
<style type="text/css">

Aqui vão os códigos que personalizam a aparência de tudo (CSS)

</style>

Aqui vão os scripts (se houver)
</head>
<body>

Aqui vai a parte visível dos códigos que receberam a personalização CSS

</body>
</html>

Esse código acima será nossa estrutura. Depois de colar no editor de html, salve como um arquivo html na mesma pasta das imagens.

Vamos começar colocando o background e a parte do 'geralzão', o 'corpo' ou body (na parte do CSS):

 body {
background: url('nomedaimagem.jpg') no-repeat top center;/*plano de fundo*/
background-size: cover;/*tamanho do plano de fundo - vai ocupar a tela toda*/
color: #92dbd2;/*cor padrão para qualquer texto*/
text-align: justify;/*alinhamento justificado para textos*/
}

Viram a parte nomedaimagem.jpg? Toda vez que você criar um documento HTML e quiser inserir uma imagem sem hospedar na internet, coloque-a na mesma pasta em que o documento estiver, e no lugar em que iria a URL/link, digite o nome da imagem seguido pelo formato. Por exemplo, a imagem que eu uso tem o nome bon4 e é do tipo JPG, então ficaria assim:

background: url('bon4.jpg')... O mesmo vale para o favicon lá no início do primeiro código; aqui usei a rosa com o nome rose e a imagem é no formato gif, então: href="rose.gif"

Se você preferir, claro, pode usar uma imagem hospedada na internet e substituir onde for para usar imagens nos códigos com o link dela, mas se estiver sem internet, elas não vão aparecer; por isso recomendo colocar só os nomes para que com ou sem internet você visualize as imagens na edição.

Podemos adicionar data, como na screenshot. Antes de /style, cole:

 #date {/*data*/
margin: 30px 10px 0px 1110px;/* esses valores posicionam com relação as distancias do topo, direita e esquerda, basta alterar como preferir*/
font-family:Marguerite;/*use o nome de qualquer fonte instalada em seu computador*/
letter-spacing:0px;
font-size:14px;/*tamanho da fonte*/
width: 70px;/*largura do espaco ocupado pela data*/
color:#efaec7;/*cor do texto*/
font-style:normal;
/*essa parte vai girar a data*/
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
  -moz-transform: rotate(20deg); 
  -webkit-transform: rotate(20deg); 
  -ms-transform: rotate(20deg); 
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}
#month {/*mes*/
font-family:Marguerite;
letter-spacing:0px;
font-size:17px;
color:#efaec7;
font-style:normal;
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
  -moz-transform: rotate(20deg); 
  -webkit-transform: rotate(20deg); 
  -ms-transform: rotate(20deg); 
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}

Aqui eu quis alinhar a data dentro do coraçãozinho rosa ^^ Edite conforme quer que apareça aí na sua homepage. Agora, depois de <body>, vamos colar o código que faz a data aparecer:

 <div id="date">
 <script language="Javascript">
  var dayName = new Array ("Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado")
  var monName = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
  var now = new Date
  document.write(""+now.getDate() +". " + dayName[now.getDay()] + ", <span id=month>" + monName[now.getMonth()] + "")
 </script>
 </div>

Salve seu documento (Ctrl+S) para ver como fica. Clique no arquivo HTML que criou na pastinha com as imagens para abri-lo no navegador e ver como está ficando. Quando fizer alterações e quiser ver o resultado, basta atualizar a página no navegador.

Continuando...

Os navegadores geralmente vêm com uma caixa de pesquisa na homepage certo? Vamos adicionar uma como faríamos em um blog. Antes de /style, cole isso:

 #search {
width: 300px; /* largura caixa de pesquisa */
height: 35px;/* altura caixa de pesquisa */
float: right;
text-align: center;
margin-top: 6px;
margin-right: 211px;
/* background caixa de pesquisa */
background: transparent;
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
  -moz-transform: rotate(-20deg); 
  -webkit-transform: rotate(-20deg); 
  -ms-transform: rotate(-20deg); 
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
#search-box {
margin-top: 70px;/*distancia do topo*/
border:0px;
background: transparent;/*plano de fundo - voce pode usar uma imagem ou cor se preferir)*/
text-align:center;
color:#90dbd4;
font-family: 'Marguerite';
font-size: 20px;
}

Mude os valores em margin-top/right para posicionar com relação ao topo/direita. Novamente eu usei o código para fazer 'girar' a caixa de pesquisa e deixá-la alinhada sobre o macaron verde da imagem de fundo que uso.

Antes de /body, cole o código que faz a pesquisa aparecer:

 <form id='search' method='get' action="http://www.google.com/search" name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search...&quot;;' onfocus='if (this.value == &quot;Search...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search...'/></form>

Na url do google.com/search, você pode usar a de outro site de buscas que prefira, tipo bing. Salve o documento e visualize para ir editando.

Vou usar esse tutorial para criar um menu que aparece ao passar o mouse no gif do ursinho. Você pode usar qualquer tutorial de menus para adicionar um que goste :3

Antes de /style, cole isso:

 #me-nu { /* area geral */
  margin: 0 20px 0 10px;
  position: relative;
  width: 210px;
  z-index: 100;
}
#me-nu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#me-nu li { list-style-type: none; }
#me-nu a { /* links */
  color: #d3fbfb;
  font-size: 17px;
  text-decoration: none;
  font-family: 'Bubblegum';
  text-shadow: 1px 2px 3px #42c3d6;
}
#me-nu a:hover {/*links ao passar o mouse*/
color: #fee;
text-shadow: 1px 2px 3px #fcc;
}
#me-nu .palavra {/* palavra menu */
  padding: 5px 0;
  text-align: center;
  display: block;
  position: absolute;
  width: 210px;
  top: -110px;
  left: 10px;
}

#me-nu ul.palavra ul li {/* itens ocultos */
  padding: 0 0 5px;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
/* links ocultos */
#me-nu .oculto {
  display: block;
  padding: 0 10px;
  position: relative;
  top: 10px;
  height: 0;
  overflow: hidden;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#me-nu ul.palavra:hover .oculto {
height: 200px;
}

E antes de /body, adicione o que faz o menu aparecer:

 <div id="me-nu">
  <ul class="palavra">
    <li><img src='url da imagem que oculta o menu'/><ul class="oculto">
    <li><a href="#" target='_blank'>Link</a></li>
    <li><a href="#" target='_blank'>Link</a></li>
    <li><a href="#" target='_blank'>Link</a></li>
    <li><a href="#" target='_blank'>Link</a></li>
    </ul>
  </li></ul>
</div>

Substitua a imagem onde está indicando acima (aqui usei o gif do ursinho [<img src='teddy2.gif'/>]), e cada "#" pelo endereço de um link, mudando o nome onde diz Link.

Lembra daquele efeito de explosão de brilhos ao clicar? Vamos adicioná-lo à nossa homepage! Antes de /head, cole isso:

 <script type='text/javascript'>
// <![CDATA[
var sparks=80; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array('#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff');
//                   
/****************************
*   Clicksplosion Effect    *
* (c) 2012 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;
 
function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
 
addLoadEvent(clicksplode);
 
function clicksplode() { if (document.getElementById) {
  var i, j;
  window.onscroll=set_scroll;
  window.onresize=set_width;
  document.onclick=eksplode;
  set_width();
  set_scroll();
  for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
    stars[j]=createDiv('*', 13);
    document.body.appendChild(stars[j]);
  }
}}
 
function createDiv(char, size) {
  var div, sty;
  div=document.createElement('div');
  sty=div.style;
  sty.font=size+'px monospace';
  sty.position='absolute';
  sty.backgroundColor='transparent';
  sty.visibility='hidden';
  sty.zIndex='101';
  div.appendChild(document.createTextNode(char));
  return (div);
}
 
function bang(N) {
  var i, Z, A=0;
  for (i=sparks*N; i<sparks*(N+1); i++) {
    if (decay[i]) {
      Z=stars[i].style;
      Xpos[i]+=dX[i];
      Ypos[i]+=(dY[i]+=1.25/intensity[N]);
      if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
          else {
        Z.left=Xpos[i]+'px';
        Z.top=Ypos[i]+'px';
          }
      if (decay[i]==15) Z.fontSize='7px';
      else if (decay[i]==7) Z.fontSize='2px';
      else if (decay[i]==1) Z.visibility='hidden';
          decay[i]--;
        }
        else A++;
  }
  if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}
 
function eksplode(e) {
  var x, y, i, M, Z, N;
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
  N=++count%bangs;
  M=Math.floor(Math.random()*3*colours.length);
  intensity[N]=5+Math.random()*4;
  for (i=N*sparks; i<(N+1)*sparks; i++) {
    Xpos[i]=x;
    Ypos[i]=y-5;
    dY[i]=(Math.random()-0.5)*intensity[N];
    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
    decay[i]=16+Math.floor(Math.random()*16);
    Z=stars[i].style;
    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
    else if (M<2*colours.length) Z.color=colours[count%colours.length];
    else Z.color=colours[i%colours.length];
    Z.fontSize='13px';
    Z.visibility='visible';
  }
  clearTimeout(timers[N]);
  bang(N);
}
 
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-7;
  shigh=sh_min-7;
}
 
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (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;
  }
}
// ]]>
</script>

Salve e visualize cada clique que der na página. Para usar scripts, você pode inserí-los na codificação normalmente, por exemplo, <script src='url-do-script.js' type='text/javascript'></script>, ou pode pegar o arquivo javascript e usá-lo entre <script> e </script> caso queira ver resultados sem estar conectado à internet.

Por último, vamos criar um menu para as redes sociais. Vou usar esse tutorial para posicioná-lo. Cole antes de /body:

 <div style="position:absolute;width:230px; margin-left: 530px; bottom: 0px; background: rgba(254, 134, 180, 0.68); padding: 5px 0px 0px 10px; border-radius: 10px 10px 0px 0px;">
<a href='#' target='_blank'><img src='facebook.png' width='20px'/></a>
<a href='#' target='_blank'><img src='twitter.png' width='20px'/></a>
<a href='#' target='_blank'><img src='google-plus.png' width='20px'/></a>
</div>

Em que...

Width = largura total;

margin-left = distancia da esquerda;

bottom = deixa o menu na parte inferior da tela;

background = cor de fundo (para adicionar um pouquinho de transparência use cores RGBA);

border-radius = arredonda as bordas.

Substitua "#" pelos links de suas redes sociais. Salve o documento HTML.

Pronto! Só falta uma coisa, definir como página inicial. Nas configurações do seu navegador, procure pela que define a página inicial. (No Chrome essa opção fica em Configurações - Aparência // No Firefox, fica em Opções - Geral// No Microsoft Edge, clique nas "..." - Configurações - Configurações Avançadas - Exibir configurações avançadas - Ative mostrar botão de página inicial e preencha a caixinha de texto abaixo dessa opção com o link da home page).

Copie a URL/link que aparece na barra de endereços no seu navegador do seu documento html (algo como file:///C:/Users/seunome/Desktop/nome-da-pasta-onde-esta-o-arquivo-html/arquivo.html) e cole na opção de definir página inicial.

No tutorial usei as fontes que postei aqui e aqui, caso queira instalar.

Crie quantas páginas quiser do jeito que mais gostar!!! :)

0 Comentários

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii