Pular para o conteúdo principal

Personalizar o widet dos Seguidors (HTML) - Parte 2

Eu tinha prometido antes, que eu iria ensinar a customizar todo o widget dos seguidores. A primeira parte foi "Personalizar o Widget dos Seguidores (CSS)". Agora vamos mexer na estrutura do widget.
Antes de mais nada, faça um becape do seu template: no painel do seu blog, vá em Layout > Editar HTML e clique em baixar modelo completo.
Guia Blogger - Dicas, Tutoriais e Templates
Agora, clique em Expandir Modelos de Widget,e procure por  <b:widget id='Followers .
Estes são os códigos:
<data:totalFollowerCount/> : número de seguidores;
<data:followThisMessage/> : é o texto Acompanhar;
<data:stopFollowingMessage/> : é o texto Pare de Acompanhar;
<data:emptyFollowersMessage/>  : é o texto Seja o primeiro a acompanhar esse blog;
<data:viewAllMessage/> : é o texto Ver Todos;
<data:manageFollowersMessage/> :  é o texto administrar;
Procure qualquer um destes códigos, você pode alterá-los ou até remove-los.
Se você é muito preguiçoso ocupado, pode pegar o código do widget já customizado. Procure pelo código abaixo:
<b:if cond='data:title != &quot;&quot;'>
<b:if cond='data:codeSnippet != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
<b:else/>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>
</b:if>

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
<b:if cond='data:codeSnippet != &quot;&quot;'>
<data:codeSnippet/>
<b:else/>

<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>
</b:if>
<b:include name='quickedit'/>
</div>
E substitua-o por este:
<b:if cond='data:title != &quot;&quot;'>
<b:if cond='data:codeSnippet != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
<b:else/>
<h2 class='title'><data:totalFollowerCount/> <data:title/></h2>
</b:if>
</b:if>

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
<b:if cond='data:codeSnippet != &quot;&quot;'>
<data:codeSnippet/>
<b:else/>

<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>

</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>


</b:if>
<b:include name='quickedit'/>
</div>
É isso. Qualquer dúvida é só deixar um comentário!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.