Postagens Recentes

27 de out de 2012

Imagens de papel de caderno e objetos de escritório

Nenhum comentá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

24 de out de 2012

Template Customizável 2012

12 comentários:


Coloquei vários hacks neste template e ainda algumas variáveis para que se você possa trocar cores, no painel do Blogger com facilidade.





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

23 de out de 2012

Template Galeria Flip refeito

4 comentários:


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://lh6.googleusercontent.com/-Q92DTyhNWuA/TYJkkHd7ZQI/AAAAAAAAAOk/REmV153aTPs/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://lh3.googleusercontent.com/-SjpdJW0zkHA/TYJkmzmBQ3I/AAAAAAAAAOo/EgaTT6T0aWM/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://lh6.googleusercontent.com/-ize6ZcmRMac/TYJkqnVFIAI/AAAAAAAAAOs/b2khuDlDLvo/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://lh4.googleusercontent.com/-ZNOoPMF82mc/TYJktYOcEbI/AAAAAAAAAOw/1CMP9alJCxU/s1600/mail-square-neon-webtreatsetc.png'/></a>
</div>


Link então os endereços de suas páginas sociais.

Widget de menu horizontal no novo Blogger

7 comentários:
 
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






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

Nenhum comentário:



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);
}

Imagens passam da área dos posts, como resolver ?

3 comentários:



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;
}

22 de out de 2012

Breadcrumb no novo Blogger

Um comentário:
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='http://4.bp.blogspot.com/-XTKKS-6yW2I/UIS5rjkzZLI/AAAAAAAADQQ/8hS8aEHqER4/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='http://4.bp.blogspot.com/-1SobmFLvoNA/UIS5sux4wAI/AAAAAAAADQY/pCXf3Y5Eq14/s1600/tag.gif'/>
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             &#187;    <span><img src='http://4.bp.blogspot.com/--anvHj0ZlKI/UIS6XC26etI/AAAAAAAADQg/N264iwUxKuE/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='http://4.bp.blogspot.com/-XTKKS-6yW2I/UIS5rjkzZLI/AAAAAAAADQQ/8hS8aEHqER4/s1600/home.gif'/> Início</a> &#187; Posts com marcador: <img src='http://4.bp.blogspot.com/-1SobmFLvoNA/UIS5sux4wAI/AAAAAAAADQY/pCXf3Y5Eq14/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.


15 de out de 2012

Metatags no novo Blogger

2 comentários:

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.






12 de out de 2012

Template TV refeito

7 comentários:


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 ?




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>


10 de out de 2012

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

Nenhum comentário:
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.







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.


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

Nenhum comentário:


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>



Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube