Balaio de dicas

Colocar imagem mapeada no cabeçalho

noreply@blogger.com (ciprisla) — Sun, 12 Sep 2010 19:37:00 +0000

Vocês já sabem como mapear imagem online. Hoje irei explicar como colocar uma imagem mapeada no cabeçalho do blog.
Já adianto que, não são em todos os templates que isso é possível ser feito. Testei em todos os modelos do blogger, inclusive nos antigos e, deu certinho. Portanto, se não aplicar-se ao seu template, a culpa não é minha.

Em design >> Editar HTML, procure por:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display: none;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
display: none;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
display: none;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display: none;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
display: none;
}

#header a:hover {
color:$pagetitlecolor;
display: none;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
display: none;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
display: none;
}

E em cada trecho, coloque display: none; Fazendo isso, o cabeçalho ficará escondido. Visualize e salve o modelo.

Pegue o código da sua imagem mapeada e coloque como elemento de página, em HTML/Javascript.

Mapear imagem online

noreply@blogger.com (ciprisla) — Fri, 10 Sep 2010 19:20:00 +0000

Uma imagem mapeada nada mais é que, uma área clicável em uma imagem. Existem várias maneiras de mapear uma imagem, inclusive empregando CSS. Uma delas, bem prática e fácil é utilizando um mapeador online.
Mapeei a imagem do cabeçalho do blog e, substitui a nuvem de tag, por uma imagem também mapeada. É essa imagem que vou tomar como base para o tutorial de hoje.

Criei essa imagem no photoshop, mas é possível fazê-la em qualquer editor de imagem. É bem simples, fui adicionando os marcadores de forma aleatória. Não vou entrar muito em detalhe sobre a criação da imagem, porque o objetivo do post não é esse.

Acesse image maps, você terá a opção de abrir a imagem do seu PC, ou à partir de uma URL. Recomendo que hospede sua imagem no servidor de sua preferência (imageshack, picasa, tinypic…), pois, o risco de sua magem desaparecer é bem menor.

Cole a URL na área destinada e clique em ‘’start mapping your image’’. Na próxima página, clique em ‘’continue to next step’’.

Vai abrir uma página parecida com esta: Deixe selecionada a caixa ‘’base URL’’ e desmarque ‘’Show Text Links’’. Mantendo ‘’show text links’’ marcada, aparecerá as ligações de texto embaixo da imagem e, esteticamente não é nada bonito. Para adicionar os links, clique em ‘’rectangle’’ e selecione a palavra ou imagem que receberá o link.

Clique em ‘’save’’ e vá repetindo se necessário. Quando terminar, clique em ‘’get your code’’.

Quer sua iimagem como elemento de página, basta, copiar o ‘’HTML code’’. No próximo post, vou ensinar como colocar uma imagem mapeada no cabeçalho do blog. Portanto, fiquem atentos :p e até a próxima! ;)

Wallpaper aquarela

noreply@blogger.com (ciprisla) — Mon, 06 Sep 2010 04:03:00 +0000

Passei esse final de semana brincando com o photoshop. Adoro tutoriais estrangeiro e, foi em um desses sites maravilhosos, que aprendi uma nova técnica. Fiz 4 papéis de parede e, disponibilizo pra vocês.

resolução 1024x768

Mas, se vocês querem aprender a fazer o seu, segue o link do tutorial.Creating an Abstract Watercolor Wallpaper. Qualquer dúvida nessa técnica é só perguntar.

Botão de retweet flutuante

noreply@blogger.com (ciprisla) — Mon, 30 Aug 2010 17:52:00 +0000

Tenho notado uma procura muito grande no meu blog, oriunda do google, procurando por botão de retweet flutuante. Procura grande= ideia para um novo post. O que é muito bom, pois às vezes me falta ideias. Bom, então, chega de enrolação e vamos ao que interessa.

Antes de qualquer modificação, faça um backup do seu modelo atual.

Primeiro, esteja com o código do seu botão de retweet. Se ainda não tem o seu, sugiro que leia Tweet button – Botão de retweet do twitter

Em design >> Editar HTML e com ajuda do CTRL+F procure pelo seguinte trecho:

