livro blogs

Just another WordPress.com site

Arquivos da Categoria: dicas

– CDT – coisas de twitter: código, twitter flutuante

 

 

http://coisasdetwitter.blogspot.com/2010/11/codigo-twitter-flutuante.html

 

– CDT – coisas de twitter: código, twitter flutuante.

 

via– CDT – coisas de twitter: código, twitter flutuante.

Anúncios

Aprenda:…"A edição pequeno ícone do Blogger"

A edição pequeno ícone do Blogger


Blogger fez algumas alterações no CSS automaticamente adicionado. Não sei o que são exatamente, mas que está claro é que afectam os ícones de edição e da imagem que é adicionado em cada widget e só é visível para o administrador Blog:

http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_bundle.css

”  Não é nada grave , apenas afeta a estética e pessoalmente sempre mantê-los escondidos , porque eu estava chateado quando nodificar o modelo ou fazer algum tipo de ajuste. Para isso, use uma série de links que permitem que eu painel de controle de acesso organizados de acordo com minhas próprias necessidades.

O Blogger tem feito é adicionar propriedades a esse ícone , reduzindo a sua opacidade e estabelecimento de uma margem que atualmente coincide um pouco com o widget mesmo.

 
 
. Widget de controle de item (
float : right;
height: 20px;
margin- top: - 20px;
position: relative ;
z - index : 10;
}
. Widget- controle um item (
opacidade: 0,5;
}
. Widget de controle de item de um : hover (
opacidade : 1;
}
 
 
 
”   …isso não afectará em nada os visitantes podem ver como o Blog” 
 
”   Mas nada impede a modificação sensível, que é o suficiente para adicionar as regras de estilo do template e substituir as propriedades usando ! Importante ou aditado <body>:
 
 
<style>
. (....... Widget de controle do item )
. (....... Widget de controle do item )
. Widget de controle de item a: hover (....... )
</ Style>
fonte e créditos:


você está em: http://noticiashoje3x.blogspot.com

"CSS3 online Generator"

CSS3 online Generator

”  Quando falamos de geração de pouca luz acende e rapidamente pensar em algo que vai economizar tempo, tornar mais fácil oy em alguns casos, nós nos divertimos . Na minha tag cloud é muito bem chamado de ”   produtores”    é jogar com as imagens e também sobre CSS ou HTML.”
”  Vamos ver se Parque CSS3 um gerador online que nos dá a oportunidade de jogar com os recursos do CSS3.”
”  Algumas das coisas que temos                               
são os cantos arredondados
sombras em texto 
e borda
e um belo efeito de opacidade.”


”  Quando você acessa ver uma barra de ferramentas à esquerda para selecionar as propriedades que você deseja adicionar.
No topo , temos um bloco de amostra mudará como fazemos mudanças , podemos ver que bloqueiam completamente se você arrastar para baixo da linha da fronteira com o mouse.”
 

”  No fundo , encontramos os estilos que contribuem para o bloco e no final das mudanças que podem copiar que diz  ‘  Estilo de usar no arquivo / html css “   e colar no nosso pessoal , adicionando uma classe a ser usada .

…”   simplificar”…”  aqui”  …”   um pouco, e suponho que nós criamos um bloco, oferece os seguintes estilos 
e adicionar antes
  ]]></ B: skin> segue.

. Bloco de cor (
– Webkit – border-radius : 31px ;
-Moz- border-radius : 31px ;
border-radius : 31px ;
– Webkit -box -shadow : 4px 4px 6px # 000000;
-Moz -box -shadow : 4px 4px 6px # 000000;
shadow -box : 4px 4px 6px # 000000;
text-shadow :- 1px – 1px # 000000 0px ;
– Webkit -transform: rodar (- 17deg ) escala ( 0,9) de inclinação (- 22deg , 17deg );
-Moz -transform: rodar (- 17deg ) escala ( 0,9) de inclinação (- 22deg , 17deg );
-O- transform: rodar (- 17deg ) escala ( 0,9) de inclinação (- 22deg , 17deg );
border: 1px solid # FFC0CB ;
background: # 696 969 ;
padding: 9px ;
opacidade : 0,7;
font-family : Palatino, ” Palatino Linotype “,” Palatino LT STD ” , “Book Antiqua “, serif Geórgia ;
font-size: 12pt;
color: # FFF5EE ;
text-align : center;
width: 300px ;
height: 150px ;
}

