Marcadores que se abrem em um clique no novo Blogger

 

DEMO

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;
}