Retirar marcadores dos posts

Algumas pessoas me perguntam como manter a lista de marcadores na sidebar sem que os mesmos apareçam nos finais das postagens.

 

Para isso, vá em Editar HTML, clique em Expandir Modelo de Widget, procure  e apague todo o trecho abaixo:

<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>
</b:loop>
</b:if>
</span>

Feito isso, clique em Visualizar e se tudo estiver ok, clique em Salvar.
A lista de Marcadores continuará aparecendo na coluna lateral (sidebar), porém, não mais aparecerá  abaixo das postagens.

Leia Mais

Mostrar os Marcadores e Arquivos como listas

Por padrão, quando se clica em um Marcador ou mês do arquivo no Blogger, ele exibe todos os posts  relacionados completos, o que acredito que não ajuda muito na busca do leitor, principalmente se você tem muitos posts em uma categoria/mês. Porém é possível determinar que, clicando em um marcador ou mês do arquivo, surjam apenas os títulos dos posts, ordenados cronologicamente (faça um teste e clique em qualquer marcador aqui do TNB). Eu já expliquei como fazer isso no post Melhorando a apresentação dos marcadores e arquivos  mas o que não expliquei ainda é como dar estilo à lista, nem como retirar a data que aparece ao lado do título.

Conforme o tutorial, deve-se substituir <b:include data='post' name='post'> por:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Mas, para que seja possível dar estilo à lista de títulos, ao invés de substituir pelo código acima, substitua por:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a>
</li></ul>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Agora para dar estilo à lista, acrescente no CSS (acima da tag ]]></b:skin>):

#titulos{ /*estilo para o espaço ocupado pela lista */
margin:6px 0px;
background:#fff;
padding:6px;
border:1px solid #e3e2e3}

#titulos ul{ /*estilo da lista */
margin:0px;
list-style-type:none;
background:#eeeded;
padding:3px;}

#titulos li{ /* estilo para cada item da lista */
background: #fff ;
padding:15px 0px 3px 40px;
font-weight:bold}

Para que a data não apareça nestas listas, procure pelo código da data dos posts, que é:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

e substitua por:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>

<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

O que fazemos é colocar a data em uma condicional para a home e não sendo a página home, que apareça nas páginas internas (o que exclui as páginas de arquivos e marcadores).

Leia Mais

Adicionar ou remover marcadores

Normalmente, ao terminar de escrever seu post, você o classifica em uma categoria (marcador) para facilitar a busca do seu leitor. Mas e quando se deseja alterar os marcadores que já foram colocados em posts antigos? Muito simples: clique em Editar Postagens e uma lista com todos os seus posts aparecerá. No topo da lista, a opção de selecionar todos, ou você pode selecionar apenas alguns, bastando clicar no quadradinho à esquerda do título do artigo.

Tendo selecionado seusposts, clique no menu suspenso onde se lê Ações de Marcador. Você verá a opção Aplicar Marcador (e abaixo todos os marcadores que você já criou) e mais abaixo a opção Remover Rótulo (se você deixou algum post demarcado).

 

Suponhamos que você anteriormente criou um marcador que já não lhe interessa mais. Basta clicar em Todos (todos os posts serão demarcados) e no menu suspenso, dentro da lista de Remover Rótulo, escolher o marcador que deseja extinguir.

Leia Mais

Marcadores como lista expansível

Esta dica eu encontrei no excelente Vagabundia e vou repassar para vocês.

É possível transformar cada um dos seus marcadores em uma espécie de menu drop-down, ou seja, ao clicar em um marcador, será mostrado um determinado número de posts relacionado à ele. Testei no meu blog de receitas e o resultado pode ser conferido aqui.



1º Passo:

Vá em Ediat HTML, clique em Expandir Modelo de Widget e procure por:

<b:widget id='LabelX' locked='false' title='Título(Pode estar como Marcadores ou Labels)' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
.......
.......
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

