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

Este hack é excelente para seu leitor ter acesso aos outros posts de seu blog. Refiz todo o código, para quem usa o template Simple, portanto, se não o usa, nem comece a implementar os códigos pois não dará certo. Vinculei o estilo ao menu de páginas, portanto, os dois terão o mesmo estilo.



Vá até o "Modelo de seu blog", clique em "Editar HTML"

 Hack atualizado para modelos implementados em 2013

Agora vamos clicar em "Ir para um widget" e depois clicar em Blog1

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte clicando na pequena seta, como mostra a imagem abaixo:



<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>...</b:widget>

Procure então por:

 <b:if cond='data:mobile == &quot;false&quot;'>

Observe que um pouco abaixo, haverá um código como esse abaixo.




    <!-- posts -->
    <div class='blog-posts hfeed'>



Troque-o por:

    <!-- posts -->
    <div class='blog-posts hfeed'>

 <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

     

Agora procure por:



    <data:top.dummyBootstrap/>
  

Observe que abaixo dele há o seguinte trecho:

 </b:if>

</b:includable>

 O que você deverá fazer é apagar este trecho todo e depois colar o código abaixo:

<data:top.dummyBootstrap/>
  </b:if>

</b:includable>
 <b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- No breadcrumb on front page -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div class='breadcrumbs'>
         Menu &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início </a>
        <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'>
             <b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/>
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             &#187;    <span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYTNA5vEzmBIZodS6eeJyDnOpmhUIfwT8aLe6s9Ukt3gEZU5eWTiRzYtRW0fe88FrigyXaxTx1HoFpKOD_SU-EdDBzXYHPFf5bVCR7Mqx3l-rFFYBM_jLUMgrwqryEgdqxvHFyZ9YaHjv/s1600/arrow_fat_down.gif'/>  <data:post.title/></span>
           </b:if>
         </b:loop>
       </div>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'>
         Menu &#187;   <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
        </div>
      <b:else/>

        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Menu &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Menu &#187; <a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início</a> &#187; Posts com marcador: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/> <data:blog.pageName/>
          </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Salve. Agora vamos das  estilo ao menu breadcrumb






Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Breadcrumbs-------------------------------*/

.breadcrumbs {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  border: $(header.bottom.border.size) solid $(tabs.border.color);
 font-size: 14px;
 padding:5px;
 font-weight: bold;
 line-height: 1.4em;
 margin: 2px 1px;
}


.breadcrumbs select a, .breadcrumbs  a:hover {
 color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  font-weight: bold;
  color:$(body.text.color);
  padding:5px;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»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. 

Vou ter que sair drasticamente do assunto deste blog e escrever sobre coisas nojentas que acontecem no mundo, especialmente na internet, onde se confirma dia a dia como as pessoas se sentem a vontade para por cá, revelarem suas verdadeiras faces, sem pudor algum, mostrando a lama que de fato são.

Que acontecem pela falta de valores, de humanidade e vergonha na cara de boa parte de pessoas que se julgam melhores que as outras, seja por qual razão for: social, racial, religiosa, de gênero...

Ao abrir meu Twitter me deparei com uma mensagem onde havia um link para um post do Blogger onde, um conhecido humorista (?), o mesmo que já ofendeu mulheres ao escrever que "Mulher feia tem que agradecer se for estuprada", perguntou a um militante negro se ele queria bananas. O pior, se é que pode ser pior, são dezenas de prints onde o inominável (me recuso a escrever o nome do protofascista-humorista-de-alcova) recebe não só apoio como vários de seus seguidores continuam com o racismo sórdido.

Vejam a nojeira escandalosa aqui.

Isso é ser artista ?

 Humorista ? 

Famoso ? 

Celebridade ?

 Até quando o inominável vai sambar na cara da justiça brasileira ? Eu  sei exatamente o que anda acontecendo com a nossa sociedade que tem regredido, tornado público, com o advento da internet, seus preconceitos mais imorais. A mídia  e a televisão tem feito aflorar sentimentos negativos, ódios gratuitos ao pregar em suas novelas e noticiários que há privilegiados, e que é melhor para você, fazer parte dessa panela ou estará condenado a ser chacota. 

Não há um capítulo da novela das 20:00hs da Rede Globo onde a mulher, qualquer delas, seja xingada de vagabunda, piranha, vadia e por aí vai. A bola da vez agora, é a atriz Eliane Jardine, sendo sempre "xingada" de velha, como se envelhecer depusesse contra a mulher. Depois, essa mesma mídia sem-vergonha passa outro programa, com o oferecimento de algum anunciante, onde fingem se indignar com a falta de civilidade com que os idosos de seu país são tratados. Mas não se esqueça, quem deu a senha foi a mesma, alí, subliminarmente, ou nem tanto, em seus programas diários de entretenimento. 

Negros nas tais novelas,  só da copa para trás, fazendo papel de serviçal da casa grande ou então em papel de bandido. Isso é mostrar, mui "claramente",  a maioria da população brasileira, qual é o lugar daqueles que possuem um pouco mais de melanina. 

Programas de "humor" inteiros, do início ao fim vomitando preconceito onde as mulheres são as principais vítimas. Sim, vítimas sim, são reduzidas a ser bunda, vagina e seio em tais programas, esculachadas do início ao fim, reduzidas a objeto masturbatório-sexual. Até quando ? 

Homossexuais sempre caricaturesco, fúteis,  a margem da sociedade.

Precisar ter uma lei para coibir o racismo, outra para coibir a violência contra a mulher, outra para assegurar aos homossexuais o direito a gozar de cidadania plena,  já aponta bem o tipo de sociedade em que vivemos: do individualismo, egocentrismo, autoritarismo social e violência gratuita, tudo isso, sem que percebamos, valores passados há décadas pelos folhetins globais, pelos enlatados do norte e pelas manchetinhas das revistinhas semanais, tudo bem "inha".

 Fico me perguntando onde está o bom senso, nem pergunto por justiça pois essa, já deu-nos uma resposta dura essa semana ao rasgar a constituição brasileira e, condenar sem provas um réu no processo 470, vulgo Mensalão. Isso tudo que se desenha é muito perigoso, abre precedentes, estão com a caixa de Pandora entre aberta, você pode até rir ou achar isso tudo engraçado mas perceba, amanhã pode ser você o motivo do riso e escarnio. Deixo aqui, um texto de Bertold Brecht para a reflexão, e, para quem gosta de se informar, um vídeo de como somos treinados para a discriminação, a opressão e os preconceitos.  .

Primeiro levaram os negros

Mas não me importei com isso

Eu não era negro

Em seguida levaram alguns operários

Mas não me importei com isso

Eu também não era operário

Depois prenderam os miseráveis

Mas não me importei com isso

Porque eu não sou miserável

Depois agarraram uns desempregados

Mas como tenho meu emprego

Também não me importei

Agora estão me levando

Mas já é tarde.

Como eu não me importei com ninguém

Ninguém se importa comigo.

»»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...