- Curva Css: Menu no topo com redes sociais e barra de pesquisa

Quer aprender como fazer o menu? Então segue o tutorial!

Vá no blog que deseja colocar o Menu.

Em seguida vá em modelo, clique em "Editar HTML"

Clique em qualquer espaço dentro do código

Clique em Ctrl + F ( Irá aparecer uma barrinha de pesquisa )

Dentro da barrinha de pesquisa procure por <body e clique em enter

Copie todo o código a seguir e cole abaixo de <body

<div class='top_header clearfix'>
<div class='ct-wrapper'>


<div class='nav-menu'>
<ul class='clearfix blog_menus'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='LINK DA SUA PÁGINA'>Sobre mim</a></li>
<li><a href='LINK DA SUA PÁGINA'>FAQ</a></li>
<li><a href='LINK DA SUA PÁGINA'>Moda</a></li>
<li><a href='LINK DA SUA PÁGINA'>Redes sociais</a></li>
<li><a href='LINK DA SUA PÁGINA'>Blogroll</a></li>
<li><a href='LINK DA SUA PÁGINA'>Contatos</a></li>
</ul>
</div>

<div class='right clearfix social_search'>
<div class='search_from right'>
<div class='search-form-wrapper'>
<form action='/search' method='get' role='search'>
<input name='q' placeholder='Digite e dê enter' type='text'/>
</form>

<span class='search-form-icon'><span class='fa fa-search'/></span>

</div>
</div>
<div class='social-wrap left'>
<ul class='dslc-social'>
<li><a href='LINK DO TWITTER' target='_blank'><span class='fa fa-twitter'/></a></li>
<li><a href='LINK DO FACEBOOK' target='_blank'><span class='fa fa-facebook'/></a></li>
<li><a href='LINK DO YOUTUBE' target='_blank'><span class='fa fa-youtube-play'/></a></li>
<li><a href='LINK DO VIMEO' target='_blank'><span class='fa fa-vimeo-square'/></a></li>
<li><a href='LINK DO TUMBLR' target='_blank'><span class='fa fa-tumblr'/></a></li>
</ul>
</div>
</div>

</div>
</div>

Substitua tudo de acordo com o que se pede. No "LINK DA SUA PÁGINA" você irá substituir pelo link da sua página estática.

Agora clique em Ctrl + F novamente e procure por ]]></b:skin> achou? Então cole o código abaixo ACIMA dele e personalize da maneira que preferir. Se você não entende muito css, sugiro que mude apenas as cores e tamanhos para se adequar no seu blog e ficar do jeito que combine com seu blog.

/* MENU FIXO
------------------------------------------------------------ */
.top_header {
background-color: #222; /*cor do fundo da barra */
position: fixed; /* mude fixed para absolute não quiser fixo*/
top: 0;
z-index: 99999;
left: 0;
right: 0;
}
.ct-wrapper {
padding: 0px 15px;
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.nav-menu {
padding: 0;
width: auto;
display: block;
position: relative;
margin-top: 0;
z-index: 100;
float: left;
}
.nav-menu ul {
list-style: none;
padding: 0px;
margin: 0;
z-index: 1;
display: table;
width: auto;
}
.nav-menu ul li {
display: inline-block;
float: left;
position: relative;
padding: 0px;
margin: 0px;
z-index: 1;
list-style: none;
font-size: 16px;
margin-right: 30px;
-moz-transition: background-color 400ms ease, border 200ms ease-out;
-o-transition: background-color 400ms ease, border 200ms ease-out;
-webkit-transition: background-color 400ms ease, border 200ms ease-out;
transition: background-color 400ms ease, border 200ms ease-out;
}
.nav-menu li a {
color: #fff;
display: block;
z-index: 10;
color: #B3B3B3;
font-size: 11px;
font-weight: 500;
line-height: 24px;
padding: 12px 1px;
letter-spacing: 0;
text-transform: uppercase;
font-family: montserrat, sans-serif;
-moz-transition: border 300ms ease 0s , color 300ms ease 0s;
-o-transition: border 300ms ease 0s , color 300ms ease 0s;
-webkit-transition: border 300ms ease 0s , color 300ms ease 0s;
transition: border 300ms ease 0s , color 300ms ease 0s;
text-decoration: none;
}
ul li {
list-style-type: square;
}
.nav-menu li a:hover, .nav-menu li a.current, .nav-menu li:first-child a {
color: #fff; /*cor do link quando passa o mouse*/
}

/* barra de redes
--------------------- */
.social-wrap.left {
}
.left {
float: left;
}
ul.dslc-social {
list-style-type: none;
font-size: 0;
}
ul.dslc-social {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
ul.dslc-social li {
line-height: 1;
}
ul.dslc-social li {
margin: 5px 10px 0 0;
padding: 0;
line-height: 1;
display: inline-block;
}
ul li {
list-style-type: square;
}
ul.dslc-social a {
font-size: 12px;
color: rgb(119, 119, 119); /* cor dos icones das redes sociais */
}
ul.dslc-social a:hover {
color: #eee; /* cor dos icones das redes sociais quando passa o mouse */
}

/* BARRA DE PESQUISA
---------------------------- */
.social_search {
margin-top: 12px;
}
.right {
float: right;
}
.search-form-wrapper {
position: relative;
border-left: 1px solid rgba( 255, 255, 255, 0.1 );
padding-left: 30px;
}
.search-form-wrapper {
border-left-color: rgba( 255, 255, 255, 0.1 );
}
.search-form-wrapper input[type="text"] {
display: block;
width: 100%;
background: transparent;
border: 0;
outline: 0;
}
.search-form-wrapper input[type="text"] {
color: rgb(145, 145, 145); /*cor do texto da barra de pesquisa */
font-size: 11px;
font-weight: 400;
font-family: Montserrat;
line-height: 22px;
text-transform: none;
}
.search-form-icon {
color: rgba(255, 255, 255, 0.65); /* cor da lupa da barra de pesquisa */
font-size: 10px;
top: 0px;
right: -3px;
position: absolute;
}

OBS: O código das redes sociais não apareceu?

Caso os icones das redes sociais não tenha aparecido, cole o seguinte código ABAIXO de <head> no HTML no seu blog e salve.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

https://pronto-postei.blogspot.com/2016/10/menu-no-topo-com-redes-sociais-e-barra.html

- Curva Css

Banner

quarta-feira, 18 de novembro de 2020

Menu no topo com redes sociais e barra de pesquisa

Nenhum comentário:

Postar um comentário

Popular Posts