Retirando os Números dos Marcadores

Tem coisa mais chata que os números log após os marcadores? Pessoalmente eu detesto, só ocupam espaços desnecessários no layout do blog. Vejam que aqui no Botoja Dicas os nossos Marcadores não possuem números indicadores de quantidade. Gostaria de aprender como fazer isso em seu blog? É bem simples, prático e fácil. Veja como Proceder:

Continue Lendo...

Você terá apenas que apagar uma linha de seu Código Fonte. Vá em Editar HTML, Expandir modelos de widgets e procure o código a baixo e apague a linha em Vermelho:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<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 class='widget-content'>
<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/&gt;
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/&gt;
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span&gt;
</li>
</b:loop>

Salve e veja o resultado!

Posts Relacionados no Blogger

Para colocar no rodapé da postagem os Artigos Relacionados,  é muito fácil e também muito útil, pois direciona o leitor para outros textos com a mesma tag.

Para evitar o aumento do número de rejeição de seu blog, o ideal é prender o leitor pela curiosidade. A melhor forma, é vincular sua postagem à outras postagens suas que falam de assuntos parecidos, ou seja, que pertencem as mesmas categorias ou marcadores que seu post original.

Continue Lendo...

1- Coloque o script abaixo depois de ]]></b:skin>:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

2- Salve a modificação. Clique em Expandir Modelo de Widget e procure por este trecho e acrescente o que está em vermelho:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>
</b:if>
</span>

3- Agora procure por:
<div class='post-footer-line post-footer-line-3'>
e cole logo abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Salve as modificações. Para dar estilo ao título e à lista, acrescente no CSS:

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: coloque aqui o tamanho da fonte;
color: #...coloque aqui o valor da cor para o título;
}

Para dar estilo à lista:

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: tamanho da fonte;}
.related-posts li a{color: #....}
.related-posts li a:hover{color: #.....; text-decoration:none;}

Obs: os links dos artigos relacionados aparecem apenas nas páginas internas.

Fontes:
UsuarioCompulsivo
Vagabundia
Templates Novo Blogger

Comentários do Autor Destacados

Encontrei esses dias no Usuário Compulsivo, uma dica maravilhosa. Para Blogs com vários comentários, será ótimo! Pois agora você poderá distinguir seus comentários dos demais, dando destaque para eles. Para isso há a necessidade de se realizar algumas alterações no HTML de seu blog. Veja a baixo como proceder:

Continue Lendo...

Entre na edição HTML do template, marque Expandir modelos de widgets e procure pelo trecho de código abaixo e inclua os trechos destacados em vermelho:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>

<data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Agora, nas definições CSS do template, normalmente entre as Tags <head></head>, procure pelo trecho que determina o estilo de formatação dos comentários e logo após cole as seguintes linhas:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Nos campos destacados em vermelho definem-se as cores da borda e do fundo do destaque respectivamente, adapte conforme o caso.
OBS: O destaque será aplicado inclusive nos comentários já publicados. Obviamente só naqueles que foram feitos usando uma Google Account. Comentários assinados via OpenID não serão destacados.
Se você quiser também pode alterar o destino do link que aparece sob o nome do autor, que por padrão aponta para a página do perfil do Blogger. Dê uma olhada no tutorial que o Usuário Compulsivo fez.

Resumo de Postagem - Leia Mais

Passando no Templates Novo Blog a procura de um novo Layout, esse que temos agora, achei um hack para o blogger que me chamou atenção. É o famoso Resumo de Postagem. Onde você "esconde" o restante da postagem para que possam ser exibidos só se clicarem em Leia Mais. Com isso você deixa a sua página mais limpa, leve e organizada. Muito usado por quem costuma ou precisa colocar muita coisa em seu post.

A maioria dos hacks de Resumo de postagem fazem com que, ao clicar para continuar vendo a postagem, abra uma página apenas com o conteúdo de seu post. Muitos acreditam que isso é melhor principalmente devido aos anúncios do Adsense que em uma nova página se renovam e podem interessar o leitor a clicar. Mas esse que vos apresento hoje é diferente, ele abre na própria janela aberta apenas esticando o post ao exibir o restante do conteúdo. Faça você mesmo o teste aqui e ao clicar em Continue Lendo... poderá pegar o código desse hack.

Continue Lendo...

Para habilitar o hack no seu blog, vá em Configurações >> Formatação e desça toda a página. Em Modelo de Postagem, cole o seguinte código:

<p>Resumo do post</p><a href='javascript:void(0);' onclick='return verocultar(this);'>Leia Mais...</a><div style='display: none;'><p>Resto do Post</p></div>

Salve a modificação. Toda vez que você iniciar uma nova postagem, o código aparecerá (no modo HTML) e basta que você coloque o resumo e o restante do post onde está indicado em Azul. Cuidado para não apagar nenhum <p> .Você pode, inclusive, modificar o link (Leia Mais...) ao seu gosto, com outras palavras e até imagens.

Agora vá em Editar HTML e antes de </head> cole o seguinte código:

    <script type='text/JavaScript'>
    function verocultar(cual) {
    var c=cual.nextSibling;
    if(c.style.display==&#39;none&#39;) {
    c.style.display=&#39;block&#39;;
    } else {
    c.style.display=&#39;none&#39;;
    }
    return false;
    }
    </script>

Salve a modificação.

Obs: é possível que apareça um espaço grande entre o resumo e o restante do post. Para evitá-lo, tente deixar o texto unido ao código, sem pular linhas.