”  Adicionar como em negrito   bloco cor –”   É o nome que atribuímos à classe , mas pode ser qualquer outro jogo onde ele irá adicionar o código HTML para exibir o bloco.

Depois de salvar as alterações editar uma entrada ou um novo gadget HTML e dentro adicione o seguinte:

< div class = “bloco cor –“>                                                               

”   Aqui nós adicionamos o conteúdo pode ser texto, imagens ou qualquer coisa.

</ Div>                                                                                                                        

”  Aqui nós adicionamos o conteúdo pode ser texto, imagens ou qualquer coisa.

< div class = “bloco cor -“>

fonte e créditos:

http://gemablog-.blogspot.com/2010/09/generador-online-css3.html?utm_source=feedburner&       utm_medium=email&utm_campaign=Feed%3A+GemaBlog+%28Gem%40+BLOG%29               

Saiba Como:…"Responder comentário específico no Blogger"

 “Mais uma dica excelente do blog El Balcon de Jaime. Graças a ele é possível reponder a um determinado comentário direcionado no Blogger. Vá até o HTML de seu blog, clique em Expandir modelos de widget e procure por:


<data:commentPostedByMsg/>

E abaixo dele cole o código abaixo, colocando o endereço de seu ID e a imagem de sua preferência no local indicado.

<span class=’blrespondrcmnt’><a title=’Responder a este comentario’ expr:href=’&quot;https://www.blogger.com/comment.g?blogID=ID DO SEU BLOG AQUI&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;’ onclick=’javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;’><img src=’AQUI O ENDEREÇO DE IMAGEM‘/></a></span>

Agora procure por:

]]></b:skin>

E antes dele cole:

.blrespondrcmnt {float: right; text-align: right; margin: 32px 10px 0 0;}

*Se quer que fique a esquerda troque right por left e onde está o número 32, vc poderá trocar por outro número para sua imagem ficar certinha dentro dos comentários.”

Para saber o ID de seu blog basta olhar na barra de endereços, em HTML. Copie só os números e cole no local indicado no código.


























fonte e créditos:
http://templateseacessorios.blogspot.com/
2010/08/responder-comentario-especifico-no.html




















você está em: http://noticiashoje3x.blogspot.com

Criar Página Com Uma Lista de Conteúdo do Blog – (Sitemap)

Criar Página Com Uma Lista de Conteúdo do Blog – (Sitemap)

image
 
 
 
 
 
 
 
 
Vamos ver como criar uma página com todo o conteúdo do nosso blog relacionado e organizado, para facilitar aos leitores a pesquisa e a navegação. Desenvolvido por Amanda – BlogBuster e felizmente, otimizado e simplificado por Abu Farhan  que reduziu o recurso a nada mais do que copiar e colar o código na caixa de postagem de uma “Página Estática” do Blogger. Este “índice” apresenta todas as postagens publicadas separadamente , por categoria , e os posts mais recentes, aparecem com um texto ao lado que diz: Novo!
Vamos aprender. É bem simples! (mais difícil ensinar hehe)
Copie o código abaixo e edite, colocando o endereço do seu blog no local indicado em vermelho.

<script src=”http://dl.dropbox.com/u/684300/tabindex-1.js”>
</script>
<script src=”http://SEU-BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script>

Faça login no Blogger, clique em “Editar postagens” ►“Editar páginas”► “NOVA PÁGINA

image

image

