terça-feira, 5 de julho de 2016

Efeito Loading Blogger kang Ismet

kang-ismet-loading-blogger-effect

Para ver o demo clique no link e apos clique nos post do blog Demo 


Hoje vamos apresentar o efeito loading blogger de kang ismet isso traz um efeito profissional de carregamento de transição quando acessamos uma determinada pagina de um post  então para adicionar isso siga os passos abaixo:


Adicionando Efeito Loading Blogger Kang Ismet.

Faça login no Painel do blogger então
va em modelo >> Editar HTML/JavaScript com as teclas combinadas CTRL+F busque por
</style> ou ]]></b:skin>  e cole o código antes disso.

#page-loader {
   position:fixed !important;
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:999999;
   background: #303030 url("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%;
   padding:1em 1.2em;
   display:none
   }

Então verifique se seu Blogger ja possui Jquery caso não possua adicione o Jquery Acima de </head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Agora procure po </body> e acima disso copie e cole o código.

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Salve e pronto  agora quando alguém visitar algum post isso vai aparecer o efeito.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner