dicas blog
Home » , , , » Como adicionar no blog marcadores em duas colunas

Como adicionar no blog marcadores em duas colunas

12
Nesse tutorial  vou  mostrar  como  adicionar  no  blog  marcadores  em  duas  colunas,   em  forma  de  lista  para blogger. esse  modelo   é  o  mesmo  que  estou   usando  aqui   no meu  blog,  e criei  através  de um  menu  lateral  subcategorias  drop down.  usando  esse  modelo  de  marcadores   manual  de  uma certa  forma  se   ganha   espaço  nos  gadgets, e   a  pagina  não  fica  tão  grande  como  nos  blogs  que  utilizam  listas,   fica  bonito  até  em  alguns  casos, mas vai  do  gosto  de cada  um. a instalação  é  bem  simples   e  a edição também   tendo  apenas   que  adicionar  o  código  que  vou  disponibilizar  dentro  de  um  gadget   javascript no  local  desejado em  seu  blog.


Primeiro    em  layout e adicione  um  novo  gadget  javascript  e adicione  o  código  abaixo  dentro  dele.

<style>

#Meublogdicas_box_menu{
    padding:0;margin:0;width:140px;float:left;margin-left:12px;list-style:none outside none}
#Meublogdicas_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#Meublogdicas_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#Meublogdicas_box_menu li a{
    background: url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;
    display: block;
    min-height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 5px 0 25px;
    text-decoration: none;
    color: #777;
    color: #fff; /*cor do  texto*/
    font-size: 14px;
    border-right: 4px solid #35322c;
    cursor: pointer;
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out
}
#Meublogdicas_box_menu li a:hover{
    border-right-color: #665d54;
    text-decoration: none;
    color: #C00; /*cor do hover*/
    background: #38332d  url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;
}
#Meublogdicas_box_menu li:hover ul, #Meublogdicas_box_menu li.over ul{display:block}

</style>

 <div id="Meublogdicas_box_menu">
   
           
    <li><a href="#">WordPress</a>
   <li><a href="#">Comentários
</a></li>
              <li><a href="#">Gadgets</a></li>
              <li><a href="#">HTML</a></li>
              <li><a href="#">Css
</a></li>
              <li><a href="#">Personalização</a></li>
              <li><a href="#">Efeitos</a></li>
              <li><a href="#">Adsense</a></li>
              <li><a href="#">Dicas
</a></li>
        </ul>

    </li>
</ul></div>


<style>

#Meublogdicas2_box_menu{
    padding:0;margin:0;width:140px;float:left;margin-left:0px;list-style:none outside none}
#Meublogdicas2_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#Meublogdicas2_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#Meublogdicas2_box_menu li a{
    background: url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;
    display: block;
    min-height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 5px 0 25px;
    text-decoration: none;
    color: #777;
    color: #FFF; /*cor do texto coluna 2*/
    font-size: 14px;
    border-right: 4px solid #35322c;
    cursor: pointer;
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out
}
#Meublogdicas2_box_menu li a:hover{
    border-right-color: #665d54;
    text-decoration: none;
    color: #C00; /*cor do  texto hover coluna 2*/
    background: #38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;
}
#Meublogdicas2_box_menu li:hover ul, #Meublogdicas2_box_menu li.over ul{display:block}

</style>

 <div id="Meublogdicas2_box_menu">
   
           
    <li><a href="#">Blogger</a>
   <li><a href="#">Facebook</a></li>
              <li><a href="#">jQuery
</a></li>
              <li><a href="#">Ganhar dinheiro
</a></li>
              <li><a href="#">Botões </a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Códigos
</a></li>
              <li><a href="#">Caixa de pesquisa</a></li>
              <li><a href="#">Caixa e-mail</a></li>
        </ul>

    </li>
</ul></div>


Tutorial Atualizado:código na caixinha abaixo para copiar!


Agora nos  locais  marcados  em  amarelo  adicione  o  nome  das   suas   categorias   e  nos  locais  marcado  em vermelho  adicione  os links destinos  de   suas categorias.

Nos  locais  marcados  em  azul  adicione  outra  imagem  se  quiser.

12 comentários:

  1. Muito Legal! Mas eu não gostei muito e vou continuar a usar os mercadores em nuvem de tags mesmo.

    Bom queria que você fizesse um tutorial ensinando a fazer Caixa Para Colocar comentários
    e como fazer aonde você passou tipo esse que está na postagem: "Home » blogger , marcadores , personalizar , tutorial » Como adicionar no blog marcadores em duas colunas"

    ResponderExcluir
    Respostas
    1. Caio isso que você esta sé referindo é automático do template, mas vou ver o que posso fazer nos próximos dias!

      Excluir
  2. Cara se você colocasse uma area de pedidos aqui ficaria bem legal.

    Gostaria de saber se tem como você ensinar a arruma um bug comum nos blogs.
    Por exemplo na página inicial do blog todas postagens ficam com o mesmo tanto de curtir, compartilhamentos , g+ cliques, só aparece o certo quando entro na postagem.
    Se você souber como resolver isso ficaria grato. Obrigado.
    Caso você não entendeu só entrar no meu blog www.humorcritico.com e ver la na page Inicial que ta tudo com a mesma quantia de likes as postagem.

    ResponderExcluir
    Respostas
    1. Dei uma olhada acho que você já resolveu me parece estar tudo bem!

      Excluir
  3. Nem resolvi cara olha na página inicial, do lado do balão de comentarios
    dos posts.
    todos post fica com o mesmo tanto de likes , tweet e g+.

    ResponderExcluir
    Respostas
    1. Não tem jeito para resolver isso você vai ter que retirar os dois sistemas de compartilhamento, e adicionar só um, ou o flutuante, ou em baixo das postagens eles então entrando em conflito.

      Excluir
  4. Mesmo tirando ele continua assim quando foi colocado o sistema que ta em baixo das postagem já fico assim , vejo isso em varios blogs, talvez seja alguma tag ou sei la que tem que por pra identificar cada postagem, na page inicial.

    ResponderExcluir
    Respostas
    1. Então isso pode ser problema dos próprios botões mesmo mas de uma procurada pelas empresa deles share no Google e tente colocar outros modelos!

      Excluir
    2. Não querendo me entrometer mais eu sei o que resolver abraao, é simples! esses códigos não podem ser colocados na pagina inicial cara! Por isso ele só aparece da pagina inteira em si entendeu? Para resolver é só colocar uns códigos. Vê a minha postagem lá eu ensino a colocar essa barra apenas nas postagens tendeu? veja ae: http://buzz-tutoriais.blogspot.com.br/2013/05/como-colocar-uma-barra-de_1.html#.UYhSk6K-q2E

      Excluir
  5. Colocar pra aparacer em apenas paginas de postagem eu sei, eu sei tbm que esse tipo de barra flutuante de compartilhamento fica bugado pq e apenas 1 barra, mais embaixo de cada postagem tem varios blogs que faz reconhecer cada postagem msmo sendo na pagina inicial.

    ResponderExcluir
  6. Sabe me dizer se tem jeito de colocar o fundo em outra cor? não quero preto por favor tem jeito? obrigada parabéns adoro seus tutoriais.

    ResponderExcluir
  7. Olá! eu consegui trocar a cor de fundo muito obrigada, parabéns adoro seus tutoriais sucesso.

    ResponderExcluir