Cole o código do dentro do box de postagem, na opçãoEditar HTML (IMPORTANTE!)Nomeie a página e publique.

image
Na próxima página você verá as opções para publicação do link. No meu caso, escolhi “Nenhum gadget”, mas você pode publicar na sidebar ou no menu do Blogger como mostram as imagens. Faça testes, use o modelo de exibição mais adequado ao seu template.

image
A minha página ficou  ASSIM . Depois de marcar “
Nenhum Gadget”, salvar e publicar, eu copiei o endereço da página direto do navegador e colei no meu menu. Veja:
image

<li><a href=’http://blogger-dicasmamanunes.blogspot.com/p/styletextjavascript-srchttpdl.html’>PUBLICAÇÕES</a></li>

Recomendação: Baixe o script e hospede em um site de sua confiança para o caso de haver algum problema. Download do Script

<script src=”AQUI-O-ENDEREÇO-DO-SCRIPT-tabindex-1.js>
</script>
<script src=”ENDEREÇO-DO-SEU-BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script>

INSTRUÇÕES PARA QUEM USA O 

HACK ”  LEIA MAIS…”   AUTOMÁTICO
 
Se o seu template tem o hack  ”  Leia mais…”   automático (com script) deverá substituir o código HTML para que esse widget funcione sem problemas.

 É o seguinte:

 Entre em
Editar HTML“, marque a opçãoExpandir modelos de widgetse procure pelo trecho:

<div class=’post-body entry-content’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id=’showlink’><a expr:href=’data:post.url’>
Leia Mais …</a></span>
</b:if></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


Substitua todo ele pelo seguinte:


<div class=’post-body entry-content’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id=’showlink’><a expr:href=’data:post.url’>
Leia Mais…</a></span>
</b:if></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

‘ ‘ Prontinho! ”

fonte e créditos:

você está em: http://noticiashoje3x.blogspot.com

Aprenda como se faz:…"Leia mais nas postagens com miniatura de imagens"

”  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.”



  Este hack coloca resumo das postagens em seu blog automaticamente e reduz as imagens dos posts. Mas atenção, ele invalida o ”  Leia mais”   (jump break) nativo do Blogger.


Vá até o HTML de seu blog, clique em     ”   Expandir modelo de widget” e ao encontrar o trecho abaixo:

<div class=’post-body entry-content’>
<data:post.body/>
 <div style=’clear: both;’/> <!– clear for photos floats –>
</div>
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a>  
</div>
    </b:if>


 Substitua por este:


<div class=’post-body entry-content’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id=’showlink’><a expr:href=’data:post.url’>Leia Mais ►</a></span>
</b:if></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

Agora procure por:


]]></b:skin>




/\…E depois dele cole o próximo código: \/

<script type=’text/javascript’>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height =
100;
img_thumb_width =
100;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf(“<“)!=-1)
{var s = strx.split(“<“);
for(var i=0;i<s.length;i++){
if(s[i].indexOf(“>”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);} }
strx = s.join(“”); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == “float”) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;
summ = summary_img;
} else {
imgtag = ‘<div style=”padding:5px” align=”center”><img style=”max-width:’+img_thumb_width+’px; max-height:’+img_thumb_height+’px;” src=”‘+img[0].src+'” /></div>’;
summ = summary_img;
}}var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;}
//]]>
</script>

…VISUALISE…
…SALVE…

ATENÇÃO: Este tutorial serve também ao novo Blogger, implementado em junho de 2010

Códigos na cor verde tamanho da imagem 
Código em rosa quantidade de letras

/\…fonte e créditos:

ADENDO:

  ”  A palavra “   Leia Mais”   se refere ao texto do link que aparecerá no postna sua página inicialé onde o leitor ao clicaré direcionado à página do post completoÉ neste espaço que você coloca o texto que preferir (Ex.: Continue Lendo, Ler Todo Artigo, Leia Mais, Ver Conteúdo etc).”

