Efeito hover com CSS- imagens com efeito vintage

Com esse código é possível fazer um efeito interessante nas imagens dos posts ao se passar o mouse em cima.



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.

.post-body img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post-body img:hover{
-webkit-filter:  sepia(1) blur(1px);
-moz-filter: sepia(1) blur(1px);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

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

Blogroll de ajuda

Aqui estão listados para vocês, os melhores blogs de ajuda, os famosos "metablogs", e blogs de templates gratuitos, os não menos famosos "templates free" para a plataforma Blogger. Esse post será sempre atualizado tanto para inserir quanto para deletar links. Se o seu blog é sobre templates grátis e blog de ajuda, pode enviar-me um e-mail solicitando a integração nessa lista, claro que seu blog deverá ter um bom layout e conteúdo. Para isso, basta escrever no título da mensagem:  "Quero ter meu blog avaliado para lista de metablogs." templateseacessorios2@gmail.com




 Blogs em português                                                               

1. Templates Novo Blogger
2. Dicas Blogger
3. Templates Para Você

Blogs em inglês                                                                       

1. Spice up Your Blog
2. All Blogger Tricks
3. My Blogger Tricks
4. Abu Farhan
5. Tips and Tricks

Blogs em espanhol                                                                  

1. La Blogueria
2. Olo Blogger
3. Pizcos
4. Ayuda Blogger
5. Ciudad Blogger
6. Vagabundia
7. Comportadíssimo
8. Kseso CSS

Blogs de templates grátis                                        

1. Mostruário Templates
2. Blogger Templates
3. Deluxe Templates
4. Ufo Templates
5. Ray Templates
6. Premium Blogger Templates
7. Blogger Themes
8. Blogger Styles
9. All  Blogger Tolls
10. Ultimate Blogger Tricks
11. Sora Templates

Menu horizontal lavalamp com CSS

DEMO

Um menu podee ser muito útil para seu blog, conforme já afirmei aqui inúmeras vezes. Mas além de útil é necessário empregar a ele outras qualidades como beleza, facilidade de navegação, integração com o layout de seu blog e leveza. É possível fazer um menu com um bonito efeito hover somente com CSS.



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

  Hack para o template do Blogger, implementado em  abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por <header>

Efeito traço                                                                                

Acima  dele, cole o próximo código:

 <div class="ph-line-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Efeito bolinha                                                                            

<div class="ph-dot-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Efeito coração                                                                            

<div class="ph-heart-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

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.

/* --- for all three examples ----*/

.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 480px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
        float: left;
        padding: 1em 0 2em;
    width: 25%;
        text-decoration: none;
      color: #393939;
      -webkit-transition: .7s;
      -moz-transition: .7s;
      -o-transition: .7s;
      -ms-transition: .7s;
      transition: .7s; }
      .nav a:hover {
        color: #c6342e; }

.effect {
    position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

    .nav a:nth-child(1):hover ~ .effect {
      left: 12.5%; }
    .nav a:nth-child(2):hover ~ .effect {
      left: 37.5%; }
    .nav a:nth-child(3):hover ~ .effect {
      left: 62.5%; }
    .nav a:nth-child(4):hover ~ .effect {
      left: 87.5%; }

/* ----- line example -----*/

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white;
  margin-left:-45px;
}

/* ----- dot example -----*/

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 38px;
  left: 50%;
  margin-left: -2px;
  background: #c6342e;
  border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px;
    margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }

/* ----- heart example -----*/

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('http://2.bp.blogspot.com/-vNDnhdTUg1w/USZo6Q-P5KI/AAAAAAAAYdk/fMkYbGPjVpY/s1600/heart.png') no-repeat; }
.ph-heart-nav .effect {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px;
  margin-left:-31px; }

.ph-heart-nav a:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.ph-heart-nav a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  background-position: -73px 0;
  height: 20px;
  width: 11px; }

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

Créditos: CSS Box

Usar os comentários do Facebook e do Blogger no blog

Depois de tantos comentários e pedidos a respeito desta tutorial, resolvi refazê-la. Sei que deveria ter feito isso antes, mas vou me agarrar naquele velho ditado: "Antes tarde do que nunca"


O Facebook fez alterações em seus códigos, assim como o Blogger na estrutura de seu HTML, por isso o antigo hack já não funcionava mais, mas aí está, toda a tutorial reformulada, em 2013 para o novo editor do Blogger...


