Video :Como colocar menu fixo com barra de pesquisa.

Confiram o tutorial em video ou post >

Olá gurias e guris!

 hoje eu vim aqui com um tutorial de como colocar um menu fixo com barra de pesquisa então bora lá com o tutorial.Para começar vá em modelo e click em editar html,depois de um ctrl+f e quando aparecer a barrinha de pesquisa escreva isso ]]></b:skin>  ,agora cole isso em cima desse negocio que você acabou de pesquisar na barrinha :

E uma coisa antes de começar esse tutorial faça beckup do blog ,porque se alguma coisa der errado ja viu né.

/*--- Menu ---*/
#NavbarMenu {
background: #ce4238; /*-- Cor do fundo --*/
margin-top: -3 px; /*-- Margem do topo, só mude se for necessário --*/
height: 40px; /*-- Altura, mude se for necessário --*/
display: block; position: fixed; z-index: 9999; width: 100%; font-weight: none; text-transform: capitalize; }

#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*-- Cor do link --*/
font-size: 16px; /*-- Tamanho da fonte do link--*/
padding: 9px 15px 5px; /*--Margem interna, formato: TOPO DIREITA BAIXO (mude se necessário) --*/
display: block; font-weight: normal; text-transform: capitalize; margin: 0; }
#nav li a:hover {
color: #333;  /*-- Cor do link Hover --*/
text-decoration: none; }

/*--- Não mude nada ---*/
#NavbarMenuleft { width: 100%; float: left; margin: 0; padding: 0; }
#nav { margin: 0; padding: 0; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0; }
#nav li { list-style: none; margin: 0; padding: 0; float: left; }
#nav li:hover { position: static; }

/*--- Caixa em que fica a parte da caixa de pesquisa, não precisa mudar nada ---*/
#NavbarMenuright {
width: 270px;
font-size: 11px;
float: right;
margin-top: -35px;
margin-right: 25px;
text-align: right;
padding: 6px 0 0 0; }

/*--- Caixa de pesquisa ---*/
.search{
margin-top: 6px; /*-- Margem superior, edite se precisar, - sobe e + desce  --*/
font-family: Arial; /*-- Fonte, mude se quiser, não é necessario --*/
float: left; margin-left: 0px;
}

/*--- Barrinha onde se digita ---*/
.searchbar{
height: 16px; /* Altura da barrinha */
width: 240px; /* Largura da barrinha */
margin-top: -45px; /*-- Margem superior, edite se precisar, - sobe e + desce  --*/
margin-bottom: -18px; /*-- Margem inferior, edite se precisar, - sobe e + desce --*/
background: #fff; /*-- Cor do fundo --*/
color: #333; /*-- Cor da fonte da letra que será escrita quando procurarmos por algo --*/
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*-- Bordas arredondadas, apague se não quiser ou mude o valor dos números --*/
margin-left:0px;
padding:3px 5px;
border:none; }

/*--- Botão, não precisa mudar nada ---*/
.searchbut{
background: url("http://static.tumblr.com/wkafvsi/jcLmsk7dm/teste1pesquisa.png") center no-repeat ;
margin-top: -8px; margin-right: -35px; border:0 !important; float: right; height: 26px; width: 26px; }

*::-moz-selection {
background:#ff6666;  /*---Cor de fundo--*/
color:#ffffff;   /*--cor da fonte--*/
}
*::selection {
background:#ff6666;/*---Cor de fundo--*/
color:#ffffff;  /*--cor da fonte--*/
}

agora de pois de ter colado esse  código apague tudo o que esta escrito na barra de pesquisa e procure por <script> ele vai estar embaixo do ]]></b:skin> vejam:

E tudo que estiver escrito dessa primeira setinha no 704 até o 789 apague tudo e cole isso aqui :

 <b:template-skin>
      <b:variable default='960px' name='content.width' type='length' value='1000px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>

      <![CDATA[
      body {
        min-width: $(content.width);
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

      .main-inner .fauxcolumn-center-outer {
        left: $(main.column.left.width);
        right: $(main.column.right.width);
        /* IE6 does not respect left and right together */
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") -
            parseInt("$(main.column.right.width)") + 'px');
      }

      .main-inner .fauxcolumn-left-outer {
        width: $(main.column.left.width);
      }

      .main-inner .fauxcolumn-right-outer {
        width: $(main.column.right.width);
      }

      .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

      .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
      }

      #layout {
        min-width: 0;
      }

      #layout .content-outer {
        min-width: 0;
        width: 800px;
      }

      #layout .region-inner {
        min-width: 0;
        width: auto;
      }
      ]]>
    </b:template-skin>
    <b:include data='blog' name='google-analytics'/>
  </head>
<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;;
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
anio = &quot;<div class='fecha_anio'>&quot;+da[2]+&quot;</div>&quot;;
document.write(dia+mes+anio);
}
</script>

  <body><div id='NavbarMenu'><div id='NavbarMenuleft'><ul id='nav'>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>


<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>


<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>


<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>


<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
</ul></div>
<div id='NavbarMenuright'>
<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></div><div style='clear:both;'/> expr:class=&#39;&quot;loading&quot; + data:blog.mobileClass&#39;&gt;
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
     <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com/navbar.g?targetBlogID\075680535014164635088\46blogName\75bbnjklm\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://bbjbbsjjjjjndnn.blogspot.com/search\46blogLocale\75pt_BR\46v\0752\46homepageUrl\75http://bbjbbsjjjjjndnn.blogspot.com/\46vt\75-2153922249118546338&#39;,
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
     </b:widget>

E só mude onde esta escrito link da pagina e coloque obviamente o link da pagina e onde esta escrito nome da pagina ,o nome da pagina ok?