…”   pode também personalizar o link “   leia mais“,  de diversas maneirassubstituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do linkcom uma setapor exemplo.”


veja como logo abaixo:                                          

…”   Personalizando o Link Leia Mais”:


”  Para substituir o texto por uma imagem, procure por este trecho:


<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►
E substitua o texto ‘Leia Mais‘ por:


<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />


Para incluir uma imagem ao texto ‘Leia Mais‘, acrescente logo em seguida a ele:


<img src='ENDEREÇO-DA-SUA-IMAGEM'/>

…”  aplicar estilos CSS:                                

”   … poderá também personalizar estilos para o link ‘Leia Mais‘, para isto, basta incluir o seguinte código logo ACIMA da tag]]></b:skin>:

#showlink {
font-size: 11px;
/* escolha o tamanho da fonte para o link */
float: right;
/* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px;
/* aplique margens para posicionar link */
margin-top: -8px;
/*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}

#showlink a {
color: #ffffff;
/* escolha a cor de seu link */
}

#showlink a:visited {
color: #cccccc;
/* escolha a cor de seu link quando visitado */
}

#showlink a:hover {
color: #000000;
/* escolha a cor de seu link quando passa o mouse em cima */
}
”   Confira o artigo:Criando estilos para o Hack ‘Leia Mais’ de postagem resumida e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial.”
/\…fonte e créditos:                                                                                               
 http://www.mundodarkness.com/2009/08/postagem-resumida-na-pagina-inicial_12.html#ixzz0xMUCiJJz                                                                       

você está em:

Saiba como:…"Imagem, chats, menus e o que quiser fixo no template"

Com este código é possivel colocar uma imagem em seu blog que com a rolagem do blog, esta fique parada em um só local.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



Vá até o HTML do seu blog e procure pelo código:

]]></b:skin>

Agora cole o código abaixo.

#float_corner {
position:fixed;
_position:absolute;
bottom:0px;
left:0px;
clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);
}

Agora procure pelo código:

<div id=’outer-wrapper’><div id=’wrap2′>

/\…Depois dele cole o código abaixo colocando no local indicado o endereço de sua imagem.

<div id=’float_corner’>
COLOQUE AQUI O QUE QUISER QUE FIQUE FIXO
</div>



fonte e créditos:                                       
http://templateseacessorios.blogspot.com/2009/05/imagem-fixa-no-template.html




você está em: http://noticiashoje3x.blogspot.com

Saiba como se faz:…"Colocando barra, sidebar, enfim, o que quiser que fique fixo em seu blog

Colocando barra, sidebar, enfim, o que quiser que fique fixo em seu blog


”  …para deixar essa barra de menu fixa … no blog.” 

”  Bom, é fácil, se o que você quer é colocar a barra fixa. Vá até o HTML do seu blog e no código v544 do menu (você já deverá te-lo em seu blog, e saber onde fica, neam…) e coloque o seguinte código:…”

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
position: fixed;

Com esse código vc poderá colocar fixo o menu, a header, uma sidebar, enfim, o que quiser.

S Ó I S S O !!!  

fonte e créditos:
http://templateseacessorios.blogspot.com/
2009/09/
colocando-barra-sidebar-enfim-o-que.html

 

você está em: http://noticiashoje3x.blogspot.com

Saiba Como…"Colocar 5 colunas no footer do blog"

tweetmeme_style = ‘compact’;tweetmeme_source = ‘elkedibarros’; var __buzrr_style=”small_blue_count_text_icon”>


 
” Se você tem tanto, mais tanto widget em seu blog que quer dar uma aliviadinha nas colunas laterais, você poderá colocar 5 colunas no footer do blog.”

Para isso copie o código e cole acima de:

 
]]></b:skin>

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.


