• Home
  • Home
  • Elements
    • Elements 1
      • Accordions
      • Alerts
      • Animations
      • Blockquotes
      • Buttons
      • Call to Action
      • Carousels
      • Counters
      • Count Down
      • Custom Page Header
      • Dividers
    • Elements 2
      • FAQs
      • Headings
      • History
      • Icons
      • Icon Boxes
      • Icon & Info List
      • Image Gallery
      • Image Frames
      • Info Box
      • Labels
      • Lightboxes
    • Elements 3
      • Lists
      • Maps
      • Medias
      • Members
      • Portfolios
      • Posts
      • Preview Images
      • Pricing Tables
      • Products
      • Product Categories
      • Progress Bars
    • Elements 4
      • Sections & Parallax
      • Sticky Elements
      • Tabs
      • Testimonials
      • Timeline
      • Toggles
      • Tooltips
      • Word Rotator
  • Elements
    • Elements 1
      • Accordions
      • Alerts
      • Animations
      • Blockquotes
      • Buttons
      • Call to Action
      • Carousels
      • Counters
      • Count Down
      • Custom Page Header
      • Dividers
    • Elements 2
      • FAQs
      • Headings
      • History
      • Icons
      • Icon Boxes
      • Icon & Info List
      • Image Gallery
      • Image Frames
      • Info Box
      • Labels
      • Lightboxes
    • Elements 3
      • Lists
      • Maps
      • Medias
      • Members
      • Portfolios
      • Posts
      • Preview Images
      • Pricing Tables
      • Products
      • Product Categories
      • Progress Bars
    • Elements 4
      • Sections & Parallax
      • Sticky Elements
      • Tabs
      • Testimonials
      • Timeline
      • Toggles
      • Tooltips
      • Word Rotator
      • Banners
      • Shape Divider
  • Categories
    • Inspiration
    • Travel
    • Personal
  • About me
  • Features
    • Post layouts
      • Post with hero header
      • Parallax Post
      • Post with headline under the photo
      • Post with headline above the photo
      • Post with headline above the full width photo
      • Post with headline below the full width photo
    • Custom pages
      • Archives
      • FAQ with Categories
      • Custom login page
      • 404 page
    • Page layouts
      • Page – layout 1
      • Page – layout 2
      • Page – layout 3
      • Page – layout 4
      • Page – layout 5
      • Page – layout 6
      • Page – layout 7
      • Page – layout 8
    • Theme functions
      • Typography
      • Shortcodes
  • Gallery
  • Features
    • Core Features
      • Header Builder & Types
      • Templates Builder
      • Display Condition
      • Custom Product Layouts
      • Porto Studio
      • What’s New
      • Top Performance
      • Speed Optimize Wizard
      • One Click Install Demo
      • Single Page Navigation
      • Live Search
      • Mini Cart – Off Canvas
      • Skeleton Screens
    • Headers
      • Overview
      • Header Builder & Types
      • Flat
        • Flat
        • Flat + Top Bar
        • Flat + Top Bar + Top Border
        • Flat + Colored Top Bar
        • Flat + Borders
      • Center
        • Center 1
        • Center 2
        • Center + Double Navs
        • Center + Custom Navs
      • Floating
        • Floating Bar
        • Floating Icons
      • Sticky
        • Sticky Shrink
        • Sticky Change Logo
        • Sticky Reveal
      • Transparent
        • Transparent Light
        • Transparent Dark
        • Transparent Dark + Bottom Border
        • Transparent Bottom Slider
        • Semi Transparent Dark
        • Semi Transparent + Top Bar + Borders
      • Full Width
        • Full Width
        • Full Width + Borders
        • Full Width Transparent Light
        • Full Width Transparent Dark
      • Nav Bar
        • Nav Bar
        • Nav Bar Full
        • Nav Bar Pills
        • Nav Bar Dividers
        • Nav Bar + Search
      • Side Header
        • Side Header Left
        • Side Header Right
        • Side Header + Left Narrow Bar
        • Side Header + Top Narrow Bar
        • Side Header Dropdown
        • Side Header Menu Slide
        • Side Header Menu Expand
      • Search Styles
        • Simple Dropdown 1
        • Simple Dropdown 2
        • Simple Input
        • Advanced Input
      • Minicart Styles
        • Simple
        • Arrow Alt
        • Inline Text
    • Navigations
      • Pills
        • Pills
        • Pills + Arrows
        • Pills Square
      • Stripes
      • Hover Effects
        • Top Line
        • Bottom Line
        • Slide
      • Vertical
        • Side
        • Dropdown
        • Expand
        • Slide
        • Columns
      • Hamburguer
      • Dropdown Styles
        • Dark
        • Top Line
        • Square
        • Arrow Dropdown
      • Dividers
      • Float Icons
      • Logo Between
      • One Page Nav
    • Page Headers
      • Overview
      • Modern + Title Centered
    • Footers
      • Overview
      • Classic
        • Classic
        • Advanced
        • Compact
        • Contact Form
        • Simple
        • Locations
        • Social Icons & Copyright
      • Modern
        • Modern
        • Button
        • Clean
        • Call To Action Simple
        • Useful Links
        • Background Simple
      • Blog
      • Ecommerce
        • Classic
        • Classic 2
        • Modern
        • Modern 2
      • Extra
        • Top Social Links
    • Layout Options
      • Boxed
      • Dark
      • RTL
    • Extra
      • Page Loading
  • Pages
    • Contact Us
      • Contact Us – Basic
      • Contact Us – Advanced
    • About Us
      • About Us
      • About Us – Basic
      • About Me
    • Team
      • Team – Advanced
      • Team – Basic
      • Member
    • Layouts
      • Full Width
      • Left Sidebar
      • Right Sidebar
      • Left & Right Sidebars
      • Secondary Navbar
    • Services
      • Services – Version 1
      • Services – Version 2
      • Services – Version 3
    • Custom Header
    • Careers
    • Our Office
    • FAQ
    • Site Map
    • 404 Error
  • Blog
    • Large Image
      • Large Image Full Width
      • Large Image Sidebar Left
      • Large Image Sidebar Right
      • Large Image Sidebar Both
    • Medium Image
      • Medium Image Sidebar Left
      • Medium Image Sidebar Right
    • Grid
      • 4 Columns
      • 3 Columns
      • Wide Width 5 Columns
      • No Margins
      • No Margins Full Width 100%
      • Sidebar Left
      • Sidebar Right
      • Sidebar Both
    • Masonry
      • 4 Columns
      • 3 Columns
      • Full Width 100%
      • No Margins
      • No Margins Full Width 100%
      • Sidebar Left
      • Sidebar Right
    • Timeline
      • Full Width
      • Sidebar Left
      • Sidebar Right
    • Single Post
      • Full Width
      • Standard Post
      • Image Post
      • Gallery Post
      • Aside Post
      • Audio Post
      • Video Post
      • Link Post
      • Chat Post
      • Sidebar Left
      • Sidebar Right
      • Sidebar Both
  • Portfolio
    • Single Project
      • Small Slider
      • Large Slider
      • Wide Slider
      • Full Width Slider
      • Video
      • Gallery
      • Carousel
      • Medias
      • Full Width Video
      • Masonry Images
      • Sticky Content
      • Extended
      • Left Sidebar
      • Right Sidebar
      • Left and Right Sidebar
    • Grid Layout
      • Grid 1 Column
      • Grid 2 Columns
      • Grid 3 Columns
      • Grid 4 Columns
      • Grid 5 Columns
      • Grid 6 Columns
      • No Margins
      • Full Width
      • Full Width No Margins
      • Title and Description
    • Masonry Layouts
      • Masonry 2 Columns
      • Masonry 3 Columns
      • Masonry 4 Columns
      • Masonry 5 Columns
      • Masonry 6 Columns
      • No Margins
      • Full Width
    • Sidebar Layouts
      • Left Sidebar
      • Right Sidebar
      • Left & Right Sidebars
    • Ajax
      • Ajax on Page
      • Ajax on Modal
    • Extra
      • Timeline
      • Medium
      • Large
      • Full
      • Bottom Info & Light Box
      • Pagination
      • Load More
      • Infinite Scroll
      • Filter in Sidebar

