13 de ago de 2010

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='http://2.bp.blogspot.com/_BaCxSD9NFn8/TGVBhyDL6HI/AAAAAAAAB_w/8CYlswCw_zg/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'>

Um comentário:

  1. Não consegui achar o 2º código que mandou procurar. Eu procurei apenas pela primeira linha do código, e mesmo assim, não o encontrei =/

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube