Etiquetas em duas colunas - Blogger

Neste artigo vou ensinar como por a lista de etiquetas mais bonitas e ocupando menos espaço. As etiquetas ficam assim divididas em duas colunas.

1. Procure por ]]></b:skin> e colo este código logo por cima.

.list-label-widget-content ul {
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
line-height:14px;
-moz-column-count: 2; -moz-column-gap: 10px;
-webkit-column-count: 2; -webkit-column-gap: 10px;
column-count: 2; column-gap: 10px;
}
.list-label-widget-content li a {
border-color: #4a7c9f;
background: #6aa5cf;
background: -moz-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6aa5cf),color-stop(100%,#5791bb));
background: -webkit-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -o-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -ms-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: linear-gradient(top,#6aa5cf 0,#5791bb 100%);
text-decoration: none;
padding: 8px;
text-align: center;
cursor: pointer;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
color: #fff;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 4px 10px 2px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.42);
border-width: 1px;
border-style: solid;
text-decoration: none;
position: relative;
display: inline-block;
margin: 0;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.list-label-widget-content li span {
border-color: #4a7c9f;
background: #6aa5cf;
background: -moz-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6aa5cf),color-stop(100%,#5791bb));
background: -webkit-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -o-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: -ms-linear-gradient(top,#6aa5cf 0,#5791bb 100%);
background: linear-gradient(top,#6aa5cf 0,#5791bb 100%);
text-decoration: none;
padding: 8px;
text-align: center;
cursor: pointer;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
color: #fff;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 4px 10px 2px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.42);
border-width: 1px;
border-style: solid;
text-decoration: none;
position: relative;
display: inline-block;
margin: 0;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}

2. Clique em salvar.

3. Se não estiver a widget das etiquetas já no seu blog, adicione. As etiquetas têm que estar apresentadas por lista.

Espero que tenham gostado! Comentem e até à próxima!