Sign up to receive exclusive content updates, fashion & beauty tips!

Aroma de Cachos

2 anos em transição capilar e 4 anos cacheada natural!

Aroma de Cachos

2 anos em transição capilar e 4 anos cacheada natural!

  • Home
  • Sobre mim
  • Contato
  •  
barra de pesquisacategoriadicas para blogueirasLayoutmenusub categoriasub menu

Menu topo fixo com sub menus e barra de pesquisa

Posted on outubro 11, 2016março 30, 2019




Para quem não sabe faz alguns meses que iniciei a série dicas para blogueiras com o primeiro vídeo ensinando como personalizar a sidebar/gadget lateral do layout no blogger (clique aqui para conferir o post) e o feedback foi muito positivo, por isso após me organizar finalmente consegui gravar mais um tutorial que eu espero que vocês gostem.

Menu topo fixo com sub menus e barra de pesquisa

Como falei no vídeo, todos os códigos listarei aqui no post.
Para começar vá em layout e adicione gadget HTML/JavaScript, nele você vai colar o seguinte código e salvar:
 
<div id=’NavbarMenu’>
<center>
<div id=’alinhamentohorizontal’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a href=’SEU LINK AQUI‘>Início</a></li>
<li>
<a href=’SEU LINK AQUI‘>Sobre</a>
</li>
<li><a href=’SEU LINK AQUI‘>Anuncie</a>
</li>
 
