28 maio, 2009

Retirando os Números dos Marcadores

Marcadores MarcadoresMarcadores

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!

26 maio, 2009

Adicione aos Favoritos – Códigos para o Blogger

Favoritos

Aprenda agora como colocar Um gadget para facilitar que o leitor coloque seu blog nos favoritos dele. O detalhe é que com isso o leitor poderá escolher colocar seu blog nos favoritos de acordo com o programa que ele usa para acessar a internet, Firefox ou Internet Explorer. Muito simples, fácil e prático. Veja a baixo como proceder:

Continue Lendo...

Adicione um novo Gadget de HTML/Javascript em seu blog com o seguinte código:

 

<script language="JavaScript">
function addFav(){
var url="ENDEREÇO DO SEU BLOG";
var title="NOME DO SEU BLOG";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()"><img border="0" alt="Adicione aos Favoritos"
src="http://img5.imageshack.us/img5/7898/animation1kmt.gif"/></a>
<a href="ENDEREÇO DO SEU BLOG" onclick="window.external.AddFavorite('ENDEREÇO DO SEU BLOG','NOME DO SEU BLOG');">
<img alt="Adicione aos Favoritos" src="http://img22.imageshack.us/img22/687/animation3qqe.gif"
border="0"/> </a>

 

Em vermelho estão as partes a serem editadas, modifique de acordo com seu blog. Os dois endereços que estão no código poderão ser editados caso realmente ache necessário, são os endereços das imagens que ficarão em exibição em seu blog, então se quiser alterar a imagem é só substituir os endereços pelos de sua preferência.

24 maio, 2009

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.

artigos relacionados

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

23 maio, 2009

Comentários do Autor Destacados

COMENTE

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.