Dando estilo ao menu de "Páginas" no Blogger colocando um buscador

É possível personalizar o menu horizontal das páginas do Blogger. Para personalizar e ainda colocar um buscador faça o seguinte. Primeiro copie este código abaixo e cole-o no HTML de seu blog antes de:

 ]]></b:skin>

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

/* Menu horizontal páginas-----------------------------------------------*/
#PageList1 {top:0px;left:0px;right:0px; color: #fff;
background: #A7B034;
border: 4px groove #A4AF35; }
#searchform {
margin-top:6px;
float:right;
width:270px;
height:24px
}

#back {
background:#DECF3F;
border:0 none;
float:left;
height:14px;
margin-right:8px;
width:218px;
padding:5px
}

#proc {
margin-top:3px;
float:left;
width:23px;
height:19px
}

Feito isso agora procure pelo seguinte trecho:

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
<b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Troque-o por este.

Visualize, estando tudo certo, slave.

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='back' maxlength='255' name='back' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFCsCp3C8mTVFiCAHWZecc7Tn6lLOD61o-acRQym4Zkx4oFhompkBEsUigKrxaINiUAh1vPtxh5KtK3i1zRKYBEOrlXrtyIfvVsyQqvkGleir87mimCzHENMN_D3wd0EzfyJFx__MZPU/s1600/View.png' type='image'/>
</form>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Ah Elke, mais gostaria tanto de colocar o menu acima da header do meu blog...



Então meu caro ou minha cara, copie o código apague-o de onde ele estiver e cole-o acima de:

<div id='header-wrapper'>