<li><a href=’SEU LINK AQUI‘>Categorias</a>
<ul>
<li><a href=’SEU LINK AQUI‘>Maquiagem</a></li>
<li><a href=’SEU LINK AQUI‘>Moda</a></li>
<li><a href=’SEU LINK AQUI‘>Look</a></li>
<li><a href=’SEU LINK AQUI‘>Dicas</a></li>
<li><a href=’SEU LINK AQUI‘>Produtos</a></li>
</ul>
</li>
 
<li>
<a href=’SEU LINK AQUI‘>Parcerias</a>
</li>
<li>
<a href=’SEU LINK AQUI‘>Contato</a>
</li>
</ul>
</div>
</div>
<div style=’clear:both;’/></div>
 
<div id=”barra-busca”>
<form id=”form-busca” method=get action=”SEU LINK AQUI/search”><input id=”sprocura” type=text name=q maxlength=255 value=”” />
<input name=btng type=submit id=”bt-busca” value=”” />
<input type=”hidden” name=”domains” value=”SEU LINK AQUI” /><input type=”hidden” name=”sitesearch” value=”SEU LINK AQUI” />
</form></div>
        </center></div>
 
 
– Onde está escrito SEU LINK AQUI, você coloca o link do seu blog, da página criada ou do marcador, da forma que expliquei no vídeo.
– Onde está escrito Início, Sobre, Anuncie, Categorias, Maquiagem, Moda e os outros você pode substituir e colocar o que quiser.
– Para apagar algum link sempre lembre de apagar onde começa com: <li> até onde terminar com: </li>.
– Para adicionar mais sub menus ou coloca-los em outros links é necessário começar com: <ul>
<li><a e finalizar com </a></li> e ir adicionando mais.
– Caso queira adicionar apenas 1 sub menu, comece com: 
<ul>
<li><a e finalize com </a></li></ul></li>. | Existem dois </li>, pois um é referente ao menu que você escolheu, por exemplo Categorias e o outro referente ao link que você adicionou para criar o sub menu.
 
Depois de adicionar e salvar, ele ainda não vai estar configurado, irá aparecer mais ou menos assim:
 
 
Por isso vá em Modelo, depois editar HTML, clique e digite Ctrl+f, irá abrir uma barrinha de pesquisa e procure pelo código: ]]><. Acima dele você irá colar:
 
/* NavbarMenu
————————— */
#alinhamentohorizontal {
width: 1050px;
}
 
#NavbarMenu {
background: #000; | Fundo do menu, altere para a cor que quiser.
width: 100%;  | Tamanho da largura do menu.
    position: fixed; | Fixo no topo.
height: 40px; | Altura o menu.
z-index: 99; | Não retire.
top: 0; | Muda a posição do menu.
left: 0; |  Muda a posição do menu.
}
 
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
 
#nav {
margin: 0;
}
 
#nav ul {
float: left;list-style: none;
margin: 0;
padding: 0;
}
 
#nav li {
list-style: none;
    margin-right: -10px;
padding: 0;
}
 
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; |edite cor do link.
display: block;
font-size: 16px; |Tamanho da fonte do link.
font-family: Tahoma; |Letra da fonte.
font-weight: normal;
text-transform: uppercase; | Letra em maiúsculo.
margin: 0;
padding: 9px 19px 8px; | Altura e espaçamento das letras e caixa de pesquisa.
}
 
