Como colocar no blog marcadores em duas colunas

 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  vá  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTMuN1sGaHCsNosalz8aR5lQKFAW27_itQfya8-m1cNoPBEZucGPveSH4FSevoneXMLce7IASxltMFnmFbncuNCo3sJYkDcywKOiYJAl0mTHjxXKMg6UIQV4DBBHJ2IKIK1WwB-0UsO8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTMuN1sGaHCsNosalz8aR5lQKFAW27_itQfya8-m1cNoPBEZucGPveSH4FSevoneXMLce7IASxltMFnmFbncuNCo3sJYkDcywKOiYJAl0mTHjxXKMg6UIQV4DBBHJ2IKIK1WwB-0UsO8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTMuN1sGaHCsNosalz8aR5lQKFAW27_itQfya8-m1cNoPBEZucGPveSH4FSevoneXMLce7IASxltMFnmFbncuNCo3sJYkDcywKOiYJAl0mTHjxXKMg6UIQV4DBBHJ2IKIK1WwB-0UsO8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTMuN1sGaHCsNosalz8aR5lQKFAW27_itQfya8-m1cNoPBEZucGPveSH4FSevoneXMLce7IASxltMFnmFbncuNCo3sJYkDcywKOiYJAl0mTHjxXKMg6UIQV4DBBHJ2IKIK1WwB-0UsO8/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>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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.

____________________________________________________________________________

Sobre o autor: jhonatas é o fundador deste blog. Nascido em 1991, é trabalha como serviços gerais. e, nas horas vagas, si esforça como blogueiro.                           

                            Twitter l youtube l Facebook l

___________________________________________________________________