#footer-columna-contenedor {clear:both;}
.footer-columna {padding: 10px;}
#col1{
background:#cccccc;
border: 2px solid #000;
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#col1 h2{ background: #808080; font-size: 16px; text-align: center;}
#col2{
background:#cccccc;
border: 2px solid #000;
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */}
#col2 h2{ background: #808080; font-size: 16px; text-align: center;}
#col3{
background:#cccccc;
border: 2px solid #000;
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#col3 h2{ background: #808080; font-size: 16px; text-align: center;}
#col4{
background:#cccccc;
border: 2px solid #000;
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */}
#col4 h2{ background: #808080; font-size: 16px; text-align: center;}
#col5{
background:#cccccc;
border: 2px solid #000;
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#col5 h2{ background: #808080; font-size: 16px; text-align: center;}


*O código na cor azul acima, representa a cor de fundo dos widgets 

e a vermelha a cor da borda
Cor em verde é a cor de fundo do título do widget. Você poderá modifacá-la ou se não quiser fundo, troque o código por: transparent

Agora procure pelo código:                                                                                     


<div id=’footer-wrapper’>
 
e depois dele cole o próximo código:

<div id=’footer-columna-contenedor’>
<div id=’footer1′ style=’width: 20%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’>
</b:section>
</div>
<div id=’footer2′ style=’width: 20%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’>
</b:section>
</div>
<div id=’footer3′ style=’width: 20%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’>
</b:section>
</div>
<div id=’footer4′ style=’width: 20%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col4′ preferred=’yes’ style=’float:left;’>
</b:section>
</div>
<div id=’footer5′ style=’width: 20%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col5′ preferred=’yes’ style=’float:left;’>
</b:section>
</div>
</div>


Agora á até ”   Elementos de página, você verá as 5 colunas. Arraste para baixo os widgets ou então, coloque novos.

fonte e créditos:

você está em: http://noticiashoje3x.blogspot.com

Saiba Como fazer:…"Marcadores em forma de nuvem de tags"

var ultimaFecha = ’10/08/10′;

Marcadores em forma de nuvem de tags

”   Rosa ensinou que para seus marcadores ficarem com aquele bonito efeito em tamanhos e cores diferentes primeiro você terá que deixar essa opção selecionada nos marcadores. Para isso, abra os marcadores e deixe selecionado como mostra a imagem. “


Agora vá até o HTML de seu blog e procure pelo código:


 ]]></b:skin>

  

 
/\…Antes dele 
 cole o código abaixo
Mude as cores se preferir.
 
 
 


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
/*Label Cloud—————————————-*/
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #000000; font-size: 10px;}
.label-size-2 a {color: #228C7E; font-size: 12px;}
.label-size-3 a {color: #CC0000; font-size: 14px;}
.label-size-4 a {color: #1196DB; font-size: 15px;}
.label-size-5 a {color: #F9CA3B; font-size: 18px;}

 fonte e créditos:
|

Posted: 10 Aug 2010 07:54 PM PDT


Rosa ensinou que para seus marcadores ficarem com aquele bonito efeito em tamanhos e cores diferentes primeiro você terá que deixar essa opção selecionada nos marcadores. Para isso, abra os marcadores e deixe selecionado como mostra a imagem.

Agora vá até o HTML de seu blog e procure pelo código:

 ]]></b:skin>

 Antes dele cole o código abaixo. Mude as cores se preferir.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
/*Label Cloud————————-—————*/
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #000000; font-size: 10px;}
.label-size-2 a {color: #228C7E; font-size: 12px;}
.label-size-3 a {color: #CC0000; font-size: 14px;}
.label-size-4 a {color: #1196DB; font-size: 15px;}
.label-size-5 a {color: #F9CA3B; font-size: 18px;}
 fonte2:

Templates e Acessórios

de Templates e Acessórios <templateseacessorios2@gmail.com>
para brandaodasilvaedilene@gmail.com
data 11 de agosto de 2010 17:15
assunto Templates e Acessórios
enviado por feedburner.bounces.google.com
assinado por google.com

você está em: http://noticiashoje3x.blogspot.com