Como colocar ribbons nas postagens

No post ensinando a fazer um layout em estilo revista, para separar cada parte do tutorial, eu coloquei subtítulos destacados com uma ribbon, como vocês podem ver abaixo:

Faça um layout em estilo revista

Formatação

Antes de mais nada vamos montar a estrutura do layout. Primeiramente siga os passos deste tutorial. Com ele você irá deixar o modelo do blogger mais organizado.

Depois disto, volte ao designer de modelo, clique em layout e configure da seguinte forma:

Depois clique em Ajustar larguras e ajuste da seguinte maneira:

Personalizar cada gadget da sidebar

Primeiro você deve saber o nome do gadget que deseja mudar. No exemplo eu irei mudar o gadget de nome "Menu".

Abra o modelo HTML do seu blog e marque a caixinha "Expandir modelos de widgets"
Dê um clique dentro da janela com o código HTML, aperte Ctrl+F e procure pelo nome do gadget:

Caixa de link-me personalizada

Para fazer a sua é bem simples. Copie o código abaixo e cole em um gadget de HTML/Javascript em seu blog:

Código

<p align="center"><img src="URL_DO_BANNER"/><br />
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:10px; color: #000; border:1px solid #000; background-color:#fff; width: 120px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL_DO_BANNER" border="0" /></a>
</textarea>
</p>

Comentários Numerados

ATENÇÃO

O script só funciona em comentários configurados para abrir em janela pop-up ou em página inteira ou se não usarem o sistema de respostas do próprio blogger.

Abra seu HTML, e marque a caixinha "Expandir Modelos de Widgets"
Aperte Ctrl+F e procure por:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Abaixo dessa linha cole isso:

Como personalizar os comentários - Novo

Antes de começar, vale lembrar de duas coisas muito importantes:
1 - Faça um backup do seu modelo antes de fazer qualquer tutorial. Assim se algo der errado, você pode reverter as alterações facilmente fazendo upload do modelo sem as alterações.
2 - Quando editamos os comentários não tem como visualizar antes de salvar. Então recomendo que você edite o código primeiro no bloco de notas, depois passe para o blog e salve. Aí se algo ainda precisar de ajustes, você modifica, salva e visualiza até ficar como você quer. (É bem cansativo)

Forma nas imagens dos comentários (máscara)

1. HTML

No HTML não tem muito segredo, você vai colocar apenas o código abaixo substituindo pela imagem desejada. Lembrando que o tamanho é 36x36 pixels. O código abaixo você vai procurar pela tag .avatar-image-container {,  copie e cole depois da chave:

Código

-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

Posicionamento: Imagens Organizadas

O código abaixo é o que você cola na gadget e ele irá ocupar todo o espaço, ele irá dividir sua tabela em 2 linhas. O <table> indica o inicio da tabela e o <tr> a quebra de linhas.

Código

<table width="100%" border="0" cellpadding="2">
<tr>
conteudo que se repetirá aqui
</tr>
<tr>
conteudo que se repetirá aqui
</tr>
</table>

Sombra no texto do blog + Fonte Century Gothic

Abra o HTML do seu blog. 
Aperte Ctrl+F e procure por body { e cole logo abaixo esse código:

text-shadow: 1px 1px 3px #b5b5b5;
-moz-text-shadow: 1px 1px 3px #b5b5b5;
-webkit-text-shadow: 1px 1px 3px #b5b5b5;

Imagem de fundo na sidebar

É bem simples, mas só funciona no modelo Viagem do blogger, pois nos outros, o plano de fundo pega toda a parte dos posts junto.

 Vamos lá, primeiro abra seu blogger, vá em Design > Editar HTML

 Se quiser por fundo na barra lateral esquerda, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Personalizar blockquote do blog

Veja um exemplo:

Oi, eu sou um blockquote :)

Hoje vamos aprender como por isso no seu blog! É bem simples, basta fazer tudo certinho.
Abra seu blog, clique em Design > Editar HTML.
Aperte Ctrl+F e na caixa de pesquisa coloque:  ]]></b:skin>
Cole acima de ]]></b:skin> , o seguinte código:

Como por sombra nos títulos dos posts

Um recurso CSS muito legal e pouco conhecido e usado pelas blogueiras teens é o text shadow, que nada mais é do que um sombreado que pode ser aplicadao nos textos, dando um efeito muito bonito. Alguns blogs usam esse recurso nos títulos dos posts, veja  exemplo:

O código usado para dar esse efeito é esse:

text-shadow: 1px 2px 3px #6a6a6a;

As partes em rosa e azul são equivalentes á distância do sombreado em relação ao texto. A parte em amarelo é o tamanho do esfumaçado da sombra. E o código em verde é a cor da sombra.