</body>

E ANTES cole o código.

<div id='floatingimage'>
CÓDIGO_DO_BOTÃO_RETWEET</div>

Agora, procure por:

]]></b:skin>

E imediatamente ANTES cole o código abaixo.

#floatingimage {
bottom:260px;
left:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}

Esse código é para dar estilo. Você pode modificar a posição e a altura do botão. Na parte rosa do código mude a altura, se quiser o botão no rodapé, mude para 10px. Vá mudando e pre-visualizando a mudança, até o botão ficar na posição ideal. E onde marquei de amarelo, mude para ‘’right’’ se quiser o botão à direita. Se tudo der certo, salve o modelo.

Dúvidas e sugestões, é só deixar seu comentário. :)

Tweet Button – Botão de retweet do twitter

noreply@blogger.com (ciprisla) — Sat, 21 Aug 2010 17:03:00 +0000

O twitter disponibilizou em sua página de complementos, 3 modelos de botão retweet para seu blog. Acesse http://twitter.com/goodies/tweetbutton escolha o seu botão, personalize (opcional) e, pegue o código.
Para quem já tem um botão topsy ou twetmeme, apenas substitua o código. E para quem ainda não tem, vou ensinar como colocar esse do twitter, que na minha opinião, é bem mais bonito que os outros.

Antes, decida se quer alinhar seu botão à esquerda ou à direita.

Código para alinhar à direita

<b:if cond='data:blog.pageType == "item"'>
<div style="float:right; margin-left:5px;">CÓDIGO_DO_BOTÃO</div>
</b:if>

Código para alinhar à esquerda

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left; margin-right:5px;">CÓDIGO_DO_BOTÃO</div>
</b:if>

E coloque o código do botão na área destinada.
Agora, se quer que seu botão fique entre o título e a postagem.´Vá em ‘’design’’>>> ‘’editar HTML’’ marque ‘’expandir modelos de widgets’’. E com a ajuda de CTRL+F procure por:

<div class='post-header-line-1'/>

E imediatamente DEPOIS, coloque o código escolhido acima. Ficando assim:

A outra opção, é colocar o botão embaixo da postagem. Vá em ‘’design’’>>> ‘’editar HTML’’ marque ‘’expandir modelos de widgets’’. E com a ajuda de CTRL+F procure por:

<div class='post-footer'>

E ABAIXO coloque o código escolhido.
É isso! Dúvidas e sugestões, é só deixar seu comentário.

Como fazer botão no Photofiltre Studio X

noreply@blogger.com (ciprisla) — Fri, 13 Aug 2010 21:55:00 +0000

Hoje vou ensinar à fazer um botão para colocar em seu blog. Estava vagando pela net e, encontrei o blog da Aline, o Agenda Blizz. Um blog cute-cute, foi lá que tirei a ideia de fazer esse post. Ela ensina em uma vídeo aula como fazer botões no fireworks cs4. Fiz as devidas adaptações para criar o mesmo botão, só que no photofiltre.

Vá em ''novo'' e abra uma imagem em qualquer tamanho. Selecione a ferramenta ‘’retângulo arredondado’’ e faça o corpo do botão. Vá em ‘’degradê’’ >> selecione ‘’dois tons’’, ‘’direção’’ de cima para baixo >> ‘’cor 1’’ vermelho 51, verde 51, vermelho 51, essa cor no valor hexadecimal é #444444 >> opacidade 60%. ‘’cor 2’’ vermelho 0, verde 0, vermelho 0, valor hexadecimal #000000 >> opacidade 100%.

Agora vá em ‘’filtro’’ >> ‘’estilizar’’ >> ‘’contorno progressivo’’. Marque a opacidade 80% >> ‘’cor’’ preto (sempre prefira a cor mais escura das que você escolheu em ‘’dois tons’’) >> ‘’largura’’ 20 >> ‘’estilo’’ desfocar.

Em ‘’abrir’’ selecione seu ícone, de preferência um de tamanho proporcional ao seu botão. Copie e cole (CTRL+C/ CTRL+V). Agora, vamos adicionar um texto. Depois vá em ‘’camada’’ >> juntar todas as camadas.

