Como adicionar no blog marcadores em colunas

Nesse tutorial vou mostrar como adicionar no blog marcadores  colunas, em forma de lista para blogger.

Foi criado 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 ABAIXO   que vou disponibilizar dentro de um gadget javascript no local desejado em seu blog.

CODIGO:

 

<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/AVvXsEjd6K6jEOVPs4_Ba-wkJPi1P0_2DdR-Td8oGGhufNoOwbt3yguS4qYe6YrgMGVrPzsOnaCqfvKwM5TnYeKKMxUZF1Va-b9Rjjx6v29Wmcei2k0hTUPvSdWCuCIk6s2ef9CgHEunxS3u5Jc/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/AVvXsEjd6K6jEOVPs4_Ba-wkJPi1P0_2DdR-Td8oGGhufNoOwbt3yguS4qYe6YrgMGVrPzsOnaCqfvKwM5TnYeKKMxUZF1Va-b9Rjjx6v29Wmcei2k0hTUPvSdWCuCIk6s2ef9CgHEunxS3u5Jc/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> <br /> <div id="Meublogdicas_box_menu"> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">WordPress</a> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Comentários </a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Gadgets</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">HTML</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Css </a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Personalização</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Efeitos</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Adsense</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=4082638419153232085#">Dicas</a></li> </li> </div>

 

EXEMPLO:    

WordPress

Comentários

Gadgets

HTML

Css

Personalização

Efeitos

Adsense

Dicas

Veja Tambem:

• como abrir um site numa nova janela
• formulário de contato para seu website com proteção anti-spam
• Códigos para desbloquear telemoveis