Você pode ir alterando esses valores para obter diferentes efeitos de sombra. Para aplicar esse efeito no titulo dos posts, siga os passos abaixo:

1 – Abra o blogger, clique em design > Editar HTML

2 – Aperte Ctrl+F e procure por: post-title

3 – Você deverá achar um código parcecido com esse:

Personalize os títulos dos gadgets

 Abra o blogger, vá em design > Editar HTML.

 Procure por: 

h3.post-title {

 Cole logo abaixo desse trecho o seguinte código:

background:transparent url(LINK DA IMAGEM AQUI) no-repeat bottom;
align: center;
margin:.25em 0 0;
padding: 40px 5px 5px 50px;

Vá no Designer de modelo do blogger, clique em layout e escolha o modelo com duas colunas juntas:

Como criar um layout básico

Primeiro vamos escolher o modelo básico. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feinho a primeira vista, mas depois vamos deixá-lo super lindo.

Para isso vá em modelo > Travel Azul

Depois clique em "Avançado"ali no lado, procure "Plano de fundo da postagem" e escolha uma cor qualquer só para destacar enquanto estivermos fazendo as modificações no HTML.

Clique em aplicar ao blog e depois em voltar para o blogger. Agora vamos mexer no HTML do blog para deixá-lo bonitinho.

Separar widgets da sidebar

1- Abra o blogger, vá em modelo > Personalizar
2- No designer do modelo, clique em "plano de fundo da barra lateral" e escolha transparente, como mostra a imagem abaixo (clique para ampliar):

3- Salve as alterações.
4- Volte ao modelo do blog, e agora clique em "Editar HTML"
5- Aperte Ctrl+F e procure por:

Menu para Blog: Colocar Menu Accordion (Sanfona) Vertical no Blog

No Blogger entre na pagina layout > Adicionar Gadget > html/javascript e cole o código:

<style>
ul.container{width:275px;padding:5px;}
li.accoi-menu{list-style:none;padding:1px;width:100%;}
li.title{border-radius:5px;list-style:none;padding:5px;background-color: #069;}
li.title a{color:#ffffff;display:block; padding:5px;font:14px georgia, verdana;overflow:hidden;position:relative;width:100%; text-decoration:none;}
.downlistie{list-style:none;display:none;padding-top:5px;width:100%;}
.downlistie li{list-style:none;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;border-radius:5px;margin:5px;padding:4px 10px;background-color: #FF0;}
.downlistie li:hover {background-color: #F93;}
.downlistie li a{text-decoration:none;color:#00F;font-family: georgia, verdana;font-size: 14px;}
.downlistie li a:hover {text-decoration:none;color:#333333;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
$('li.title a').click(function(e){
var dropDown = $(this).parent().next();
$('.downlistie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});</script>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Templates</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Wordpress</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Themes</a></li>
<li><a href="#">Plugins </a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >About us</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy policy</a></li>
</ul></li></ul></li>
</ul>

Como Personalizar Menu do Blog

Mudar ou Aumentar Larguras do Blog: Qual a Largura Ideal do Blog?

Entre na pagina Modelo > Personalizar > Ajustar larguras e altere como desejar. Caso não funcione será necessário alterar diretamente pela pagina editar HTML.

Na maioria das vezes o nome do estilo é algo assim: 

content-fauxcolumn 

e as colunas do blog são o estilo: 
main.column. 

Em ambos os casos os nomes dos estilos CSS não são exatamente esses, pois isso varia muito conforme o template e tem outras palavras junto, mas já um começo e juntamente com o inspecionar elemento você conseguirá encontrar o que procura. Depois é só alterar o valor que está no código width: ....px que determina a largura.

Qual a Largura Ideal para usar no Blog

Colocar 2 Anúncios AdSense abaixo do Titulo das Postagens

Vamos preparar o código dos anúncios AdSense para colocar embaixo dos títulos das postagens do blog. Naturalmente o primeiro passo é pegar o código do bloco de anúncios que você quer.

Atualmente oAdsense usa Código Asynchronous nos Anúncios então será necessário fazer uma pequena alteração neles antes de colocar no blog, veja que o código começa assim:

<script async='async' src="//pagead2.googlesyn.......

Códigos e Tags Condicionais do Blogger

As condicionais do Blogger tem a função de mostrar um determinado conteúdo em paginas especificas do blog, por exemplo, mostrar os assuntos relacionados somente na pagina da postagem e não na pagina inicial ou pagina dos marcadores. Neste caso o código é:

<b:if cond='data:blog.pageType == &quot;item&quot;'> o código que desejar </b:if>
Note que existem dois sinais de igual no meio código: 

data:blog.pageType == &quot;item&quot

Se você quiser que um conteúdo seja exibido em todas as paginas do blog menos nas paginas de postagens é só trocar um sinal de igual por um ponto de exclamação, deste jeito: