20 maio 2013

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.

Salve !

Procure por

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

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

Substituir comentários do Blogger pelo sistema do Facebook

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"

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

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

Templates Acessorios | 01:22 | Postagens Populares | Widget Comente primeiro !

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.

19 maio 2013

Ícone social com comics

Templates Acessorios | 19 maio 2013 12:10 | Icons Comente primeiro !

Donwload

Um pacote muito fofo com ícones sociais, ideal para blogs de crianças e adolescentes.

Formulário de contato nativo no Blogger

Templates Acessorios | 01:00 | Widget Comente primeiro !

Finalmente o Blogger lançou o formulário de contato para o Blogger. Muito fácil de habilitar, vai facilitar bastante para seu leitor/visitante. Para isto, basta ir até o layout de seu blog.

Clique em Adicionar um Gadget

Ao abrir, clique em Mais gadgets

Ao abrir, basta então adicionar o gadget.

18 maio 2013

Template Candied Fofinho

Templates Acessorios | 18 maio 2013 04:55 | Templates | Templates Cute Comente primeiro !

DEMO/Pegar código

Template fofinho ideal para blog de bebes ou gestantes. Hacks variados como menu em lista e grade, área de créditos com menu social, códigos em css, colunas extras abaixo da área de postagem, menu de páginas costumizado.

Habilitar o menu social

Procure por:

<div id='creditos'>

Abaixo dele você verá os códigos do menu. Troque então nos locais indicados pelo endereço de suas páginas sociais.

buscador