Com a ferramenta seleção, selecione em volta do botão, corte e, cole como uma nova imagem. Vá em imagem >> cor transparente, tolerância 30.

Salve em PNG e, prontinho!

Colocar link em uma imagem

noreply@blogger.com (ciprisla) — Fri, 23 Jul 2010 22:13:00 +0000

Vou ensinar como colocar link em uma imagem. A primeira coisa à fazer é hospedar sua imagem. Hospede-a em um site de sua preferência, eu sempre hospedo as minhas imagens no ImageShack. Nesse caso, copie o link direto.

Depois, coloque o endereço do site e o link da imagem nesse código.

.<a href=’’ENDEREÇO_DO_SITE’’><img src="ENDEREÇO_DA_IMAGEM" /></a>

Particulamente, prefiro usar o NVU (editor HTML), muito mais fácil e prático, com ele as possibildades de editar minhas imagens são maiores. Um bom exemplo, é quando paramos o mouse em uma imagem e imediatamente aparece um texto explicativo.

Assim:

Se você optou por escolher o NVU.

Clique no ícone ''imagem'' imediatamente abrirá uma janela, na aba ‘’endereço’’ cole o link da sua imagem devidamente hospedada. E para aparecer o texto explicativo, basta colocar a descrição. Na aba ''link'' insira o link da página com o ''http://'' dê OK. Para copiar seu código clique em ''código-fonte''

(Clique na imagem para ampliar)

Dúvidas ou sugestões? Deixe a sua nessa caixinha de nome ''comentário''.

É isso. Até a próxima!

Criar banner animado no PhotoFiltreStudio X

noreply@blogger.com (ciprisla) — Sat, 17 Jul 2010 02:28:00 +0000

Criar banner simples no PhotofiltreStudio X

noreply@blogger.com (ciprisla) — Wed, 14 Jul 2010 21:42:00 +0000

Essa é minha primeira vídeo aula, espero que gostem. :) Tomei gosto e, já estou bolando mais uma. =P

PS: No vídeo eu não falei porque na hora a palavra me fugiu da mente, rs. Mas salvando o banner em PNG a definição é melhor.

