Melhore o tempo de carregamento de seu Blogger com Lazy Load

Para quem usa muitas imagens nos posts de seu blog já deve ter percebido que essas causam demora para o carregamento do blog. O blog fica mais pesado, dificultando em parte o rápido acesso de seu leitor a suas páginas. Um bom truque para amenizar o problema seria usar um script para dar leveza e um bonito efeito a seu blog. Veja AQUI a demo. Para instalar em seu blog, siga a dica.



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

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

Procure por </body>

Acima dele, cole o código abaixo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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($){
$('img').lazyload({
effect:'fadeIn',
placeholder:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtz8GFFNroAh8_rQpXnNeo_caofVhoBcmYV0ODIc2v1L38EbVky7-wwTdmQUidon1uPrLOyesWNacg9MQahuQywihvTilLX5f_2VEmE_dgkoxVa4hf8GjAoC08oN4WInp0Uru2_UNc3Q/s1/gris.gif'
});
});
//]]>
</script>

»»Leia mais...

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

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




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.

Efeito mostrar background com listras               

.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{
width:auto;
border: dashed 4px #ff73da;
-webkit-transform: rotatex(-360deg);
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

Efeito transitório para dentro                                            

.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{
           width:auto;
          -webkit-transform: rotateY(-360deg);
          -webkit-transition-duration: 1.00s;
          -moz-transition-duration: 1.00s;
          transition-duration: 1.00s}

Efeito giro 360º                                                       

.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{
-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Efeito zoom                                                             

.post-body:hover img  {
          -webkit-transform: scale(1.5);
          webkit-transform-origin: 50% 50%;
          -o-transform: scale(1.5);
          -o-transform-origin: 50% 50% 0;
          transform: scale(1.5);
          transform-origin: 50% 50% 0;
        }

Efeito Preto e branco                                             

.post-body img {-webkit-transition-duration: .90s;}
.post-body img:hover{-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}

Efeito sépia                                                             

.post-body img {-webkit-transition-duration: .90s;}
.post-body img:hover{-webkit-transition-duration: .90s;
-webkit-filter: sepia(100%);}

Efeito arco-íris                                                        

.post-body img{
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear
}

.post-body img:hover{
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0}

Efeito arredondar margens imagem                                  

.post-body img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post-body img:hover {
-webkit-transition-duration: .50s;
border-radius: 260px 260px 260px 260px;
}

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

»»Leia mais...

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.

»»Leia mais...

Botões sociais para compartilhar imagens no blog

DEMO

Que tal botões sociais sobre suas fotos do Blogger para que compartilhem suas fofurinhas ? É isto que esse código se propõem a fazer e faz elegantemente com  as imagens de seu blog. Prático e muito fácil.

Clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código. Salve !

<script type="text/javascript" src="http://files.markerly.com/markerly-cdn.js#pub_id=ma-514b6dbc2cafd"></script>

Créditos: http://markerly.com/

»»Leia mais...

Efeito de círculo nas imagens do Blogger com CSS

 DEMO

Um efeito interessante este de deixar as imagens arredondas no Blogger ao passar o mouse. Pode dar uma bossa a mais a seu blog.

Acima dele, cole o código abaixo:

/*Efeito hover imagens-----------------------------------------------------------------*/
.post-body img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post-body img:hover {
-webkit-transition-duration: .50s;
border-radius: 260px 260px 260px 260px;
}

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

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

Montagem com imagens vintage

Aproveitando o link dos blogs que coloquei nas últimas postagens, fiz essa montagem no Paint Shop Pro e no Photofiltre O que acharam ? Querem aprender ?

Original

»»Leia mais...

Imagens vintage

Para quem gosta de imagens vintage, encontrei, nas minhas horas, e hooooooooooooooras de navegação na rede um blog com imagens lindas e de alta qualidade. Você pode usa-las em seu blog, imprimir para usar em peças de decoração, fazer camisetas, toalhas, papel de carta, mandar para um amigo, postar no Facebook, papel de parede do celular, do PC do notebook, botom, adesivo...

Mas "mininu", é tanta utilidade para as imagens que estou navegando por lá a mais de hora...

Então clique AQUI e dê uma olhadinha (se é que for possível dar só uma olhadinha)

»»Leia mais...

Imagens que invadem as colunas do Blogger. Como resolver

Se você usa o novo modelo do Blogger já deve ter notado que quando se usa imagens em tamanho original ou imagens muito grandes essas mesmas imagens acabam por invadir as colunas. Isso pode ser resolvido.



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

  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:

img {
max-width: 98%;
height: auto;
width: auto\9; /* ie8 */
}

Salve

»»Leia mais...

Colocar apresentação de power point no Blogger

Hoje vou ensinar como colocar uma apresentação de Power Point nas páginas do Blogger. É necessário que hospede o dito cujo em um site que aceite esse formato. Indico o site Slide Share

A aparência será como esta abaixo

O melhor presente

View more presentations from elainebucci

A primeira coisa a fazer, é obvio, é entrar no site. Clique AQUI para entrar.
Agor é necessário fazer um cadastro, gratuito.

Preencha o formulário conforme o modelo abaixo.

Clique agora em UPLOAD

Abrirá uma janela com o browser de seu computador. Procure onde está seu arquivo PPS

Agora aguarde até fazer o upload

Pronto ! Agora clique no botão SHARE, copie o código e...

Cole em seu editor de postagem no modo HTML. Dê um título e publique.

»»Leia mais...

Desabilitar o ligthbox no Blogger

Se você não gosta, desabilite o ligthbox

Se você não gosta dessa maneira de mostrar as imagens em seu blog, é bem fácil desabilitar o lightbox,  sem necessidade de códigos.
Veja a imagem abaixo e siga o exemplo.

 Vá em "Configurações" clique em "Postagens e comentários". Clique então na setinha de "SIM" que está a frente de "Showcase images with Lightbox", selecione "Não e salve.

»»Leia mais...