As únicas coisas que estarão diferentes no seu código é o título que você deu ao gadget Marcadores (pode ter sido Marcadores mesmo, Labels, etc) e o número em Label (onde está LabelX).

2º Passo: Substitua tudo o que está entre <ul> e </ul> por:

<script type='text/javascript'>
// <![CDATA[
home_page = 'http://NOMEDOSEUBLOG.blogspot.com/';
max_rc_posts = 10;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/>Carregando...";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<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 dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</b:if>
</li>
</b:loop>
</ul>

Coloque o nome do seu blog onde está indicado no código. Você também pode alterar o número de postagens que serão mostradas, em max_rc_posts = 10; lembrando que quanto mais postas você determinar, maior será o tempo de carregamento da lista.
Para retirar a numeração ao lado do Marcador, como já foi ensinado aqui, apague a linha <span dir='ltr'>(<data:label.count/>)</span>
Você também podem substituir a seta que ao ser clicada expande a lista [ ► ]. Procure por ► no código e substitua por:
▼ [ ▼ ]
◄ [ ◄ ]

3º Passo: Estilo

Para dar estilo ao marcador, acrescente no CSS:
#LabelX ul { ....... }
#LabelX ul li { ....... }
#LabelX ul li a { ....... }

Não esqueça de substituir o X pelo número da Label

Para dar estilo à lista expandida, acrescente:

#showItemLabel { /* área completa da lista */ }
#showItemLabel ul { /* a lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* cada item da lista */
background-color: #343F4A;
list-style-image: url();
padding: 0 0 0 10px;
margin: 2px 0;
width: 85%;
}
#showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada link da lista */
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
color: #FFFFFF;
}

Obs: faça sempre qualquer experiência ou modificação em um blog de testes primeiro. Salve uma cópia do seu template antes de qualquer 'experiência'.

A estilização da lista requer um conhecimento básico de css que você pode aprender aqui.

Leia Mais

Hack para menu suspenso

Mais um que encontrei no Hackosphere; como transformar os Marcadores num menu suspenso. Para fazer esta mudança, será necessário mexer no código do template, por isso meus queridos, sempre, sempre antes de qualquer modificação, salvem uma cópia de seus templates ou testem antes, em blogs sem conteúdo. Visualizem várias vezes para se certificar de que está tudo ok no template, que não desapareceu nada e só então, salvem as modificações!

Para transformar a lista de Marcadores em um menu suspenso, (óbviamente você deverá primeiro já ter uma lista de Marcadores ativos em seu blog), vá no HTML do seu template, clique em Expandir Modelo de Widget e procure por este trecho do código (utilizem o ctrl+F para facilitar):

<ul>
<b:loop values="'data:labels'" var="'label'">
<li>
<b:if cond="'data:blog.url">
<data:label.name/>
<b:else/>
<a href="'data:label.url'"><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

e substitua todo ele por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Vizualize e estiver do mesmo jeito que ficou meus marcadores aí na Sidebar, salve.

Então, como sou muito xereta, pensei em usar o mesmo hack para lista de links... Às vezes temos listas enormes na sidebar, sejam de parceiros, sejam de amigos, e que acabam ocupando um espaço quilometrico. Pensei que seria muito interessante usar este mesmo recurso para listas de links e como não encontrei nada a respeito no Hackosphere, fiz umas modificações, uns testes e deu certo. Então, para transformar uma lista de links em um menu suspenso, procure por este trecho:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Substitua o que está em vermelho por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.target'><data:link.name/>
</option>
</b:loop>
</select>

Visualize e se a lista de links tiver se tornado um menu suspenso, salve. Onde está Select a label você poderá colocar o título que quiser.

É isso.

Leia Mais

Melhorando a apresentação dos marcadores e arquivos

Essa eu ví no Hachosphere e achei muito interessante. Quando se clica em um Marcador ou mesmo em um determinado mês do arquivo, por padrão o blogger mostra todas as postagens relacionadas ao mesmo, o que não é muito interessante, principalmente se você tem umas 200 postagens vinculadas à um determinado marcador ou escreve muitos posts mensalmente. Pelo menos 20 postagens aparecerão na página principal, o que carrega demais a página e não garante que seu leitor realmente encontre de pronto o que procura.

