15 de jul. de 2011

Marcadores que se abrem em um clique no novo Blogger

Para que o seu novo Blogger, baseado no modelo Simple, que já vem nativo no Blogger, tenha os marcadores ocultos, sendo mostrados em um clique, vá até "Modelo" e clique em:




Clique então em "Expandir modelos de widget"



Procure então por todo o código abaixo: (para facilitar, procure por essa primeira linha destacada em vermelho. Não se esqueça de clicar no botão "F3" em seu teclado)


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
    <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>



Substitua-o então por este:

<b:widget id='Label3' locked='false' title='Marcador botão' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='titulomarcador'><a href='javascript:void(0);' onclick='expandcollapse(&quot;marcadores&quot;)'>
<center>ABRIR MARCADORES</center></a></div>
</b:if>
<div class='widget-content'>
<ul class='texthidden' id='marcadores'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
  </div>
</b:includable>
</b:widget>
</b:section-contents><b:section-contents id='sidebar-right-2-1'>
<b:widget id='Stats1' locked='false' title='' type='Stats'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
</b:widget>


Salve !


Agora procure por:

]]></b:skin>

Antes dele, cole o código abaixo:

/*Label3------------------------------------------------------------------------------------------------*/
#Label3{
border: 2px solid #ccc;
}

#Label3 h2 {
text-shadow: 1px 1px 1px #fff;
background: #ccc;
text-align: center;
font-size: 16px;
padding: 8px 0;
}
#Label3 ul{list-style:none;padding:1px 0px;
}
#Label3 li  {  border-bottom:1px solid #000;
}
#Label3 li a:link { color: #808080;
}
.titulomarcador {
font-size: 16px;
background: #eee;
padding: 8px 1px;
}

2 comentários:

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