Templates e Acessórios: maio 2013

Postagens Recentes

Grade Lista

31 de mai. de 2013

Ícones sociais vintage

. Elke di Barros | 23:09 Nenhum comentário:

Lindos ícones sociais vintage. Download

»»Leia mais...

30 de mai. de 2013

Efeito hover nas imagens com CSS - efeitos de rotação

. Elke di Barros | 18:08 Um comentário:

Use estes códigos para dar efeitos legais para as imagens de seu blog usando apenas CSS.

»»Leia mais...

29 de mai. de 2013

Imagens que carregam a medida que rola o Blogger

. Elke di Barros | 04:21 Um comentário:

Com este código onde as imagens vão sendo carregadas a medida que rola o Blogger, além de um efeito bacana, o blog carrega com mais rapidez.
Vá até o editor do seu blog.
Procure por </head> (Dê um clique com o mouse em cima do editor, assim que abrir a pequema janela, clique ao mesmo tempo na tecla Ctrl e F)
Acima dele cole este próximo código. (se você já possui ajax em seu blog, basta retirar o código grifado em laranja.)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);
$(document).ready(function($){
$('.post img').lazyload({
effect:'fadeIn',
placeholder:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtShs2TwBZQMK0WQ1pKPiqqUjkWH8jL_yfQBJJFPt2IE2ochJB6M-nLDjmmSlpx8EZmfdSWOfe1xf-dolyJ9szP75b8nn2Zx1OfbXBmRNI7AY548raRQmDK6BCxJ9NK5tP_Vnv_CnuEE/s1/bg_placeholder.png'
//]]>
</script>

»»Leia mais...

28 de mai. de 2013

Menu navegação em flash para o novo Blogger

. Elke di Barros | 03:36 4 comentários:

O Cláudio Sanches do Ferramentas Blog desenvolveu este plugin para o Wordpress e o pessoal do Dicas Frenetizadas adaptou-o para o Blogger. Como a dica do blog do Dicas Frenetizadas está para o antigo Blogger, trouxe a dica adaptada para o novo Blogger, implementado em julho de 2010. (usei o template Simples)

»»Leia mais...

27 de mai. de 2013

Colocar nuvens flutuando no cabeçalho do Blogger

. Elke di Barros | 20:59 5 comentários:

DEMO
Efeitos fofinhos que deixam o blog totalmente exclusivos são sempre bem-vindos, não é mesmo ? Vejam este efeito de nuvens passando pelo cabeçalho, e que na verdade, você poderá colocar por todo o blog.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
Hack para o template do Blogger, implementado em abril de 2013.
Abaixo dele cole este próximo código.(se quiser modificar a imagem, mude os endereços que estão grifados com a cor rosa pelo endereço da nuvem de sua preferência.)
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<div id='wrapper'>
<div id='content'>
<div id='cloud1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXURFQodsXHp0l9t_KG5V1i5zLxvPvEpMZ_JFNgKMIHrd9FjbcgO8AaudVIaIIZfSxp4jo7RTJyLtdsiHy1QrL-OKNaYceVFdpq07e-T3ZWoU46xsU4yroONdJEDwF_z0y_pylNqEG3Eo/s1600/nuvem+2.png'/></div>
<div id='cloud2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GTCaOAJ-PzSG06M9MCuapr9uLAEx8vJZ2zwNy6qwXNpPnvaUBIkcw6ZKQzVX2e2QtxCPmYEuSavYJm1K1R1-rUWnFV0sbjCgh7Yk_eE6OMWydkIm-zw7I3k_S_4u7RoDPcaOSxw3Wc/s1600/nuvem+1.png'/></div>
<div id='cloud3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXURFQodsXHp0l9t_KG5V1i5zLxvPvEpMZ_JFNgKMIHrd9FjbcgO8AaudVIaIIZfSxp4jo7RTJyLtdsiHy1QrL-OKNaYceVFdpq07e-T3ZWoU46xsU4yroONdJEDwF_z0y_pylNqEG3Eo/s1600/nuvem+2.png'/></div>
<div id='cloud4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GTCaOAJ-PzSG06M9MCuapr9uLAEx8vJZ2zwNy6qwXNpPnvaUBIkcw6ZKQzVX2e2QtxCPmYEuSavYJm1K1R1-rUWnFV0sbjCgh7Yk_eE6OMWydkIm-zw7I3k_S_4u7RoDPcaOSxw3Wc/s1600/nuvem+1.png'/></div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
setTimeout("animation()",300);
function animation(){
cloud1();
cloud2();
cloud3();
cloud4();
function cloud1(){
$("#cloud1").animate({left:"+=80%"},50000).animate({left:"-0px"}, 0)
setTimeout("cloud1()",30000);
function cloud2(){
$("#cloud2").animate({left:"+=70%"},40000).animate({left:"-0px"}, 0)
setTimeout("cloud2()",20000);
function cloud3(){
$("#cloud3").animate({left:"+=70%"},60000).animate({left:"-0px"}, 0)
setTimeout("cloud3()",20000);
function cloud4(){
$("#cloud4").animate({left:"+=70%"},75000).animate({left:"-0px"}, 0)
setTimeout("cloud4()",75000);
</script>
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. (para separar as nuvens e mudar a posição, modifique os códigos grifados em azul)
/*Nuvens do cabeçalho-----------------------------------------------------------*/
#cloud1{ position:absolute; top:2px; left: 0px; z-index:10; }
#cloud2{ position:absolute; top:80px; left: 0px; z-index:10; }
#cloud3{ position:absolute; top:150px; left: 0px; z-index:10; }
#cloud4{ position:absolute; top:220px; left: 0px; z-index:10; }
Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.
Outras imagens de nuvens

»»Leia mais...

Efeito de desenho e pintura nas suas fotos online

. Elke di Barros | 04:44 Nenhum comentário:

Para gosta de desenhos, e de quebra transformar fotos em desenhos, venho compartilhar com vocês um excelente site que cumpre esta função com boa qualidade e variados efeitos o Be Funky
Efeitos
Há outro site que oferece este tipo de serviço, mas desta vez um efeito de desenho a lápis.
Link aqui

»»Leia mais...

22 de mai. de 2013

Efeito hover com CSS- imagens com efeito vintage

. Elke di Barros | 02:46 2 comentários:

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.

»»Leia mais...

21 de mai. de 2013

Menu horizontal lavalamp com CSS

. Elke di Barros | 17:12 Um comentário:

DEMO

»»Leia mais...

20 de mai. de 2013

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

. Elke di Barros | 02:32 7 comentários:

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 == "item"'>
<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.

»»Leia mais...