Sweet Dreams: Pedidos de Tutoriais 4 - Personalizar a Área das Tags

Oláa meus Sonhos cobertos de Açúcar =P

Bom, este é o tutorial número 4 dos pedidos, esse foi o pedido >>

Nome :Elisa Cardoso
Blog/Site :so-pra-teens.blogspot.com
Tutorial que quer que eu poste :Eu tinha uma área de tags,mas infelizmente tirei pois achava meio feia.Como eu faço pra deixar ela toda colorida e enfeitada?

A minha não é bonitinha nem enfeitada, mas vou deixa-la assim mesmo O.o
Quanto ao tuto, eu fui procurando em vários blogs/sites este tutorial para personalizar os Marcadores, e como eu não sei qual é exatamente o tipo de qual você quer vou postar todos os tipos que achei, são 3 formas de personalizar.
(PS : TUTORIAL NÃO TESTADO POR MIM)

Antes de tudo vou dar os créditos aos blogs na ordem de cada tipo que eu postar.

(CRÉDITOS AOS BLOGS : MUNDO BLOGGER, LET'S DREAM E DOCE SONHO DE MENINA)

Antes o 1° tipo de personaliza, tuto que achei no MB.

Resultado :

Nuvem de marcadores personalizada

1 - Vá em Layout, e adicione o gadget dos maracadores.
2 - Marque a opção Cloud (formato de nuvem) após adicionar o gadget. E depois salve.
Como por exemplo :

(Imagem do MB)

3 - Agora vá em Modelo, Editar HTML, Aperte CTRL + F ou F3 e pesquise por :

]]></b:skin>

Acima da tag pesquisa cole o seguinte código (No código já explica como edita-lo nas cores e tamanhos)

/* Marcadores-Cloud label
--------------------------- */
#Label1 .cloud-label-widget-content {
text-align:center; /*--Edite-- Alinhamento do gadget--*/
font-weight: bold; /*--Edite-- Fonte em negrito--*/
}
#Label1 .cloud-label-widget-content span {
display: inline-table;
line-height: 1.2;
padding:0 0 0 10px;
vertical-align: middle;
}
#Label1 .label-size-1 a {
color:#8B1A1A; /*--edite a cor--*/
font-size:13px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-1 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-2 a {
color:#FFC125; /*--edite a cor--*/
font-size:14px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-2 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-3 a {
color:#00008B; /*--edite a cor--*/
font-size:16px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-3 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-4 a {
color:#228B22; /*--edite a cor--*/
font-size:18px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-4 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-5 a {
color:#514762; /*--edite a cor--*/
font-size:20px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-5 a:hover {
color:#000; /*--edite a cor--*/
}

Só para informar:
label-size-1: corresponde ao marcador que tem menor quantidade de posts.
label-size-5: corresponde ao marcador que tem maior quantidade.

Prontinho, visualize e se estiver tudo certinho salve ^^

Agora o 2° tipo de personaliza, tuto que achei no LD.

Deste aqui :

Para ficar como este aqui :

(Imagens do blog LD)

1 - Vá no Layout Adicionar o gadgetdos marcadores como no do 1° tuto acima, mas ao invés de marcar cloud, maque listae salve.

2 - Agora vá no Modelo, Editar HTML, Aperte CTRL + F ou F3 e pesquise por :

/* Widgets

3 - Dê enter e logo abaixo dessa linha cole esse código:

.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;
}
.widget ul li, .widget #ArchiveList ul.flat li {
padding: .35em 0;
text-indent: 0;
border-top: dotted 1px #000; /* cor e estilo da borda */
text-align: center;
}
.widget ul li:hover {
background:#f1f1f1; /* cor do fundo ao passar o mouse */
}

Visualize e se gostar salve ^^

Agora o 3° tipo de personaliza, tuto que achei no DSM.

1 - Como anteriormente vá no Layout e adicione o gadget dos marcadores e marque a opção lista e salve.

2 - Agora vá no Modelo, Editar HTML, marque a caixinha "Expandir modelos de widget" e dê CTRL + F ou F3 e pesquise por :

Label1

3 - Vai aparecer mais ou menos esse código:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>

4 - Substitua o trecho em vermelho por: <ul class='marcadores'>
* Se você quiser outro nome para seus marcadores (como Menu, por exemplo), coloque o outro nome toda vez que você achar a palavra "marcadores" nos códigos anteriores e os seguintes (não deixe nenhum com a palavra marcadores, se for colocar o outro nome).

Agora procure por:

]]></b:skin>

5 - E acima da tag pesquisada cole este código:

.marcadores a{
background-image:url(URL_DA_IMAGEM);
background-repeat: no-repeat;
background-position: left center;
margin-left:-20px;
padding-left: 40px; /*Coloque aqui a largura da imagem +1*/
padding-top: 5px;
padding-bottom: 5px;
font-family: "Impact"; /*Fonte dos marcadores*/ font-size: 9pt; /*Tamanho da fonte dos marcadores*/ text-transform: uppercase; /*Deixa todas as letras maiúsculas*/ color: #666666; /*Cor da fonte*/
}
.marcadores li {
height: 42px; /*Coloque aqui o tamanho da altura exata da imagem*/
margin-bottom:-10px;
word-wrap: break-word;
display: block;
}
.marcadores a:hover{
background-image:url(URL_DA_IMAGEM);
background-repeat: no-repeat;
background-position: left center;
text-decoration: none;
font-family: "Impact"; /*Fonte dos marcadores*/ text-transform: uppercase; /*Deixa todas as letras maiúsculas*/ font-size: 9pt; /*Tamanho da fonte dos marcadores*/ color: hotpink; /*Cor da fonte (mouse em cima)*/
}
.sidebar li {
list-style-type:none;
}

No lugar de URL_DA_IMAGEM coloque o endereço da imagem escolhida para ficar à esquerda dos marcadores. É importante que o tamanho dela seja o menor possível.
Os trechos em negrito devem ser exatamente iguais. Os dois trechos em azul devem ser apagados se você não quiser todas as letras maiúsculas. Os demais trechos estão com a explicação ao lado para que você personalize de acordo com seu template. Mexa nos outros valores sem explicação apenas se você souber o que está fazendo.

Espero que tenham gostado, lembrando que eu não testei nenhum e não posso confirmar nada, mas está aí o 4° pedido de tuto, Beijinhoos Lindas e Lindos *-*