Anuncie aqui!

Personalizando os marcadores do blog


Tutorial Como Personalizar Marcadores Para Blog



Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.



Na linha
    acrescente guia rápido, é o nome que vamos usar para esse estilo, mas poderia ser qualquer outro, então fica assim:
      . Depois vá até o inicio do código do blog e crie o estilo CSS guia rápido, coloque isso junto com os outros estilos ( body, main, sidebar...) do seu blog.

      .guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 25px;padding-top: 2px;
      padding-bottom: 2px;}


      .guiarapido a:hover{font-style: italic;background-image:url(http://img18.imageshack.us/img18/7765/marcadorover.gif);background-repeat: no-repeat;
      background-position: left center}

      Os endereços são as imagens que ficaram ao lado dos marcadores, você precisará de duas assim uma somente aparece quando colocamos o mouse sobre um marcador. Para fixar a imagem do lado esquerdo e sem repetir usamos essas linhas:
      background-repeat: no-repeat;
      background-position: left center;

      A parte final: padding-left: 25px;padding-top: 2px; padding-bottom: 2px; são as margens, o valor 25 é a distancia da margem esquerda (deve ser um pouco maior que a largura da imagem) e os valores 2px são em cima e embaixo, também é necessário ajustar conforme o tamanho de imagem que você usar.

      Se quiser modificar o tipo, cor ou tamanho da letra basta colocar isso aqui nas duas partes do codigo:

      font-family: "Comic Sans MS";
      font-size: 14pt;
      color: #0000FF;

      E formatar como quiser seus marcadores, escolhendo o jeito que combine melhor com seu blog, dissemos para colocar nas duas partes do código (.guiarapido a / .guiarapido a:hover) porque assim poderá escolher cores diferentes, sugerimos não mudar o tamanho nem o tipo de letra pois isso faz ocupar espaços diferentes e o menu dos marcadores ficará “pulando” quando passar o mouse sobre ele, quero dizer subindo e descendo um pouco.



Comentários

Leia antes de comentar:

Os comentários deste blog são todos moderados;
Escreva apenas o que for referente ao tema;
Ofensas pessoais ou spam não serão aceitos;
Faça comentários relevantes;
Obrigado por sua visita e volte sempre.

Chat

Conquiste o Mundo !

 
http://1.bp.blogspot.com/-Sbjp--Gj4wg/Thivi7avZtI/AAAAAAAAAJs/X6tE7PIFoRY/s1600/22.jpg