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.
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ê é muitopreguiçoso ocupado, pode pegar o código do widget já customizado. Procure pelo código abaixo:
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.
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
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
<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 + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<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='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' 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:codeSnippet != ""'>
<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 + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<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='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' 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>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
<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 + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<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='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' 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!
<b:if cond='data:codeSnippet != ""'>
<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 + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<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='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' 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>
Muito bom este tutorial. Pena que eu tive um trabalho considerável estudando o código e só agora venho dar com isto... rsrs. Eu também publiquei algo sobre o assunto ontem. Mas acho que não é novidade para você: http://mestreblogger.blogspot.com/2008/12/removendo-contagem-de-seguidores.html
ResponderExcluirAliás, acho que seu blog está com um script desarranjado aí. Este script que mostra os banners de parceiros está atualizando a página cada vez que muda o banner... :´[
Abraços
@mestreblogger eu já to dando um jeito no blog pra tentar resolver isso. E quanto ao seu artigo, tá muito bom!!!
ResponderExcluirOlá Jean, tudo bem?
ResponderExcluireu não entendo cara, segui todos os seus passos e nada foi modificado no meus seguidores. O que será que acontece?
Eu queria mudar a cor de fundo onde está escrito "Participar deste site", igual ao seu, que está no fundo preto.
Se puder me ajuda agradeço
abraço
Desculpa rafael, esse tutorial não vale para o novo widget de seguidores (esse em conjunto com o google friend connect). Mas para modificar as cores do seu widget vá para o painel do blogger, escolha o blog que você quer modificar, clique em LAYOUT, depois em ELEMENTOS DE PÁGINA, procure pelo widget dos seguidores e clique em EDITAR. Você pode mudar as cores facilmente do jeito que eu expliquei. Se ainda estiver com dúvidas, pode perguntar.
ResponderExcluir