Imagens de papel de caderno e objetos de escritório

Imagens de folhas de caderno para você usar em seu blog, materias para escritório, canetas, lápis e mais coisinhas legais.
Gostou ? Quer ?
Então clique aqui

»»Leia mais...

Template Customizável 2012

Coloquei vários hacks neste template e ainda algumas variáveis para que se você possa trocar cores, no painel do Blogger com facilidade.
DEMO/PEGAR CÓDIGO
No painel você poderá trocar todas as cores do template
Para habilitar o marcador que se expande, depois de instalar o template procure por
 
home_page = 'AQUI O ENDEREÇO DE SEU BLOG';
E no local em azul, substitua pelo endereço de seu blog

»»Leia mais...

Template Galeria Flip refeito

 DEMO/PEGAR CÓDIGO
Continuando a série de templates refeitos, refiz o template Flip em cima do template Simple, agora com outros hacks, com slide com as últimas postagens automáticas, menu de links horizontais, postagens relacionadas, leia mais...
Depois que tiver instalado o template, procure pelo seguinte trecho:
<div id='menu-social'>
<a href='AQUI O ENDEREÇO DO TWITTER' imageanchor='1'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-1m4In8P0fjLDWtzIcQjXoJ7MFQ5UjYgnjqh6keO_z_t7ZeRVQSoQXVvyS2iqnU4GB_01DudZv9CMLvfphpNi1ReBDHP968MCKwPz62D4VOu8k82KxE7z3g5pU-R5EFkvFWVp4AE1x4HV/s1600/twitter-logo-square-neon-webtreatsetc.png'/></a>
<a href='AQUI O ENDEREÇO DO FEED' imageanchor='1'><img border='0' height='320' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EKhdJchRKtm71I2OTLUX-Zelqad4-soUvqL8nrUK7okpR-pg0KHQcMLmTZt6TqtgiXBs0NfNn9ldH1uJt_vf0UgdfoFDa9D3-nlZbc-o6pklyJDkweAgPbFudfTm2Gyk2JKcV6OsvlBS/s320/rss-cube-neon-webtreatsetc.png' width='320'/></a>
<a href='AQUI O ENDEREÇO DO FACEBOOK' imageanchor='1'><img border='0' height='320' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZMOT7DZsVn6XFC70XQGDz0GDfz8G1Fl4k1NQVnq34q5YHvveUrciydo7B4fdEWR8pNO6nQh_32bQWNCq1JP8-3nB_WiRPI0lwR2EaFKlx4QyREPryLqAhWnioFV6TqPQUrQSOpDnQAKl/s320/facebook-logo-square-neon-webtreatsetc.png' width='320'/></a>
<a href='MAILTO: AQUI O ENDEREÇO DO EMAIL' imageanchor='1'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUrp2Byl8NQv5z3rDdwsl7eEm91qlCujh6ukE_iXHksYLIro0IODQKg7XDTqEqys7ilTsUyHTlkTudAVH-3kVmFXQvLkP3KZGRuKXcSOcpI8kGn2OBe0q5H5OQr_G-jmxlEXLFw4eoxfs/s1600/mail-square-neon-webtreatsetc.png'/></a>
</div>
Link então os endereços de suas páginas sociais.

»»Leia mais...

Widget de menu horizontal no novo Blogger

 
DEMO 
O primeiro lugar em que vi essa dica foi mo Templates Novo Blogger da Ariane. A nossa festejadablogueira sempre nos brindava com hacks maravilhosos e sempre deixava a blogosfera em polvorosa com dicas exclusivas. Hey Ariane, volte filha, todos nos agradeceremos, venha nos ajudar a desvendar estes novos códigos do Blogger. ;-)
O que fiz foi refazer o código vinculando aos códigos do menu de páginas.  Mas atenção, este hack é para quem usa o template Simple ou algum dos novos templates do Blogger.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por: ]]></b:skin>  
Acima dele, cole o código abaixo:
/*Menu horizontal-------------------------------------------------------------------------------*/
#links ul {
display: inline;
float: left;
width:100%;
clear:both;
 background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
#links li {
float:left;
  display: inline-block;
  padding: .6em 1em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
