Esta semana recebi um e-mail me perguntando como estilizei a Sidebar com uma imagem nos links. Não sou de ficar passando código pronto, mas abrirei uma exceção está semana (e talvez nas próximas também) e colocarei o código aqui e como fazer.
Você precisará de uma imagem de seu agrado para estilização e realizar as seguintes tarefas:
O que o código faz:
No segundo trecho do código, os comandos que merecem explicação:
Marcadores nos Post
Muito simples! Procure a classe .post e copie este código:
.post ul{margin:0; padding:0; list-style:none;}
.post li{background: url(http://ondeestasuaimagem.jpg) no-repeat 15px 5px; padding-left:15px;}
Salve e veja o resultado. Nas postagem quando criar uma lista <ul><li></li></ul>, terá a estilização realizada.
Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email
Você precisará de uma imagem de seu agrado para estilização e realizar as seguintes tarefas:
- Vá no painel de seu Blog/blospot em Layout/ Editar HTML e procure no código o trecho, dentro da CSS(folha de estilo), a classe
.sidebar e cole este código:
.sidebar ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-left:20px;
padding-bottom:.25em;
line-height:1.5em;
background: url(http://suaimagem.jpg) no-repeat 0 50%;
}
O que o código faz:
- .sidebar ul é como a maioria dos Widgets são criados no Blog/Blogspot (exceção dos Marcadores).
- list-style:none; retira a marcação originais dos links.
- Zeramos todas as margens e preenchimentos em margin:0; e padding:0;
No segundo trecho do código, os comandos que merecem explicação:
- padding-left:20px; - aqui estou dando um preenchimento do lado esquerdo dos links para minha imagem (que é de tamanho de 16px), caber, e ainda sobrar 4px de espaço entre ela e o link.
- Como estipulei um padding-bottom, quero que meus link fiquem centralizados na linha então aplico a regra line-height:1,5em;
- background: é a chamada da imagem hospedada no servidor. Repare que se os seus links tiverem mais de uma linha, os marcadores ficaram no meio dos links pela configuração do trecho no-repeat 0 50%;. Para controlar a posição dos marcadores você pode trabalhar com pixel ao invés de porcentagens
Marcadores nos Post
Muito simples! Procure a classe .post e copie este código:
.post ul{margin:0; padding:0; list-style:none;}
.post li{background: url(http://ondeestasuaimagem.jpg) no-repeat 15px 5px; padding-left:15px;}
Salve e veja o resultado. Nas postagem quando criar uma lista <ul><li></li></ul>, terá a estilização realizada.
Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email
Marcelo R. Souza
2 comentários:
Não sou de ficar passando código pronto,
Eu sei que não é bom ter todo o trabalho e chega uma gracinha e quer tudo mastigado,rs, eu sou uma dessas gracinhas, e em minha defesa eu digo que não sei nada de html. mas, ai você diz, porque não estuda? Porque não tenho tempo, porque até há pouco mais de um ano eu era analfabeta virtual, literalmente, e não é brincadeira,e passei dessa condição , para blogueira e já aprendi um monte de coisa, mas é informação demais para a minha pobre cabeça,rs.
Por que eu estou dizendo isso? Não sou muito de pedir,mas se um dia pedir, depois disso você não terá como me negar o pedido,rs.
beijos
@lugirão...
Como disse no artigo, não sou muito de dar códigos mastigadinhos. Gosto de ensinar conceitos, porém vou começar abrir algumas exceções para que os usuários coloquem em práticas algumas coisas que são básicas no CSS.
Quando me pedem com jeitinho, (e tem que ter jeitinho mesmo) quem sou eu para dizer não?
Beijos
Postar um comentário
Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>
Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa