Tutoriais

Oi Monstrinhas,
Fiquem com os tutoriais:
Como colocar nome do blog correr na aba: 




Vá no seu blog(óbvio!!)->>Vá em Design ->>clique em editar HTML
aperte F3 e procure </head> e cole em baixo:

esse código:

<script language="JavaScript"> var txt="TÍTULO DO BLOG "; var espera=80; var refresco=null; 
function rotulo_title() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); 
refresco=setTimeout("rotulo_title()",espera);} rotulo_title(); </script>

Onde tem "TÍTULO DO BLOG" Coloque o que quer que fique passando na aba! 






Substituir o link "Lei Mais" por uma imagem:

 vá em Design Editar HTML Marque a opção expandir Modelos de Widgets.

Aperte Ctrl+F (caixinha de busca) e nela pesquise por:

<data:post.jumpText/>

Substitua <data:post.jumpText/> pelo código abaixo:

<p align='right'><a expr:href='data:post.url'><img src='URL DA IMAGEM'/></a></p>

(Substitua a parte azul pelo URL da imagem)

Colocar um gif no titulo da postagem:

primeiro pegue um gif em algum lugar

agora copie o URL dele ou se é outro do seu computador Hospede ele aqui!

Agora vá no HTML do seu blog aperte a opção :

''expandir modelos de widgetds ''

Depois aperte Ctrl + F e pesquise por:

data:post.link'><data:post.title/></a>

Quando pesquisar vai aparecer abaixo do código pesquisado:

<b:else/>

Cole do lado dessa palavra (<b:else/>) esse código:

<img src='COLOQUE O URL DA SUA IMAGEM AQUI E MANTENHA Os PARÊNTESES' style='vertical-align: middle;'/>

Como mudar a cor do selecionado:

Primeiro vá em design- Editar HTML. Depois Aperte Ctrl+F (caixinha de busca) e escreva nela:

]]>

Quando aparecer cole este código acima do ]]>:

*::-moz-selection {

background:#B22222; 

color:#ffffff;   

}

*::selection {

background:#B22222;

color:#ffffff; 

}

o

O que esta de rosa é a cor do selecionado e o que esta de azul é a cor da fonte.

Clique aqui para entrar na tabela de cores.

Após ter colocado as cores que você escolheu salve.

Como colocar balãozinho de comentarios






Para fazer essa alteração entre na pagina editar html, marque a opção expandir modelos de widgets e procure por: <class='post-title entry-title'> ou <b:includable id='post' var='post'>. Qual deles usar depende do modelo do seu template geralmente os templates novos usam a primeira opção. 

Então logo depois coloque este código: 

<span class='post-comment-link-arriba' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnvkD2xN0JAFyA0hs4eXFPmCC8kDilHMDOeJcBjIjqQzMzETVYnn-x_3wzzLnUlyus-znZOZVGXylWKZy3PmbCPb6uOm4bo8-JIuWRXnS7bdyVMij4PB2ur5OWAkB8E7xCXiqetEt6uM/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'> 
<b:if cond='data:post.allowComments'> 
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a> 
</b:if> 
</span> 


Agora vamos falar sobre os ajustes necessários e como >trocar a imagem do bolão nos comentários do blog, veja esse trecho do código: 

style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnvkD2xN0JAFyA0hs4eXFPmCC8kDilHMDOeJcBjIjqQzMzETVYnn-x_3wzzLnUlyus-znZOZVGXylWKZy3PmbCPb6uOm4bo8-JIuWRXnS7bdyVMij4PB2ur5OWAkB8E7xCXiqetEt6uM/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; padding-top:8px' 

Aqui está toda a formatação de texto e posicionamento da imagem, então vamos por partes: 

Trocar a imagem de fundo (balão) 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnvkD2xN0JAFyA0hs4eXFPmCC8kDilHMDOeJcBjIjqQzMzETVYnn-x_3wzzLnUlyus-znZOZVGXylWKZy3PmbCPb6uOm4bo8-JIuWRXnS7bdyVMij4PB2ur5OWAkB8E7xCXiqetEt6uM/s400/bubble.png) no-repeat top right; width:48px; height:48px; 

Isso é a imagem de fundo, então troque o endereço https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnvkD2xN0JAFyA0hs4eXFPmCC8kDilHMDOeJcBjIjqQzMzETVYnn-x_3wzzLnUlyus-znZOZVGXylWKZy3PmbCPb6uOm4bo8-JIuWRXnS7bdyVMij4PB2ur5OWAkB8E7xCXiqetEt6uM/s400/bubble.png pela url de outra imagem que goste mais ou combine melhor com o seu template, você pode achar uma imagem no google, fazer um com um programa para edição de imagens ou achar icones prontos, depois hospede a imagem e coloque o endereço da imagem no código acima. (caso tenha duvidas leia: Imagem não aparece). 

Os dois valores 48 é o tamanho da imagem, então deve fazer os ajustes com o tamanho da nova imagem que utilizar. 

Posicionar corretamente o número de comentários dentro do balão 
padding-top:8px esse é o espaço acima do numero, portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo), na direção horizontal está centralizado automaticamente. 

Formatação do Numero de comentários (texto) 
Para formatar o texto, ou seja, o numero que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no inicio do html do blog, junto com o trecho body. Veja Onde colocar os códigos no blog. 



Então coloque esses estilos CSS para formatar os links: 

.post-comment-link-arriba a{color:#fff;font-size:18pt} 
.post-comment-link-arriba a:hover{color:#ff0;text-decoration: underline overline} 

Veja aqui como Alterar cores dos links - CSS e também outras opções de formatação de texto 

Beijos Verdes,

Ps: Créditos(WWW)