Conteúdo do seu blog animado via feed
Para mostrar as postagens de um blog no seu ou mostrar as próprias postagens em um animado box via feed, entre em: http://www.widgetbox.com/widget/rssscroller
Preencha o quadro que vai aparecer.
Nome: Nome de exibição do box;
Width: Largura em Pixels do box;
Height: Altura em Pixels do box;
RSS Feed URL: Link do feed do blog;
Background Color: Cor de fundo do box;
Scroll Speed: Velocidade do conteúdo do box;
Exemplo:
Depois de configurado clique em: "Get Widget".
Aparecera esse quadro na tela, escolha a figura do Blogger para colocar automaticamente no blogger, e clique depois em "Add Widget", se você não usa o blogger ou preferi adicionar manualmente, clique em "Get Code", copie o código e coloque onde desejar.E pronto!
Feed! O que é isso? Como fazer um para meu blog?
As perguntas mais freqüentes sobre feed:
O que é isso?
Como fazer um para meu blog?
Para que serve?
Primeiro vamos a definição segundo o Wikipédia:
"O termo Feed vem do verbo em inglês "alimentar". Na internet, este sistema também é conhecido como "RSS Feeds" (RDF Site Summary ou Really Simple Syndication).
Na prática, Feeds são usados para que um usuário de internet possa acompanhar os novos artigos e demais conteúdo de um site ou blog sem que precise visitar o site em si. Sempre que um novo conteúdo for publicado em determinado site, o "assinante" do feed poderá ler imediatamente."
Resumindo: Feed é um sistema que você assina em vários blogs e/ou sites, assim sempre que tiver atualização neles você ficara sabendo! Sem necessidade de visitar o site ou o blog para ver se tem alguma matéria que esteja afim de ler.
Como assinar?
Procure na página pelo ícone:
ou algo do tipo. Clique sobre e assine da forma que quiser (e-mail, navegador e outros).Como colocar no seu blog?
Entre no site: Feed Burner, clique em Register, lá em cima do menu. Faça o cadastro normalmente.
Depois faça login.
Onde está escrito: "Burn a feed right this instant. Type your blog or feed address here", digite o link do seu blog, clique em "Next>>".
Preencha como achar melhor o link para o seu feed: "Feed Address". Agora clique em "Activate Feed", após isso clique em "Next>>" novamente, vai aparecer com várias opções, simples, marca todas! E clique novamente em "Next>>".
E pronto! O feed do seu blog está feito! Para assinar basta abrir o link do feed de acordo com que você ativou.
Exemplo:
The PS2 Games(link feed): http://feeds.feedburner.com/theps2games
Designer Brasil(link feed): http://feeds.feedburner.com/designerbrasil
Para analisar quantos assinantes tem seu blog ou você faz login no Feed Burner e olha ou coloque um contador igual o do Códigos Blog no seu blog!
Como?
Clique sobre "Publicize" no painel do seu feed, depois em "FeedCount", configure como quiser e coloque no layout do seu blog.
Agora explore as utilidades desse recurso!
Espero que ajude! Dúvidas? Entre em contato!
Haloscan
Para se cadastrar, acesse: Haloscan
- Depois de ter efetuado seu cadastro, clique em Install, selecione Blogger/Blogspot (New Version) - se você está usando a nova versão do blogger, óbviamente. Na mesma página, deixe marcado o sistema de trackback ou desmarque, se não lhe interessar (sugiro que deixe marcado, pois é uma excelente maneira de divulgação do seu blog). Clique em Next.
- Você pode conferir o vídeo que explica passo-a-passo como fazer a instalação do Haloscan no seu blog. Basicamente é isto:
Depois de instalar o Haloscan, vá em Setting para fazer suas configurações e em Template para escolher um modelo e uma imagem para o formulário de comentários.(Sobre a imagem: crie uma imagem de até 400x400 e hospede em algum site, depois copie o endereço da imagem e coloque no local indicado por URL of your Image:)
Em tempo: A mudança faz perder todos os comentários que já existiam no blog!
Colocando margem nos widgets do blogger
Para que as widgets (Elementos de Página) que você insere no seu blog não fiquem coladas às bordas, procure este trecho do código (baseado no Mínima, em outros templates existem pequenas variações):
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:10px;
padding:0px;
}
Basta mudar o valor da margin que lá está para esta que coloquei, 10px. Se você preferir maior ou menor distância da borda, altere este valor.
Inserindo bordas arredondadas nas colunas
Não quero desanimar, mas já vou avisando que dá um trabalho danado, viu? Estou devendo este tuto faz um tempo justamente por que sei que não é nada fácil colocar bordas arredondadas (também não é coisa prá se arrancar os cabelos....) e tenho medo do que virá...rsrs. Quando ensinei a colocar uma terceira coluna no blog, achei que estava facilitando a vida do povo, mas recebí TANTO e-mail, acabei ajeitando TANTO template, que tenho medo...
. Não que eu tenha má vontade gente, por favor, mas é que eu ando mesmo, ultimamente, sem muito tempo para me dedicar a este blog e aos outros tantos filhos (vou contar pela centésima vez: eu tenho 26 blogs!), que dirá tempo para ajeitar templates. É por isso que eu já ensino a pescar...Por isso, meus amores, sem mágoas, mas vou adiantando que a titia vai ensinar tin-tin por tin-tin, mas depois é fé em Deus e cada um por sí, ok?
Também quero dizer que vou explicar o MEU método, que aprendí na marra, xeretando os templates do blogger. Deve ter por aí milhões de tutos explicando de maneiras diferentes, mas eu não lí nenhum e posso até estar fazendo do jeito mais difícil, não sei...
Chega de preâmbulos, vamos ao que interessa.
Vá no seu blog e clique em Editar HTML. Procure no código do seu template este trecho:
/* Sidebar Content
----------------------------------------------- */
COLOQUE O CÓDIGO AQUI
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align: center;
margin: 15px;
}
Pode não estar idêntico ao meu mas o título é o mesmo. Ok, acima de tudo que estiver por lá, onde eu sinalizei com a frase em vermelho, você deve colar estre trecho:
#sidebarbottom-wrap1 {
background:url("endereço da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding-top:10px;
}
#sidebarbottom-wrap2 {
background:url("endereço da imagem do bottom da coluna") no-repeat left bottom;
margin:0 0 px;
padding-bottom: 10px;
}
Tá, agora esquece esta parte por enquanto. Note bem: não delete nada, só acrescente o código, ok?
Salve o template. Se você visualizar, não terá mudado nada (não insira ainda nenhum endereço de imagem onde está indicado, por enquanto). Agora desmarque onde está Expandir Modelo de Widget (se estiver marcado) e encontre este trecho do código e insira o que está em vermelho:
<div id='sidebar-wrapper'>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>
Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).
Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.
Veja a imagem (clique nela para expandir):
Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:
Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:
Agora inverta a imagem Verticalmente e salve como bottom.jpg:
Bom, agora hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que esteja tudo fora de lugar e aí é que vem a dor de cabeça. Eu mesma não encontrei a receita mágica prá dar certo de primeira. Quando não dá, vou alterando os valores que estão em padding e margin até dar certo. Prá isso não tenho uma resposta pronta, eu mesmo apanho sempre. Por que? Porque a visualização no Firefox, geralmente, é perfeita de primeira, mas a porcaria (é, porcaria...) do Internet Explore tem a mania de acabar com a minha festa. Ou seja, tá lindo em um e tudo torto no outro. Prá conciliar ambos, leva uns bons minutos.
Gente, é isso. É muito simples, é mais uma enganação para os olhos. A imagem tá lá e não se vê por que ela tem a mesma cor do fundo. Se você cismar de mudar o background da página depois, tem que mudar as imagens. Não se esqueça de trocar a cor da sidebar pela cor que vc escolheu e colocou na imagem. Se você quiser preencher tudo com uma pattern por exemplo, é a mesma coisa, só que vai ter que ir lá no código da coluna da sidebar e colocar:
background: url('endereço da imagem do corpo da sidebar') repeat;
A imagem do 'corpo' da coluna óbviamente tem que ser a mesma que preenche as bordas, ok? Corte uma 'fatia fina' da pattern (ou imagem) que usou para as bordas, salve, hospede e coloque onde eu indiquei aí em cima.
Dúvidas nesta parte (onde tá esse código da coluna?) é só dar uma espiadinha no post sobre alterações nas colunas do template.
Sabia que ia sair um livro. Espero que tenham entendido, por que eu me acho a pessoa mais confusa do mundo prá explicar. Boa sorte à todos.
Aumentar largura das colunas
Para aumentar a largura das colunas do template:
Procure no código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 5px;
width: 550px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-right: 0px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Tudo o que está contido em #main-wrapper se refer a coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.
Tudo o que está contido em #sidebar-wrapper se refere a coluna lateral do template (no caso de um template com uma coluna em cada lateral, aparecerá duas vezes). Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
margin-left: 5px;
width: 550px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-right: 0px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Tudo o que está contido em #main-wrapper se refer a coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.
Tudo o que está contido em #sidebar-wrapper se refere a coluna lateral do template (no caso de um template com uma coluna em cada lateral, aparecerá duas vezes). Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
Adicionando coluna ao template
Segundo o Google Analytics, o post sobre Adicionar Coluna no Template é disparado o mais procurado aqui no blog. No entanto, é o que mais gera dúvidas também, campeão de comentários (publicados ou não) e de insucessos nas tentativas dos leitores blogueiros. Por isso, vou postar mais uma vez sobre o assunto, esperando ser tão clara quanto possível, para que não restem dúvidas nem dificuldades, ok?
Vamos lá.
Quando postei pela primeira vez sobre o assunto, eu me baseei nos meus próprios templates e na disposição dos códigos encontrados neles. Mas acontece que uma porção de leitores que usam outros modelos de templates se viram perdidos com a sequência que mostrei. Não tem como eu analisar todo tipo de templates por aí, então o que vou fazer é mostrar o Mínima do Blogger (que é o que uso como base para os meus) e ensinar a inserir uma coluna extra nele. A novidade aqui é que vou ensinar tres tipos de posicionamento da nova coluna: sidebar-main-sidebar; main-sidebar-sidebar e main- sidebar sobre sidebar. (sidebar=coluna do perfil, main=coluna do post).
Sidebar - Main - Sidebar:
*Primeiro Passo (para todos os casos)
Encontrem este trecho do código do template:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 190px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 190px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Outer-wrapper mostra a medida total que terá seu template, a largura dele. A largura das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna 'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o valor em width que está em Outer-wrapper. No Mínima, a largura é só de 660px. Se você deseja tres colunas no seu template (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie todo o trecho que se refere à Sidebar e cole abaixo do mesmo e altere o nome de Sidebar para NewSidebar, como mostrado acima, em vermelho. Note que destaquei onde está float: left; Para que uma coluna fique à direita e outra à esquerda da coluna do post (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam estar em lados opostos.
Muito bem. Agora determine as medidas que terão as colunas. Não se esqueça que o valor total não poderá ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento entre as colunas.
*Segundo Passo (para todos os casos)
Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
/<b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
< /div>
Acrescente a parte em vermelho, que se refere a coluna criada, antes de main-wrapper. Por que antes? Por que está determinado que esta coluna ficará à esquerda da coluna do post (foi determinado lá em cima, em float: left ok?), ou seja : newsidebar-main-sidebar.
Visualize e se você fez axatamente como coloquei aqui, não tem o que dar errado.
Main - Sidebar - Sidebar:
Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.
Main - Sidebar sobre Sidebar
Determine que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por exemplo: Determine o valor em width de Outer-Wrapper para 800px, para Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar) 220px. A falta de espaço obrigará uma das colunas a descerem. Mas não se esqueça de detrminar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?
É isso. Espero que ajude.
Leia também: Como alinhar as colunas e o texto no blog
Como personalizar as colunas
Você quer saber tudo sobre como personalizar a sidebar? Então chegou ao lugar certo :-)
Neste post vou detalhar todas as maneiras possíveis (que eu conheço, óbvio) de personalizar a sidebar (ou coluna do perfil, para alguns).
Primeiro quero lembrar que sempre pego o código do template Mínima (do Blogger) como base para ensinar as modificações. Templates que já foram alterados ou que são criações de outros blogs, podem apresentar algumas diferenças, por isso fique atento principalmente aos títulos que geralmente são os mesmos.
Onde encontrar o código da sidebar?
Procure por (ou algo semelhante):
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Como modificar a largura da coluna?
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Altere o valor de width (o que está em vermelho no código acima). Quanto maior o valor, mais larga será a coluna. Aqui o valor se apresenta em pixels, mas poderá ser determinado em % também. Vá alterando e visualizando por várias vezes, antes de salvar.
Como acrescentar um fundo colorido na sidebar?
acrescente a seguinte linha:
background-color: #000000;
o valor da cor aqui representada é a que equivale ao preto. A cor pode ser determinada por seu código html (como coloquei) ou por seu nome, por exemplo gray, red, black...O código todo então deverá ficar assim:
#sidebar-wrapper {
width: 220px;
background-color: #000000;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Como acrescento uma imagem ao fundo da coluna?
Para acrescentar uma imagem que deve se repetir continuamente, coloque:
background: url(endereço da imagem) repeat;
sobre este endereço da imagem, leia aqui (até o final)
para que a imagem se repita somente na horizontal:
background: url(endereço da imagem) repeat-x;
para que a imagem se repita somente na vertical:
background: url(endereço da imagem) repeat-y;
para usar uma imagem que não se repete:
background: url(endereço da imagem) no-repeat;
e ainda, para usar uma imagem que não se repete na vertical e manter o restante do fundo de uma cor determinada (como após uma imagem gradiente) use:
background: #7E7E7E url(http://i26.tinypic.com/2z9lkzk.jpg) repeat-x;
ou seja, criei uma imagem de 20X150 para que se repita horizontalmente (preenchendo a largura real da coluna). Para que haja continuação da cor do final do gradiente, copio o valor desta última cor que se apresenta e coloco antes do endereço da imagem.
Veja como:
e a imagem já colocada na sidebar:
Como personalizar os títulos na Sidebar?
No template Mínima não existe o trecho referente aos títulos da Sidebar, então, se você está usando este template, crie o código, caso contrário, se estiver usando um template cujos títulos deseja modificar, procure por:
.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}
Para colocar cor ou imagem no fundo dos títulos, segue as mesmas fórmulas para o background da coluna, descritos acima.
Para centralizar o título use:
text-align: center;
para alinhar à esquerda:
text-align: left;
padding cria um espaço entre as letras e os limites determinados para o título e se apresentam
no sentido horário:
padding:8px 5px 3px 15px;
8px: espaçamento do título para o topo
5px: espaçamento do título para a direita
3px: espaçamento do título para a base
15px: espaçamento do título para à esquerda.
Vá testando os valores e visualizando, até que fique do seu agrado.
Para estabelecer uma fonte diferente no título, leia aqui
Como separar as widgets na Sidebar?
Para separar as widgets da sidebar procure por (se já não estiver separada no seu template):
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Separe desta maneira:
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
sendo que o que está em azul refere-se a Sidebar (esqueça o outro trecho por enquanto).
Para que as widgtes fiquem distintamente separadas, como nesta imagem:
deixe o código assim:
.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #CFC6AF; (aqui coloque o valor da cor escolhida)
border: 2px solid #34201F; (aqui o valor da cor da borda)
}
Óbviamente, para que haja contraste entre o background das widgets e da coluna toda, os valores (cores) escolhidos devem ser diferentes.
Veja que aqui, tanto para margin quanto para padding os valores correspondem aos quatro cantos em sentido horário, como explicado acima
margin: 0px 0px 20px 0px;
margin: topo, direito, base, esquerdo
uma margem de 20px na base garante o afastamento de uma widget da outra.
Edit: à pedidos....
Como colocar uma linha sob os links da Sidebar
Procure por :
.sidebar li{
e acrescente:
border-bottom: 1px dotted $bordercolor;
Para colocar bullets ou ícones antes do link, leia aqui
Se tiverem outras dúvidas, deixem nos comentários que vou acrescentando.
E é isso :-)
Programe suas postagens
Agora já é possível programar as suas postagens no Blogger. Basta fazer o login através do Blogger in draft e, depois de ter escrito seu post, clicar no link Opções de Postagens, colocar a data e o horário em que a postagem deve ser publicada e pronto: seu post será publicado na data estipulada automaticamente. Este recurso é excelente para quando surge a necessidade de ficar afastado da Internet por um tempo, mas não se deseja deixar de postar.
Lembrando que o Blogger in draft é um 'rascunho', um laboratório do Blogger onde estão sendo testados novas widgets e recursos. Para programar suas postagens ainda é necessário fazer o Login através dele.
Tradutor no blog
Para colocar um tradutor no seu blog, como o que eu tenho aqui, copie o código abaixo, vá em Modelo->Inserir Elemento de Página-> e escolha HTML/JavaScript e cole o código, salvando.
<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="PT" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Português - Inglês
<option value="FR"/>Português - Francês
<option value="DE"/>Português - Alemão
<option value="IT"/>Português - Italiano
<option value="PT"/>Português - Português
<option value="RU"/>Português - Russo
<option value="ES"/>Português - Espanhol
</select>
<input value="http://ENDEREÇO DO SE BLOG.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduza" type="submit"/>
</form>
A imagem está hospedada no TinyPic, mas é sempre bom guardar uma cópia no seu computador.
É isso.
Divulgado o blog com o FeedBurner
Passeando pelo blog do Helio Jenné (Um Lobo na Estrada do Rock), encontrei por lá banners muito interessantes que mostram os últimos posts de seus outros blogs e que permitem que assinemos os feeds dos mesmos. Curiosa como sou, entrei em contato com ele, que muito gentilmente me explicou como criar e instalar o banner no blog. O resultado vocês podem ver aqui na coluna lateral, onde estão sendo mostrados os nomes dos posts do blog Só Curiosidades.
Para você que tem mais de um blog, é um método muito interessante de divulgação, pois permite que você faça os leitores de um blog conhecer o conteúdo de outro, além de permitir que outros blogs exibam o banner do seu feed (bastando clicar no link Grab this Headline Animator, sob o banner) Para criar um é preciso primeiro queimar seu feed com o FeedBurner. Depois de ter feito isso, clique na aba Meus Feeds e clique no feed que deseja divulgar. Clique em Publicize e em Headline Animator, onde você criará o seu banner, podendo escolher a cor do background e das letras, tamanho da fonte e do próprio banner, além do formato da data. Para tornar o banner ainda mais atraente, você tem a opção de subir uma imagem do seu computador, que esteja associada ao blog que está divulgando. Feito isso, clique em Active, escolha a opção Blogger blog->Add to Blog e será feita a instalação da widget no blog que você escolher.
Lembre-se de quando queimar seu feed, colocar o novo endereço na aba Site Feed do seu blog, para que o redirecionamento do conteúdo seja feito pelo Blogger.
Blog Draft
No Blogger Draft (blog onde se encontram os novos projetos do Blogger), você poderá conhecer e testar widgets (ou Elementos de Página) que o Google pretende incorporar no futuro. Para ter acesso, faça o login através da página draft.blogger.com, clique em Modelo, Adicionar Elemento de Página e confira as novidades.
Alinhando as colunas e o texto no blog
Eu ensinei como adicionar coluna nos templates, mas acho que me esquecí de um detalhe importante que é o alinhamento das colunas, ou seja, os espaços entres elas. O que tá acontecendo é que vejo muito blog onde uma coluna foi adicionada, mas ela acaba ficando grudada na coluna do post, o que é bem feinho. Então vou ensinar a alinharem direitinho, não só a coluna, como os textos.
Vou usar, novamente, o Template Mínima (do Blogger), como exemplo. Um template deste você irá encontrar assim:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Recapitulando, que nunca é demais: Outer-wrapper é a largura total do template, por isso, ao acrescentar uma coluna, você deve somar os valores da largura de todas as colunas e o valor total não pode ultrapassar o valor da Outer-Wrapper (width= largura). Aqui, por padrão, a largura total é só de 660px e para inserir uma nova coluna tem que aumentar este valor, ou a coluna desce.Vamos aumentar para 850px e inserir uma nova coluna de 200px. Vai ficar assim:
410px (main) + 220px (sidebar) + 200px (newsidebar) = 830px
Ficando uma sobra de 20px. Inserindo a coluna, não esqueça de posicionar ela direitinho (float) e tenham atenção para que, quando se insere uma nova coluna, ela está vazia (não tem elementos de página), portanto, quando você visualizar não vai ver nada e a coluna do post vai tomar o lugar dela. Explicando melhor: você tem um Mínima e colocou uma nova coluna com float: left; mas visualizou e o que estava à esquerda era a coluna do post. Salve, vá em Modelo e você verá a coluna lá. Coloque algum elemento de página e pronto, a sidebar aparece e a coluna do post vai para o centro da página.
Mas voltando...No meu exemplo ficou uma sobra de 20px e a coluna nova que inserí à esquerda, ficou colada na coluna do post:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
border: 1px solid $bordercolor;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 200px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Veja a imagem correspondente (clique para ampliar):
Veja que só inserindo coluna sem determinar margin, a nova coluna e a coluna do post ficaram grudadas. Vamos arrumar isto:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
margin-left: 7px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 210px;
margin-right: 5px;
border: 1px solid $bordercolor;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 200px;
margin-left: 5px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Veja o que eu fiz: empurrei as duas colunas laterais a uma distância de 5px das margens e coloquei uma margem de 7px da coluna do post para a esquerda. O que aconteceu? Uma das colunas desceu, por que extrapolei a conta: 5px+5px+7px= 17px. Aí você me diz, mas não era uma folga de 20 px? Era, se eu não estivesse usando bordas. Veja que todas as colunas tem 1px de borda, 1px cada lado=2px e somando as tres colunas=8px a mais na nossa conta. O que eu fiz? Repare que neste ultimo código a sidebar está agora com 210px e não mais com 220px como antes. Ficou assim:
Problema de coluna resolvido e sem massagem... (não resistí
)Agora vamos para o texto. Você vê na imagem que o texto está grudado nas bordas por que os templates do Blogger, principalmente o Mínima, não tem margem nenhuma nas colunas, Então vamos colocar. Primeiro o do post. Encontre este código:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
A parte em azul está relacionada a data do post, a parte em vermelho ao post em sí e a verde, ao título, antes e depois que se passa o mouse sobre ele.
Em post, vamos apagar a margin que está lá e colocar:
margin: 10px;
Faça o mesmo para a data.
Agora procure este trecho, que se refere as colunas sidebar e newsidebar:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.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;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
onde estiver escrito margin, apague os valores e coloque 5px (10px aqui pode estreitar muito a coluna). O resultado até agora é esse:
Bem melhor, né? Mas olha como o título do blog está estreito em proporção ao template novo...Vamos arrumar isto também!
Suba a página (do código do seu template, claro) e encontre este trecho:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Modifique o valor de width para um que corresponda à medida nova do template. No meu exemplo eu coloquei 840px;. Ficou assim:
Bem melhor do que no começo, não?
É isso. Espero ter sido bem clara, por que eu sempre acho muito mais fácil aprender do que ensinar, então, espero que comentem e digam se entenderam ou não. Este é o meu post 101 e estou muito contente que este blogue tenham sobrevivido e conseguido ajudar alguns blogueiros. Estou preparando um outro post com novas dicas.
Como inserir marcador e outras coisas
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 < style="font-family:arial;">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:
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:
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.
Mudar a imagem do topo
Antes de tentar qualquer modificação no seu template, lembre-se de salvar o modelo atual antes. Carregue em visualizar tantas vezes forem necessárias antes de salvar as modificações.
Modificar a imagem do topo novo blogger
Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira pode ser vista neste vídeo AQUI.
Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure HEADER. Se você baixou um template daqui, provavelmente encontrará o endereço de uma imagem e suas medidas. Vai estar mais ou menos assim:
Em header-wrapper está a medida total do cabeçalho. Você pode definir aqui uma distância entre Header e as colunas abaixo aumentando o valor de height além do tamanho da imagem que pretende utilizar.
Logo abaixo você encontra #header onde você deverá colocar o endereço da imagem (link) e especificar width e height ( largura e altura) . Hospede sua imagem em algum site (ImageShack, Photobucket, etc) e copie o endereço da imagem, colocando entre os parênteses, como mostra o exemplo. Center, centraliza a imagem. Se deseja que a imagem fique à esquerda, substitua center por left e, direita, por right.
Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;
Onde border determina que é em toda volta da imagem, 1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.
Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;
Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;
Borda à direita da imagem:
border-right: 1px solid #000000;
Borda no "pé" da imagem:
border-bottom:1px solid #000000;
Lembrando que, para colocar borda nos quatro cantos da imagem, basta escrever:
border:1 px solid #000000;
Tipos de borda:
dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma
Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(endereço da imagem) no-repeat left;
onde #FFFFFF é a cor da fundo do topo, e left é onde a imagem ficará (à esquerda). Se for à direita, coloque right e se for no centro, center.
Background: url(endereço da imagem) ____ repeat;
O traço representa apenas o espaço necessário entre o endereço e repeat.
Colocar outro elemento no topo da página
Você pode dividir o espaço do cabeçalho com outro elemento se desejar, por exemplo, feed ou um banner. Para isso, basta diminuir a largura de #header e estipular uma margem à esquerda de 5px. (ou 0px se preferir). Para isso, antes de tudo, é necessário consultar a largura (width) de #Outer-wrapper, que é a DIV que engloba todos os outros elementos da página (header, main, sidebar, footer). Se Outer-Wrapper tem width:800px; a soma do elemento #header mais o novo elemento a ser inserido ao lado não pode ultrapassar este valor.
Ex:
#header{
width: 600px;
height: 140px;
margin: 10px 5px 10px 5px;}
O que fiz foi diminuir a largura de header (para dar espaço ao novo elemento que deverá se encaixar no topo à direita) e estipular uma margem de 10px para o topo da página, 5px para a direita, 10px para baixo e 5px para a esquerda. Tendo feito header recuar para a esquerda, posso inserir um novo elemento à sua direita, no espaço restante:
feed{
width: 150px;
height: 80px;
background: url(imagem do feed) no-repeat;
margin: 0 auto 0px;}
Não se esqueça de criar no HTML uma div feed, assim:
<div id="feed"><a href="endereço do feed"><span>Feed on Me</span></a></div>
Este é só um exemplo, você pode criar outras divs que desejar.
Modificar a imagem do topo novo blogger
Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira pode ser vista neste vídeo AQUI.
Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure HEADER. Se você baixou um template daqui, provavelmente encontrará o endereço de uma imagem e suas medidas. Vai estar mais ou menos assim:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:750px;
height:120px;
margin:0 auto 0px;
}
#header {
margin: 0px;
width:750px;
height:100px;
background: url('url da imagem') center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;
}
-----------------------------------------------
*/
#header-wrapper {
width:750px;
height:120px;
margin:0 auto 0px;
}
#header {
margin: 0px;
width:750px;
height:100px;
background: url('url da imagem') center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;
}
Em header-wrapper está a medida total do cabeçalho. Você pode definir aqui uma distância entre Header e as colunas abaixo aumentando o valor de height além do tamanho da imagem que pretende utilizar.
Logo abaixo você encontra #header onde você deverá colocar o endereço da imagem (link) e especificar width e height ( largura e altura) . Hospede sua imagem em algum site (ImageShack, Photobucket, etc) e copie o endereço da imagem, colocando entre os parênteses, como mostra o exemplo. Center, centraliza a imagem. Se deseja que a imagem fique à esquerda, substitua center por left e, direita, por right.
Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;
Onde border determina que é em toda volta da imagem, 1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.
Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;
Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;
Borda à direita da imagem:
border-right: 1px solid #000000;
Borda no "pé" da imagem:
border-bottom:1px solid #000000;
Lembrando que, para colocar borda nos quatro cantos da imagem, basta escrever:
border:1 px solid #000000;
Tipos de borda:
dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma
Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(endereço da imagem) no-repeat left;
onde #FFFFFF é a cor da fundo do topo, e left é onde a imagem ficará (à esquerda). Se for à direita, coloque right e se for no centro, center.
- Para que o navegador Internet Explore interprete corretamente o código, é preciso sempre dar um bom espaço entre o endereço da imagem e o comando que vem depois:
Background: url(endereço da imagem) ____ repeat;
O traço representa apenas o espaço necessário entre o endereço e repeat.
Colocar outro elemento no topo da página
Você pode dividir o espaço do cabeçalho com outro elemento se desejar, por exemplo, feed ou um banner. Para isso, basta diminuir a largura de #header e estipular uma margem à esquerda de 5px. (ou 0px se preferir). Para isso, antes de tudo, é necessário consultar a largura (width) de #Outer-wrapper, que é a DIV que engloba todos os outros elementos da página (header, main, sidebar, footer). Se Outer-Wrapper tem width:800px; a soma do elemento #header mais o novo elemento a ser inserido ao lado não pode ultrapassar este valor.
Ex:
#header{
width: 600px;
height: 140px;
margin: 10px 5px 10px 5px;}
O que fiz foi diminuir a largura de header (para dar espaço ao novo elemento que deverá se encaixar no topo à direita) e estipular uma margem de 10px para o topo da página, 5px para a direita, 10px para baixo e 5px para a esquerda. Tendo feito header recuar para a esquerda, posso inserir um novo elemento à sua direita, no espaço restante:
feed{
width: 150px;
height: 80px;
background: url(imagem do feed) no-repeat;
margin: 0 auto 0px;}
Não se esqueça de criar no HTML uma div feed, assim:
<div id="feed"><a href="endereço do feed"><span>Feed on Me</span></a></div>
Este é só um exemplo, você pode criar outras divs que desejar.
Retiara o link - Assinar: Postagens(Atom)
Para retirar este link padrão do Blogger que fica sob as postagens, procure no código do seu template este trecho (clique em Expandir Modelo de Widget) :
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>>
Basta apagar o que está em negrito.
Widget para linkarem seu blog
Todo este preâmbulo é para contar que só agora encontrei este widget ótimo, no imperdível Blog and Web (o post é de junho, veja só...) que permite que outros blogueiros coloquem o link do seu blog automaticamente, sem precisarem copiar e colar nada, apenas clicando em um botão, como este que coloquei acima dos posts. Ao clicarem alí, automaticamente serão levados à uma página do blogger onde escolherão o blog onde desejam inserir o link e um espaço para colocar o nome do blog que se está linkando. E pronto! O link é inserido em seus elementos de página, depois é só você arrastar para onde deseja que apareça no seu blog. Muito prático, eu achei.Eu fico tanto tempo (o pouco que tenho, diga-se de passagem) diante do pc fazendo experiência com templates que 'passeio' pouco por blogs e sites (o que é realmente uma pena). Então, quando alguma coisa é novidade para mim, já é notícia do século passado para outros. Mas, enfim, como diariamente uma multidão de novos blogs aparece, qualquer coisa sempre será novidade para mais alguém também.
Você pode colocar o texto que desejar no botão. Para inserir o código do widget, vá em Modelo->Adicionar Elemento de Página e escolha HTML/JavaScript e cole o código abaixo:
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input value="" name="widget.title" type="hidden">
<textarea style="display: none;" name="widget.content">
<!-- Código del enlace -->
<a href="http://endereçodoseublog.blogspot.com">Nome do seu Blog</a>
</textarea>
<input value="Texto que quer que apareça no botão" name="go" type="submit">
<input name="infoUrl" value="http://blogandweb.com/2007/06/06/como-crear-un-widget-para-que-agreguen-un-enlace-a-tu-blog/" type="hidden">
</form>
Note: tudo o que está em negrito deve ser editado por você antes.
Colocando Bullet
Vocês devem ter notado na barra lateral, à esquerda dos titulos das dicas deste blog, uns marcadores redondinhos de cor amarelada. Para inserir este marcadores, procure no codigo do seu template a parte intitulada Sidebar Content, neste 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(COLOQUE AQUI O ENDEREÇO DA IMAGEM );
vertical-align: top;
padding: 0;
margin-left: 15px;
}
Se você desejar usar um bullet como marcador, vá até este site, escolha um de sua preferência, hospede a imagem e coloque o endereço da mesma entre os parênteses. Se não desejar usar imagem, apague o trecho destacado e vai ficar como o meu (um círculo sólido) e 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;
Assinar:
Comentários (Atom)