Com este hack é possível exibir uma lista com o nome de todas as postagens relacionadas ao marcador/mês do arquivo solicitado. Eu já estou usando aqui no Templates e gostei bastante (clique em um marcador para ter uma idéia), só pretendo melhorar a apresentação da lista.

Enfim, sem mais delongas: Clique em Editar HTML e em Expandir Modelo de Widget e procure por este trecho do seu código:

<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/> </h2>
</b:if>

<b:include data='post' name='post'/>

Substitua o que está em vermelho por:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Visualize (na verdade não deve aparecer nenhuma mudança no seu template, ok?) e se estiver tudo em ordem, salve. Para testar, clique em um dos seus marcadores ou mês do arquivo. A lista com o nome dos artigos relacionados deve aparecer na coluna das postagens.

É isso!

Leia Mais

Marcadores como menu horizontal

Se você não tem muitos marcadores na sua página e gostaria de dar mais destaque à eles, pode transformá-los num menu horizontal abaixo (ou acima, como quiser) do título do blog. Para isso, vamos pegar o modelo de menu horizontal que uso nos templates que faço (e que já disponibilizei aqui). Siga todos os passos. Feito isso, basta ir em Modelo->Adicionar Elemento de Página e escolher a opção Marcadores. Arraste os Marcadores para o novo espaço que surgiu sob o cabeçalho do blog e salve. Para ficar com uma estética melhor, recomendo retirar os números que aparecem indicando a quantidade de postagens relacionadas com o marcador. Para isso, siga este tutorial.

Leia Mais

Como inserir marcadores e outras questões básicas

Tenho recebido muitos e-mails com questões sobre procedimentos que são muito simples e por isso julguei (erradamente) que não havia necessidade de criar tutoriais para estas questões. A verdade é que milhares de pessoas todos os dias criam blogs e ficam perdidas na hora de executar tarefas simples, como por marcadores nas postagens ou inserir códigos no template. Então, este é um tutorial bem básico para quem começou a mexer no Blogger agora.

Colocando marcadores nas postagens.

Os marcadores são um recurso muito interessante para separar os seus posts em categorias distintas. Para colocar marcadores nas suas postagens, crie um nome para a categoria em que o seu texto se enquadra, como mostra a imagem:


Depois de separar os seus posts em categorias (por ex: música, poemas, humor, etc), vá em Modelo e clique em Adicionar Elemento de Página e escolha a opção Marcadores:


Depois de clicar em Adicionar ao blog, os marcadores aparecerão na coluna lateral e você poderá movê-los de posição (assim como qualquer elemento de página adicionado) clicando com o botão esquerdo do mouse sobre o elemento e, sem soltar, arrastar o retângulo para onde deseja que apareça o elemento (no caso Marcadores) no seu template:



Colocando códigos no template

Para inserir códigos no template vá em Modelo e selecione a opção Html/JavaScript. Na janela que se abrirá, cole o código fornecido (contador, banner, relógio, imagem, o que for) e salve. O processo para definir onde o elemento do código aparecerá no template é o mesmo para Marcadores, basta arrastar o retângulo correspondente.

Mudar os títulos dos elemento de página

Sua lista de Marcadores não precisa ter necessariamente este título (que é o padrão do Blogger) nem o seu perfil o About Me. Você pode colocar o título que desejar em qualquer elemento de página, basta apagar o título que lá esteja e colocar o que quiser:



Colocando gifs nas postagens

Muitas pessoas me perguntam por que as gifs perdem o movimento quando inseridas nas postagens. Na verdade o movimento não se perde, só não pode ser visto enquanto o post não é publicado. Depois de publicar o post, clique em Visualizar e verá que a imagem movimenta-se normalmente. Porém, é verdade que a hospedagem de imagem do Blogger pode mesmo dar problema e para evitar que se perca o movimento, basta hospedar a imagem em algum outro site, por exemplo, no Tinypic. Para isso basta fazer o upload da imagem do seu computador e copiar o link que será fornecido:



Copie o último link fornecido (está em azul), como mostra a imagem:

De posse deste link (que é o endereço da imagem), coloque este código no seu post, onde deseja que a imagem apareça:

<img src="cole aqui o link">

Você pode colar este código tanto no post quanto na coluna lateral, bastando escolher o elemento de página Html/JavaScript e colando o código alí.

Para fazer desta imagem um link, basta coloca:

<a href="endereço do site"><img src="endereço da imagem"></a>

Pronto: ao clicarem na imagem os seus leitores serão levados para outra página ou outro site.

Edit: A leitora Sagesse levantou uma questão importante: como transformar em link uma imagem que se hospedou no Blogger mesmo?
Muito simples: depois de subir a imagem (fazer o upload) pelo blogger, quando a imagem já estiver na postagem, clique sobre ela, depois clique em inserir link e coloque o endereço que deseja e pronto! Explicação visual:




Por ora é o que me lembro que as pessoas tem me perguntado nos e-mails que recebo, mas se você tiver alguma dúvida e quiser ver aqui uma explicação, é só deixar nos comentários.

abraços!

Leia Mais

Feed nos Marcadores

Insira marcadores em suas postagem e acrescente no blog a lista de Marcadores (vá em Modelo/Layout->Adicionar Elemento de Página->Marcadores). Depois procure este trecho do código no seu template (clique antes em Expandir Modelo de Widget):

<span dir='ltr'>(<data:label.count/>)</span>

Para facilitar a busca de códigos, se você usa o Firefox, quando estiver na página dos códigos, aperte as teclas Ctrl+F e na parte de baixo da tela aparecerá um espaço (localizar) onde você deve colocar o trecho do código que procura e clique em Próxima. Se você usa o IE é a mesma coisa, só qua aperecerá uma janelinha no alto da página para colocar o código.

Pois bem, depois de encontrar este trecho, acrescente logo em seguida dele:

<a href="'data:blog.homepageUrl"><img src="'http://3.bp.blogspot.com/_Zuzii37VUO4/R27EFSjZEjI/AAAAAAAACfY/j1V_YynhZsA/s1600/SynIco.png'/" /></a>

Mas Atenção!

Se você seguiu a dica de como retirar a numeração ao lado dos marcadores, não irá encontrar o trecho do código exatamente como foi colocado aqui. Então, faça a busca por:

<span dir='ltr'></span>

É isso. Seus leitores poderão assinar o feed de um assunto específico no seu blog.

Fonte: Blog and Web

Leia Mais

Retirando a numeração ao lado dos marcadores

Você gosta da numeração que aparece ao lado dos marcadores - entre parênteses assim: música(6), poemas (5),etc - apontando quantos posts estão relacionados ao assunto? Bem, eu não gosto, acho esteticamente feio e além de tudo, desnecessário. Se você pensa como eu e deseja retirar a numeração, procure no código do seu template o trecho relacionado à Marcadores (ou o nome que tenha dado à lista). Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<: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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Apague o que está em negrito, visualize e salve.

Leia Mais

Colocando imagens em listas (marcadores)

Procure este trecho:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

E acrescente logo abaixo:

.sidebar ul li {
list-style: disc url(link da imagem);
vertical-align: top;
padding: 0;
margin-left: 15px;
}

Neste site, é possível escolher bullets e setas para as listas da sidebar. Hospede a imagem e coloque o link fornecido entre os parênteses. Se não desejar usar imagem, apague o trecho destacado e ficará um círculo sólido. A cor será a mesma do título na Sidebar.

Para que o marcador da lista seja um quadrado, basta colocar:
list-style: square;

Um círculo vazio:
list-style: circle;

Outros sites com bullets e setas:
SuperTráfego
AnimadosGifs

Leia Mais