#links selected a, #links  a:hover {
  color: $(tabs.selected.text.color);
  padding: .6em 1em;
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
 Procure agora por:
  <div class='header-cap-top cap-top'>
Abaixo dele cole o próximo código
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='links' id='links' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>
Salve.
Agora para usar o menu, vá até o layout de seu blog

»»Leia mais...

Não deixar que vídeos do You Tube saiam do post

Conforme publiquei no post anterior, onde ensino a inserir código que não deixa as imagens sairem do post, agora eis aqui um código para não deixar que vídeos do You Tube saiam do post.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por: ]]></b:skin>  
Acima dele cole este código abaixo:
.post-body iframe{
max-width:98%;
 padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

»»Leia mais...

Imagens passam da área dos posts, como resolver ?

O template Simples do Blogger vem com um probleminha que acho detestável: as imagens ultrapassam a área da postagem. Mas resolver isso é bem simples. Basta copiar o código abaixo e cola-lo acima de em seu blog
Vá até o "Modelo de seu blog", clique em "Editar HTML"
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por: ]]></b:skin>  
Cole então este próximo código acima dele.
.post-body img{
max-width:98%;  
line-height: 1.4;
position: relative;

»»Leia mais...

Breadcrumb no novo Blogger

DEMO

»»Leia mais...

Metatags no novo Blogger

Quando seu blog for indexado será a mensagem de sua meta tag que aparecerá nos motores de busca
Não é mais necessário, a algum tempo bem verdade,  inserir códigos para meta tags através do HTML do Blogger como fazíamos a um tempo atrás, agora o Blogger disponibiliza em suas configurações local específico para este fim. Mas para que serve isso ? Serve para fazer um breve resumo para que os motores de busca encontre seu blog com facilidade, portanto, vale muito a pena.
Para isso, siga as imagens e instale em seu blog essa ferramenta.

»»Leia mais...

Template TV refeito

Me escreveram pedindo o link deste template que já não é mais encontrado. Antigamente eu hospedava os códigos no Live Spaces que foi tirado do ar. Aí, acabei refazendo todo o template, com os novos códigos. E então, há neste blog algum template que você gostaria que eu refizesse ?
DEMO/PEGAR CÓDIGO
Para ativar o menu horizontal
Depois de instalado o template, clique em "F3" em seu teclado e ao abrir, cole este código abaixo. Depois dele há indicações para colocar o endereço dos links que quiser.
<!-- FAÇA ABAIXO AS MODIFICAÇÕES PARA SEU MENU HORIZONTAL-->
Salve. Agora clique em Layout
Clique em Adicionar um Gadget
Copie então o código abaixo e cole na janela que vai abrir,  depois coloque o endereço de seu blog no local indicado.
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 316; //image height
 var image_width = 408;  //image width
</script>
<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

»»Leia mais...

O racismo, machismo e demais "ismos" na sociedade brasileira

Você ri disso ? Se ri, procure ajuda imediatamente. 

»»Leia mais...

Colocar menu em cima ou embaixo do cabeçalho do Blogger

Como o Blogger resolveu mudar tudo, refaço este tutorial a pedidos. Serve para colocar um menu horizontal para linkar qualquer coisa que quiser.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:   ]]></b:skin>  
Acima deste código cole:
/*Menu--------------------------------------------------------------------------*/
#navcontainer{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
ul#navlist{
height: 20px;
list-style: none;
padding: 4px;
margin: 0 auto;
width:95%;
font-size: 0.8em;
ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2px 1px;
ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 3px;
border-color: #ccc #cccc #ccc #fff;
border-style: groove;
color: #000;
text-decoration: none;
background: #eee;
#navcontainer>ul#navlist li a {
font-size: 12px;
width: auto;
 padding: 10px 3px;
 }
ul#navlist li#active a{
background: #ccc;
color: #800000;
ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
Agora se você quer o menu acima do cabeçalho, procure por:
<header>
E cole o código abaixo ACIMA dele
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
 </ul>
</div>
Se o que você quer é o menu ABAIXO do cabeçalho, procure por:
E cole o código abaixo, depois dele
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
 </ul>
</div>

»»Leia mais...