É necessário abrir o Facebook e fazer o login. Depois, clique neste link:

https://developers.facebook.com/apps


Você irá criar um aplicativo para seu blog, por isso atenção !


Clique no botão " + Criar Novo Aplicativo"

Agora  abrirá uma janela...

Preencha as caixas  como no modelo, depois clique em "Continuar". Perceba no entanto, que deverá aparecer a inscrição "Correto" e "Avaliable", ou não dará certo.

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Ao abrir o editor, dê um clique em cima do painel. Clique então nas teclas CTRL + F. Abrirá uma pequena janelinha. Procure então por



<head>

E abaixo dele cole este próximo código, colocando no local que se pede o número do aplicativo do Facebook.

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='AQUI O NÚMERO DO APLICATIVO DO FACEBOOK' property='fb:admins'/>

Salve !

Procure por

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

Imediatamente abaixo do código   cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='560'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'/>

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.

Substituir comentários do Blogger pelo sistema do Facebook

Depois de tantos comentários e pedidos a respeito desta tutorial, resolvi refazê-la. Sei que deveria ter feito isso antes, mas vou me agarrar naquele velho ditado: "Antes tarde do que nunca"


O Facebook fez alterações em seus códigos, assim como o Blogger na estrutura de seu HTML, por isso o antigo hack já não funcionava mais, mas aí está, toda a tutorial reformulada, em 2013 para o novo editor do Blogger...


É necessário abrir o Facebook e fazer o login. Depois, clique neste link:

https://developers.facebook.com/apps


Você irá criar um aplicativo para seu blog, por isso atenção !


Clique no botão " + Criar Novo Aplicativo"

Agora  abrirá uma janela...

Preencha as caixas  como no modelo, depois clique em "Continuar". Perceba no entanto, que deverá aparecer a inscrição "Correto" e "Avaliable", ou não dará certo.

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Ao abrir o editor, dê um clique em cima do painel. Clique então nas teclas CTRL + F. Abrirá uma pequena janelinha. Procure então por



<head>


E abaixo dele cole este próximo código, colocando no local que se pede o número do aplicativo do Facebook.

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='AQUI O NÚMERO DO APLICATIVO DO FACEBOOK' property='fb:admins'/>

Salve !

Clique então em Ir para um widget e depois clique em Blog1

Agora clique na setinha que tem ao lado para abrir a tag.

Procure por


  <b:includable id='comments' var='post'>


Clique então na pequena setinha que tem ao lado para abrir a tag.

 

Imediatamente abaixo do código  <b:includable id='comments' var='post'>   cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='560'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'/>

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.


Possivelmente você não estará vendo a caixa do Facebook, isso é porque ainda não ocultou os comentários do Blogger. Proceda então da seguinte forma:


Clique em Configurações, depois em Postagens e comentários, clique então na pequena setinha na caixa que está a frente de Local de comentários, ao abrir a janela, clique em Ocultar e depois em Salvar configurações.

Widget de postagens populares personalizada com efeito no título

Mais uma maneira de personalizar widget de postagens populares. Com este código CSS é possível deixar apenas as imagens do post e colocar os títulos com efeito.





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, modificando se quiser o número grifado em rosa para aumentar ou diminuir o comprimento do widget.

/*Postagens populares----------------------------------------*/
.popular-posts {margin-top:10px;}
.popular-posts ul {width: 340px; margin: 0 auto; text-align:center;}
.popular-posts .item-snippet{display: none;}
.popular-posts ul li {position:relative; float:left; list-style-type: none; padding: 0 0 0 5px ;}
.popular-posts ul li a {text-decoration:none; color: #000;}
.popular-posts li img {background: #666666; padding: 2px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;
transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;}
.popular-posts li img:hover {filter:alpha(opacity=60); -moz-opacity:.6; -webkit-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6;}
.popular-posts li .item-title a {z-index:1; width: 150px; height: auto; line-height: 16px; padding: 5px; font-style: italic; font-size: 14px; text-decoration:none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 2px solid #D6BF8E; background: #eeeeee; background: rgba(255,255,255,0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 5px; pointer-events: none; position: absolute; left: 50%; margin-left: -75px; bottom:190px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity:0;-o-opacity:0;-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.popular-posts li:hover .item-title a {bottom:80px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;}

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