[Tutorial] Gadget de Categorias

 http://weheartit.com/entry/57585343

Hey! Uma vez me pediram um tutorial de como fazer aquele gadget de categorias ali igual do blog. Demorei muito, mas finalmente trouxe o tutorial que é bem rápido e fácil. Peço desculpas também pela minha falta de posts esses dias, mas eu estou sem ideias mesmo do que postar, isso não passou ainda. Mas vamos ao tutorial!

Esse código é o mesmo que o do MadlyLuv, só que um pouquinho editado. ~eu acho, não lembro bem pois já faz tempo que mexi nisso.

Exemplo:

Vá até Modelo >> Editar HTML >> Dê Ctrl+F e procure por ]]></b:skin> antes dessa tag cole o seguinte código:

.madmenu {
display : block;
text-align: center;
text-indent: 5px;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
font-family: arial;
letter-spacing: 0;
border-bottom: 1px solid #E8D8D8;
background-repeat: no-repeat;
vertical-align: middle;
line-height: 18px;
margin-bottom: 1px;
padding-left : 10px;
}
.madmenu:hover {
display: block;
text-decoration: none;
vertical-align: middle;
line-height: 18px;
border-bottom: 1px solid #E8D8D8;
padding-left: 10px;
}

Altere como preferir e salve. Depois disso vá até Layout, adicione um gadget HTML/Javascript e dentro cole o código abaixo:

<div style="float: left; width: 44%">
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
</div>

<div style="float: right; width: 56%">
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
<a href="link_aqui" class="madmenu">Tag</a>
</div>
<div style="clear: both"></div>

Link_aqui: é aonde você vai colocar o link da categoria do seu blog.
Tag: altere para o nome da categoria escolhida.

Salve e pronto! (:
O que acham desse tutorial?