(Sim, minha voz ficou baixa. ¬¬')

Twitter comemora copa do mundo

noreply@blogger.com (ciprisla) — Wed, 09 Jun 2010 16:08:00 +0000

Para marcar o ínício da Copa do mundo o twitter lança um novo design. Para habilitá-lo vá em ''settings'' >> ''design'' e escolha o tema ''South Africa''. Certeza que esse será um tema muito usado durante o evento.

Cursos on line grátis

noreply@blogger.com (ciprisla) — Sat, 05 Jun 2010 23:31:00 +0000

(Clique na imagem)

Reparar nuvem de tag em movimento

noreply@blogger.com (ciprisla) — Sat, 15 May 2010 15:58:00 +0000

Quem escolheu usar a nuvem de tags em movimento teve um certo problema, a nuvem simplesmente sumiu. Encontrei a ''solução'' no blog oloblogger (espanhol)

Fiz exatamente o que ele diz no tutorial, mas não obtive resultado. Observe que alguns leitores de seu blog também não conseguiram, já outros, tiveram sucesso. Resolvi postar aqui, para que vocês façam seus testes, pois tenho observado uma procura grande em meu blog por esse efeito.
E então, qual foi o resutado?

Twitter buttons - Botões follow me do twitter

noreply@blogger.com (ciprisla) — Wed, 12 May 2010 22:09:00 +0000

Faz algum tempinho que o twitter está oferecendo botões follow me. Acesse http://twitter.com/goodies/buttons e pegue o seu. Clique no ícone para pegar o código e, cole na área destinada ao HTML/javascript do seu blog.

Aumentar/diminuir fonte do texto

noreply@blogger.com (ciprisla) — Tue, 11 May 2010 02:56:00 +0000

Que tal dar ao leitor do seu blog a autonomia de aumentar e diminuir a fonte do texto? Como podemos observar em portais de notícias. Fazia tempo que procurava e, encontrei no site blog e notícia um tutorial Adicionando links para Aumentar/Diminuir a letra do blogger. Só que o autor ensina como acrescentar na sidebar, fiz algumas adaptações e ensino para vocês como colocar no corpo da postagem e, adicionando uma imagem bem bonitinha.

Sem mais enrolações, vamos ao que interessa.

Antes de qualquer mudança faça um backup do seu template. Vá em ‘’Editar HTML’’ e com ajuda do atalho CTRL+F procure por :

</head>

Coloque esse código ACIMA da tag anterior. (optei por hospedar no google sites por ser um tanto extenso.) Visualize e se estiver tudo certo, salve o modelo.

Agora vamos adicionar os links dentro da postagem.

Em editar HTML marque expandir modelos de widgets e procure:

<div class='post-body'>

<div class='post-header-line-1'/>

Logo ABAIXO cole esse código:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right; margin-left:5px;'><a href="javascript:mudaTamanho('body', -1);"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img217.imageshack.us/img217/1356/filefont32.jpg"></a>&nbsp;-&nbsp;<a
href="javascript:mudaTamanho('body', 1);"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="http://img294.imageshack.us/img294/1356/filefont32.jpg"></a></div>
</b:if>

Visualize e salve as alterações.

Dúvidas e sugestões? É só deixar seu comentário.

Copa Fifa 2010 - Álbum de figurinhas virtual

noreply@blogger.com (ciprisla) — Thu, 22 Apr 2010 18:45:00 +0000

Nada mais gostoso que comprar pacotinhos de figurinhas, chegar em casa rasgar um por um, selecionar as figurinhas por país e, colar no álbum. E ainda ter a emoção de encontar aquela que é rara, trocar as repetidas com os amigos. Mas pásmem! Semana passada o site da Fifa lançou uma versão virtual do tradicional álbum.

Para adquirir seu álbum, basta se tornar um membro do clube fifa e, confirmar seu cadastro por e-mail. A cada 24 horas o usuário recebe dois pacotes de figurinhas, logo, é importante acessar seu álbum todo dia. Existe também os códigos promocionais para conseguir pacotes extras, para isso é preciso ficar ligado as informações da editora panini, nas garrafas de Coca-Cola, respondender o quiz no site da fifa e, completar a primeira seleção.

Uma maneira mais rápida de completar seu álbum é trocar figurinhas repetidas com outros torcedores, para tal, há uma área reservada a trocas. O participante pode também, criar um grupo para trocas.
Quem completar o álbum antes do dia 16 de julho, poderá participar de um sorteio, onde 100 torcedores serão premiados com um álbum completo e em capa dura.

Encontrei no blog baixe hoje.com alguns códigos, são eles: 4V8QBYU7, 7BUY39F7, 4L6QUVV5, 4FBGE83A, 23EJAFW5, 3Y69P7BJ, 4TNL2XLY e 6634L9WC
Minha amiga de twitter @SandraEnumo me passou mais um código: COCA-COLA. Digite-o assim mesmo e, ganhe um pacotinho extra. ;D

E então, o que você está esperando, cadastre-se e divirta-se!

EM TEMPO: Navegue pelo site da fifa e encontre figurinhas escondidas.

http://www.fifa.com/worldcup/destination/stadiums/index.html
http://www.fifa.com/worldcup/organisation/theball/index.html
http://www.fifa.com/worldcup/organisation/mascot/index.html
http://pt.fifa.com/worldcup/organisation/trophytour/index.html
http://www.fifa.com/worldcup/organisation/emblemsposters/index.html
http://www.fifa.com/worldcup/organisation/emblemsposters/poster.html
http://www.fifa.com/worldcup/destination/southafricafromatoz/index.html
http://www.fifa.com/worldcup/organisation/emblemsposters/officialemblem.html

Post atualizado 09/05/10

Saiba quem linkou seu blog.

noreply@blogger.com (ciprisla) — Mon, 05 Apr 2010 03:42:00 +0000

Ter link do teu blog espalhado pela blogosfera, contribui muito para o seu pagerank. E existem várias maneiras de saber quem linkou, e ou citou seu blog, mas, a mais simples é usando o velho e bom google.

Para descobrir vá na aba ’mais’ do buscador e selecione a opção ‘blogs’. Na caixa digite o nome do seu blog e clique em ‘pesquisar blogs’. Feito isso, vai aparecer a página do seu blog, blogs com o nome parecido com o seu, e os blogs que te citaram ou linkaram. O google pode não encontrar todos os resultados, mas foi assim, que fiquei sabendo que o GF Soluções citou o meu. Isso me deixou feliz, até porque, o GF Soluções é um blog ducaramba.
Então, quem te linkou?

O que fazer quando o twitter suspende sua conta.

noreply@blogger.com (ciprisla) — Thu, 01 Apr 2010 22:12:00 +0000

Resolvi criar esse post, pois ontem me veio à mente a seguinte dúvida: ' O que eu vou fazer se o twitter resolver suspender minha conta?' Bom, geralmente o twitter suspende uma conta por infrigir os termos de uso. Vez ou outra, uso ferramentas para fazer uma limpeza no meu perfil, e isso, pode sim, ocasionar a suspensão da minha conta. Sou uma twitteira de plantão, super viciada, e ficaria muito desesperada se minha conta um dia for suspensa. Não é fácil 'conquistar' os nossos seguidores, é uma tarefa árdua. :P Saiba o que fazer, se um dia essa suspensão acontecer.
Depois de ter ficado desesperado, e arrancado seus cabelos, acalme-se, e preencha esse formulário. Algumas contas são suspensas por 24 horas, ou uma semana, mas não vamos esperar, né? Quanto mais rápido fizer o seu pedido, melhor. E sim, a alegação/pedido tem que ser feito em inglês. Mesmo fazendo tudo isso, gastando o seu inglês (google tradutor) não é garantia de que sua conta será recuperada. O ideal, é não violar os termos de uso.

Calcular ano bissexto.

noreply@blogger.com (ciprisla) — Sat, 20 Feb 2010 19:23:00 +0000

AVISO: Esse post está totalmente fora do contexto do blog, mas como ele é meu, eu posto o que eu quiser, né, não, mano? :P Pensando bem, estávamos precisando de uma postagem dessa. :P
Faz Muuuuuuuuuito tempo que eu quero atualizar isso aqui. Mas sabe quando você não tem ideia? Pois é... Daí conversando com um colega, ele fez uma piadinha: ''Dia 29 deste mês eu vou encher a cara com você'' (bom, ele toma remédios controlados, e está terminantemente proibido pelo seu médico de tomar bebida alcoólica) Eu: ''hahaha Este mês só vai até 28'' Ele perguntou se eu sabia calcular pra saber qual ano é bissexto. Eu disse que não. E não sabia meRmo, tá! :P Ele me ensinou, e vou passar pra vocês hahaha... Vamos lá!

Basta dividir o ano por quatro, e se o resto da divisão for zero, o ano é bissexto. Capicce? :p

Portanto, 2012 é ano bissexto. Seria algo cabalístico? Ano bissexto, fim do mundo haha.

Até pipôu! :P

Backtweets - Descubra quem citou teu blog no twitter

noreply@blogger.com (ciprisla) — Sun, 22 Nov 2009 01:33:00 +0000

Backtweets não serve apenas para descobrir quem mencionou seu blog no twitter, mas achei um serviço interessante pra você saber a quantas anda a popularidade do seu blog na terra dos pios :p Digite a URL e, uma lista é exibida com a relação.

Barra de rolagem em qualquer parte do blog

noreply@blogger.com (ciprisla) — Tue, 17 Nov 2009 20:30:00 +0000

As caixas com barra de rolagem (scroll) são úteis por exemplo, quando disponibilizamos um código muito grande, e assim, economizamos espaço dentro dos posts.
Para colocar o scroll, adicionamos uma linha ao CSS. Com CTRL+F procure por ]]></b:skin e ANTES acrescente o seguinte código:

#scroll {
width:400px;
height:200px;
background-color:#333333;
overflow:auto;
}

Apenas com o código acima, a barra irá aparecer somente se o conteúdo for maior que as medidas adicionadas no template.
Onde: width - largura
height - altura
background-color - cor do fundo
Visualize, e estiver tudo certo, salve o modelo.
Mas para não ficarmos ‘’presos’’ a isso, colocamos o código abaixo, dentro das postagens.

<div id="scroll">
<p>Conteúdo</p>
</div>

Simples, não?
Veja como ficou aqui.

Curso de HTML em vídeo

noreply@blogger.com (ciprisla) — Sat, 24 Oct 2009 15:33:00 +0000

Excelentes aulas de HTML que encontrei no site guanabara.info. São 10 aulas muito bem explicadas pelo Gustavo Guanabara.

(Clique na imagem)

Aproveitem!

Emotions em seu blog

noreply@blogger.com (ciprisla) — Tue, 20 Oct 2009 15:21:00 +0000

Usar emotions é uma maneira de expressar os sentimentos quando as palavras não são suficientes, ou simplesmente usamos como efeito decorativo. Que tal colocar essas carinhas no seu blog? Ou melhor, em seus posts.

Baixe o script e hospede. Aconselho hospedar no dropbox. Lá você tem a opção de baixar o programa ou criar sua conta. Hospede e copie o ''public link'' Pegue esse link e cole onde está marcado de vermelho.

