WELCOME TO THE FUCK WORLD
Desde o inverno de 2014 | (03.julho.2014)

SÓ PRA QUEM É AUAUZINHO DO PATTISON
LAYOUT FEAT. THE BATMAN (2022)
VERSÃO: Unmask the truth
DESIGN CRIADO POR LUMIERE E CODIFICAÇÃO POR ANDY


CLIQUE E SEJA UM FUCKER
RESULTADO
DEUSAS
Andy - Codificar o Layout.
Status: Ainda dando vácuo nas mods, juro que é sem querer/ou não rs.
Carol - Botar ordem nessa bagaça
Status: Batendo a cara de vocês na parede.
Lumi - Fodona em imagem
Status: Passando raiva junto com Carol
Mel -Maior freela desse blog
Status: Dando apoio emocional e moral na moderação.
' status
CATEGORIAS FECHADAS
CRÍTICA DE FANFIC


CATEGORIAS REABERTAS
TRAILER

CATEGORIAS CANCELADAS
TEASER

ÚLTIMAS FUCK ENTREGAS
Carregando...
Tutorial (HTML): Menu Fixo no topo com search
Tutorial (HTML): Menu Fixo no topo com search

08 fevereiro 2016


Olá meus amores, hoje eu trago para vocês um tutorial de Menu Fixo no topo do blog, a pedido da minha mais nova amiga (Mari <3). 
Os créditos vão para Place Style

Primeiramente:
Faça um Backup do seu layout caso dê algum erro!

1- Vá no Painel do Blogger > Modelo e procure por  ]]></b:skin>
     Quando encontrar, cole acima:

#mymenuda {
background: #CD6090; /* Cor do background */
border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */ 
width: 100%;
height: 34px;
position: fixed;  /* FIXA O MENU NO TOPO */
top: 0;
left: 0;
z-index: 9999; }

#mymenu {
background: #fff;  /* Cor da fonte */ 
font-family: 'Arial', corsiva; /* Nome da fonte */ 
font-size: 16px; /* Tamanho da fonte */ text-transform: uppercase;  /* FONTE DO TEXTO EM MAIÚSCULA */  }

#mymenu li {
list-style-type: none;
display: inline; float: left; /* Posicionamento do menu */ 
padding: 0px; }

#mymenu li a {
color: #fff;  /* COR DA FONTE DO LINK */
text-decoration: none;
padding-right: 24px;
 line-height: 37px; }

#mymenu a:hover {
color: #EED5D2; /* Cor 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 */ font-family: Georgia, Tahoma; /* Nome da fonte */ }

.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */ 
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
background: #FFF; /* Cor de fundo */ }

.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */ 
width:20px;
height:20px;
border: 0;
padding:6px; }


As marcações em vermelho são de extrema importância, cuidado ao alterá-las.
Lista de cores em HTML (Clique Aqui)


2- Agora "Salve o modelo".
3- Vá na aba "Layout".
4- Adicionar um Gadget.
5- HTML/JavaScript.


E cole esse Código:

<div id="mymenuda"> <!-- MENU COMPLETO -->

<div id="mymenu"> <!-- LINKS DO MENU-->

<li><a href=" Link ">Título</a></li>

<li><a href="Link ">Título</a></li>

<li><a href=" Link ">Título</a></li>

<li><a href=" Link ">Título</a></li>

<li><a href=" Link ">Título</a></li>

</div>

<form action="/search" class="search" method="get"><!-- SEARCH PERSONALIZÁVEL -->

<input class="searchbar" id="s" name="q" type="text" value="" />

<input class="searchbut" type="submit" value="" />

</form>

<div id='mymenuright'>  <!-- NUNCA RETIRE ISSO -->

</div></div>



Bem, espero que vocês tenham entendido.Qualquer duvida, pode deixar aqui nos comentários que responderei a todos!


Beijos e MILHÕES de obrigadas pela preferência,
     Andy Santana (Lermandys). Web-Master FD. Contato: deias.lerman@gmail.com

3 comentários:

FUCKERS

Fuckers

'CHAT'ZINHO
FUCKERS DO MÊS
staff
categoria: TEXTO
parabens

staff
categoria: IMAGEM
parabens

SOCIAL
EXTENSÃO
School FUCKER
Blog exclusivo para designers iniciantes que querem aprender mais sobre Design, e participarem do blog FD.

MAGAZINE FUCKER
EM BREVE.