#nav li a:hover, #nav li a:active {
background: #000;
color: #253cc7;  |edite cor do link hover.
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
    margin-right: 0px
}
 
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000; |cor de fundo.
width: 100px;
color: #FFF; |cor do link.
font-size: 14px;
font-family: Tahoma;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0;
padding: 7px 10px;
 
}
 
#nav li li a:hover, #nav li li a:active {
background: #000; |cor de fundo hover.
color: #253cc7; |cor do link.
padding: 7px 10px;
}
 
#nav li {
float: left;
padding: 0;
}
 
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
 
#nav li ul a {
width: 140px;
}
 
#nav li ul ul {
margin: -32px 0 0 171px;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
 
#nav li:hover, #nav li.sfhover {
position: static;
}
 
 
/* CSS PESQUISA
—————————–*/
#barra-busca {
float:right;
}
 
#form-busca {
background: none;
}
 
#form-busca #sprocura{
height: 18px; | Altura da barra.
width: 170px; | Largura da barra.
margin-top: -28px; | Posicionamento no top.
margin-left: 8px; | Posicionamento na esquerda.
color: #000; | Cor da letra digitada.
border: 0px solid #000; |
float: left; | Posicionamento da barra.
padding: 3px; | Tamanho total da barra.
background-color: #FFF; | Cor da barra.
}
 
#bt-busca {
height: 23px;
width: 33px;
background: transparent url(“LINK DA LUPA DE PESQUISA“) no-repeat scroll 0% 0%;
border: medium none;
margin-top: -28px; | Posicionamento no top.
float: right;
cursor: pointer;
margin-right: 45px;
margin-left: 5px; | Espaço entre a lupa e a barra de pesquisa.
}
 
– Nos códigos que não tem explicação do que são ou fazem, não é necessário alteração.
– Salve e verifique como ficou.
Deverá ficar mais ou menos assim:
 
 
– Como expliquei no vídeo, se ficar listras entre as letras, é só apagar o seguinte código:
 
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
 
Para localizá-lo é só procurar por: border-$startSide apagar as duas linhas e salvar.
 
Para quem quiser utilizar a mesma lupa de pesquisa do vídeo:
:http://i65.tinypic.com/2dv8pxd.png 
:http://i63.tinypic.com/pypv8.png
:http://i64.tinypic.com/28mcn0y.png
:http://i68.tinypic.com/x2ulxg.png
 
 
Feito isso é só adicionar os links de acordo com o seu gosto e salvar.

Só para lembrar, eu uso o modelo simples do blogger para realizar essas alterações, se o seu modelo for outro pode ser que fique diferente ou que não funcione.

Vídeo explicando (peço desculpas pelo áudio oscilar as vezes):


Espero que tenha gostado do tutorial, se tem alguma sugestão de post ou dúvida fique a vontade para perguntar.

Até mais!
signature
0

Subscribe so you don’t miss a post

Sign up with your email address to receive news and updates!

Menu topo fixo com sub menus e barra de pesquisa

Anterior

Resenha – Máscara de cílios da Dailus Extra longo e curvado

Próximo

Shampoo a seco
Você também poderá gostar
Como ter mais seguidores no instagram?
Como ter mais seguidores no instagram?
Posted on setembro 2, 2017maio 16, 2020
Dicas para blogueiras – Personalizar a sidebar/gadget lateral do layout no blogger
Dicas para blogueiras – Personalizar a sidebar/gadget lateral do layout no blogger
Posted on janeiro 12, 2016março 30, 2019
Como comprar produtos de beleza com desconto
Como comprar produtos de beleza com desconto
Posted on julho 5, 2018setembro 6, 2020
Blogueiras e youtubers para conhecer
Blogueiras e youtubers para conhecer
Posted on dezembro 29, 2017março 26, 2019
Como ter mais seguidores no Instagram?
Como ter mais seguidores no Instagram?
Posted on maio 16, 2020setembro 6, 2020
Aprenda a estruturar o seu dia para realizar mais
Aprenda a estruturar o seu dia para realizar mais
Posted on fevereiro 1, 2021fevereiro 5, 2021

O que achou? Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

1 Comment
  • Ray Meireles
    maio 6, 2018

    seu tutorial me ajudou bastante
    http://www.raissameireles.com.br/

    Resposta

Minha redes sociais

Recent Pins

Categories

Resenha linha Black Mult Cachos da Mutari
Esfoliação no couro cabeludo?
Sancare: Curativo Hidrocolóide e Quadradinho multiuso

Aroma de Cachos é orgulhosamente mantido com WordPress