Novidades
recent

#DICABLOG - Menu Fixo Blog - Como fazer

Bom dia Meninos e meninas, #geeks do meu coração tudo bem com vocês?

Quem é que nunca valorizou aquela cara super personalizada nos templates dos blogs e dos sites existentes por ai? Eu pelo menos observo muito (ainda mais quando acho bonito) e sempre busco agregar elementos que façam a imagem do Blog ficar melhor ainda.

Desde que o Do Meu Jeito surgiu ele tem essa carinha super especial, resultado de pesquisas, de opiniões e de muito mais muito trabalho diário para manter sempre tudo atualizado e funcionando. Porém há alguns dias (semanas na realidade) tenho notado que muitas das configurações padrões do blog começaram a mudar, inclusive todo o formato que o conteudo HTML é apresentado e acabou gerando uma dúvida e um desespero muito grande em pessoas que não fazem uso de programadores de layout e que tocam por conta própria seu Blog.

A crítica (dúvida na realidade) foi a mudança da parte de Menus Suspensos do Blog, sim estes que ficam bem no alto que te leva direto para aquela seção bacana, e que facilita em muito nosso dia-a-dia na hora de ler o blog, ou até mesmo o botão de busca que fica la no alto para chegar rapidão ao post que se quer ler, dai pesquisando, conversando, apanhando (no sentido figurado viu pessoal), eu trouxe hoje para vocês como fazer a NOVA CONFIGURAÇÃO dos menus fixos de seu blog, não é dificil OK precisa apenas de paciência e calma para instalar tudo direitinho.

Confere ai

INSTALANDO MENU SUSPENSO/FIXO NO SEU BLOG (template)

Antes de mais nada, sempre é bom fazer um Backup completo do seu blog caso ocorra algum probleminha no decorrer das mudanças, se não souberem fazer conta ai que eu ensino também.

Passo 1 – Acesse o painel de controle do seu blog e vá à opção Modelo, clique em Editar HTML.
Clique em algum lugar no meio do código e pressione as teclas Ctrl+F na janela Search que irá aparecer, procure pela tag: ]]></b:skin>



Passo 2 – Logo acima da tag pesquisada no primeiro passo cole o código a seguir:


#mymenuda {
background: #CD6090; /* defina a cor do background */
border-left: 200px solid #CD6090; /* tamanho da borda e cor- não retire pq ela centraliza o menu */
width: 100%;
height: 42px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
background: #fff; /* cor da fonte */
font-family: ‘Arial’, corsiva; /* nome da fonte */
font-size: 20px; /* titulo da fonte */
text-transform: uppercase;
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 42px;
}
#mymenu a:hover {
color: #EED5D2; /* cor do link da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
margin-top:7px;
height: 20px;
width: 240px;
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url(‘http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png’); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */
width:30px;
height:30px;
border: 0;
padding:7px;
}

Para alterar o seu menu verifique as dicas a seguir:

Os itens que podem ser alterados estão em negrito e com as explicações logo na frente, apenas atente-se ao detalhe do fundo do menu que é a parte Background.

Background: Onde você irá definir o fundo do seu menu, que pode ser uma imagem ou uma cor.

Se você quiser colocar uma imagem é só colocar depois de dos pontos a frase background url(“Link da imagem”), onde está link da imagem você irá colocar o endereço da imagem escolhida, que deve ser hospedada em um servidor online.

Se for utilizar apenas cor de fundo, coloque o código HTML da cor, por exemplo #000000 que é Preto.

No item border-left: tem o código #CD6090 que é a mesma cor do menu, se você alterar a cor do menu precisa alterar essa cor.

ADICIONANDO O GADGET DO MENU



Passo 3 –  Clique na opção Layout, onde está escrito “crosscol” ou “Cross- Column” do layout do seu blog você irá clicar em adicionar um Gadget e escolha o modelo HTML/ JavaScript.

Passo 4 – Feito isso, coloque o código abaixo dentro do Gadgets:

<div id=”mymenuda”>
<div id=”mymenu”>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<li><a href=” LINK “>PÁGINA</a></li>
<form action=”/search” class=”search” method=”get”>
<input class=”searchbar” id=”s” name=”q” type=”text” value=”” />
<input class=”searchbut” type=”submit” value=”” />
</form>
<div id=’mymenuright’>
</div></div>


Nesse código você irá alterar a palavra “LINK” pelo URL da página que deseja, e onde está escrito “Página” será o título do desse link. Pode ser: Home, Sobre o Blog, Contato, entre outros.

Espero que gostem e que ajude a todos vocês, assim como me ajudou.. foi tipo.. UFAAAA.. agora deu certo e qualquer dúvida, é so comentar aqui ou nas minhas redes sociais que eu respondo tudo.



Um comentário:

Tecnologia do Blogger.