Além disso podemos incluir links para uma página externa do nosso blog, como por exemplo, um segindo blog.
Para isso vamos em Layout > Entre colunas > Adicionar um gadget:
Na janela escolhemos a opção "Páginas"
Vai abrir outra janela, já com a página inicial adicionada. Você pode escolher deixar esse link a mostra ou exclui-lo. No blog do grupo nós excluímos do gadget, não do blog. Para isso basta clicar na lixeirinha. Aqui eu vou deixar e vou clicar em adicionar um novo item.
Uma nova janela é sobreposta e colocando o cursor ou no campo Nome da página ou na linha de baixo URL da página, as páginas publicadas no blog aparecem. Prefiro clicar em Nome da página, pois fica mais fácil escolher as que quero que sejam visíveis. Não preciso adicionar a Página inicial, já que já está adicionada.
Adiciono a segunda página, por ordem de importância para mim: Política de privacidade. E clico em salvar.
As outras duas páginas já publicadas no blog só tem interesse para mim, já que são auxiliares na personalização do blog. Se eu tiver outra página para adicionar eu clico em Adicionar um novo item e escolho outra página.
Vou adicionar o índice criado e também um link externo.
Depois de clicar em Adicionar um novo item, escreva o nome do blog ou da página que quer adicionar, escreva o link na segunda linha e clique em Salvar.
Se não houver mais páginas a adicionar, clique em salvar novamente.
Espere a mensagem widget atualizado aparece e visualize o blog:
A aparência quebrou o layout do blog, então vamos personalizar esse gadget.O código que vou usar para isso é da Elaine Gaspareto.
E é esse:
/* Menu personalizado by Elaine Gaspareto (http://www.elainegaspareto.com)
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*para subir ou descer o menu troque o número*/
margin-left: 100px; /*para afastar o menu para esquerda ou direita troque o número*/
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: transparent none repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
border-radius: 3px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: $(tabs.background.color); /*cor do fundo normal*/
margin-left: 8px; /*espaço entre os botões*/
margin-top: 8px; /*espaço entre as linhas dos botões*/ essa parte não está no código original.
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color);/*cor do fundo hover/selecionado*/
color: $(tabs.selected.text.color);
border-radius: 50px; /*bordas arredondadas, apague a linha se não quiser efeito*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}
O margin-top: 8px; que acrescentei no código da Elaine é o espaço entre as linhas de botões. Quando não acrescentamos essa linha, se tivermos muitos links as linhas de botões ficaram grudadinhas umas nas outras.
As partes que eu destaquei em verde são linhas customizáveis e esses textos em verde são apagados antes do código ser aplicado ao código fonte.
E as em laranja foram as que mudei, às vezes alterando o número, às vezes alterando o código.
Customizei antes de adicioná-lo. Não fiz muitas mudanças, mas coloquei uma pattern como fundo de cada container.
Não remova o crédito da Elaine
/* Menu personalizado by Elaine Gaspareto (http://www.elainegaspareto.com)
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 20px;
margin-left: 150px;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: transparent none repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #800000;
Font-family: Times New Roman;
font-size: 20px;
border-radius: 3px;
line-height: 5px;
padding: 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Q2MdGtJfnnwY_-Q7-PjyltikGqbrqYAw7eDGjzTCuOOfLoV3-5vGBMss2kG1vD9Q3BC-DfHrgCSWCUAOfQG5XVJApnyH1y9AciEtpR84jiOzW1Nm7lLIONxtnwjayL-uHfqMzj0mPAwvXNuyMt8KXm5HHuWIFJwQQa50sTzHJWPC_vXAg5OuOHzs/s200/pattern%20Gisa%20VF%205.jpg);
margin-left: 8px;
margin-top: 8px;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #EFC2A1;
color: $(tabs.selected.text.color);
border-radius: 50px;
line-height: 5px;
padding: 12px;
}
Com o código pronto siga o caminho: Tema > Personalização > Editar HTML - ctrl F - escrever /* Tabs na caixa de pesquisa e dê Enter:
Apague tudo o que estiver entre
/* Tabs
/* Tabs
----------------------------------------------- */
e
/* Headings
----------------------------------------------- */
e cole o código acima.
Visualize o blog:
Visualize o blog:
A cada nova página que você criar e compartilhar um novo container com o nome da nova página aparecerá no menu.
Resolvi usar o código original do nosso template e modificá-lo.
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: #ececec url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #939393;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
border-top: 1px solid #939393;
border-bottom: 1px solid #939393;
border-left: 1px solid #939393;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #939393;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #565656 url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
/* Headings
----------------------------------------------- */
Tudo o que estiver entre
/* Tabs
----------------------------------------------- */
e
/* Headings
----------------------------------------------- */
personaliza o menu Páginas nativo.
E o menu fica assim:
Para removermos o gradiente basta apagar o trecho url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0.
Mas não apague o ponto e vírgula. Esse sinal vai ficar depois do código da cor.
E o menu já fica assim:
Para trocar a cor do fundo troque o código #ececec pelo código da cor que deseja e se quiser deixar transparente troque o código #ececec pela palavra transparent, mantendo o ponto e vírgula no final.
.tabs-outer {
overflow: hidden;
position: relative;
background: #ececec; (troque pelo código da cor desejada ou pela palavra transparent)
}
Se quiser afastar do topo, da lateral esquerda e da lateral direita acrescente entre as chaves, essas três linhas:
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
ficando assim:
.tabs-outer {
overflow: hidden;
position: relative;
background: #B9DAF9;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
margin-right: 50px;
}
Diminuindo os números das margin você aproxima o menu tanto do topo, quanto das bordas laterais.
Consequentemente aumentando os valores você afasta o menu das bordas.
Para retirar as bordas externas apague a linha border-top: 1px solid #939393;.
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #939393; < > apague essa linha.
}
ficando assim:
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
O código é esse:
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000; >>>>> troque pela cor que deseja sua fonte
border-top: 1px solid #939393; >>>>>>>>> troque pela cor que deseja para as bordas dos botões
border-bottom: 1px solid #939393;
border-left: 1px solid #939393;
border-right: 1px solid #939393; >>>>>>>> acrescente para colocar borda na direita
height: 16px;
line-height: 16px;
}
Se quiser uma borda mais grossa aumente de 1px até o valor que mais agradar, em todas as linhas border.
line-height: 16px; é a altura da linha de botões.
E pode alterar o tamanho da fonte e a cor na linha font:
Caso queira dar um espaço entre as linhas de botões e entre os botões na mesma linha e colocar uma cor nos botões acrescente os seguintes códigos:
background: #7BB9F3;
margin-left: 8px;
margin-top: 8px;
O código ficará assim:
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #138B73;
border-top: 3px solid #939393;
border-bottom: 3px solid #939393;
border-left: 3px solid #939393;
border-right: 3px solid #939393;
height: 16px;
line-height: 16px;
background: #7BB9F3;
margin-left: 8px;
margin-top: 8px;
}
E colocando a palavra transparent naquele primeiro código que modificamos o menu fica assim:
.tabs-outer {
overflow: hidden;
position: relative;
background: transparent;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #138B73;
border-top: 3px solid #939393;
border-bottom: 3px solid #939393;
border-left: 3px solid #939393;
border-right: 3px solid #939393;
height: 16px;
border-radius: 30px;
line-height: 16px;
background: #7BB9F3;
margin-left: 8px;
margin-top: 8px;
}
O efeito hoover.
O efeito hoover é a mudança de cor quando passamos o mouse por cima do botão ou quando clicamos em um deles.
O código original é esse:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #565656 url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
Vamos trocar por esse:
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #D3F1F0;
color: #49BBB7;
border-radius: 30px;
line-height: 16px;
height: 16px;
}
É claro que as cores e os valores cada um definirá de acordo com o gosto pessoal e o modelo do blog.
Dúvidas mande um e-mail.
Nenhum comentário:
Postar um comentário
Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).