<script src='URL_DO_SCRIPT' type='text/javascript'></script>

Disponibilizo aqui pra vocês ele já hospedado, mas aconselho que vocês mesmos façam isso, pois de repente posso excluir minha conta por lá, e vocês ficariam chupando dedo :p

http://dl.getdropbox.com/u/1915443/addSmiley.txt

ANTES de </body> coloque esse código:

<script language='javascript'>
addSmiley();
</script>

Para evitar que os emotions aparecam com borda ANTES de ]]></b:skin> acrescente:

.post-body img#new {
margin:0px;
padding:0px;
border:none;
}

Visualize e se tudo estiver certo, salve o modelo. Os emotions aparecem depois que toda a página for carregada.

:$:(;):D:):p:o

Visto em : Geekaholic

Twitbuttons - Banner do twitter para seu blog

noreply@blogger.com (ciprisla) — Mon, 19 Oct 2009 16:02:00 +0000

Que tal colocar um banner de '''follow me'' em seu blog? twitbuttons gera um código para esse banner. Apenas coloque seu nome de usuário, escolha entre vários modelos o que mais te agradar, e cole na área destinada ao HTML/java script .Simples assim!

Colorsuckr – Descubra as cores de uma imagem

noreply@blogger.com (ciprisla) — Sat, 17 Oct 2009 21:11:00 +0000

Colorsuckr é simples e útil para saber quais cores contêm em uma imagem. Apenas entre com a URL da imagem e ele gera o código das cores hexadecimal, RGB ou web. E clicando em ''show color schemes'' um esquema de cores associada a cada cor será mostrado.

Bacaninha, não? Aproveitem!

Enviar conteúdo para redes sociais com apenas um botão.

noreply@blogger.com (ciprisla) — Wed, 14 Oct 2009 12:54:00 +0000

Ter botões para que seus leitores enviem suas postagens para as redes socias, é uma ótima maneira de aumentar o tráfego do seu blog. Mas, quanto mais imagens tem o blog, mais ele demora para carregar. E ter um blog pesado não é lá muito interessante. Então que tal gerar um aumento de suas visitas com apenas um botão?

Add This agrupou várias redes sociais em apenas um botão.

1. Selecione o serviço
2. Escolha o estilo do botão
3. Escolha se quer apenas o botão, ou se quer acompanhar o desempenho (precisa se registrar)
4. clique em ''get you button''
Você será rdirecionado para está página:

Se quiser o botão na sidebar (lateral) do blog, cliquem em ''Istall to sidebar''
Particularmete gosto abaixo dos posts, pra isso marque ''Expandir modelos de widgets'' e procure por:

<div class='post-footer-line post-footer-line-3>

<p class='post-footer-line post-footer-line-3'>

Visualize e se tudo estiver correto, salve o modelo.