Se o seu blog tem conteúdo e já atrai visitantes, é hora de destacar seu Feed e fidelizar seus leitores. Descobri um efeito bem interessante para você usar em seu blog, como uma forma de divulgar seu Feed (ou o que mais desejar) com o efeito de arrastar o canto da página, como se fosse uma folha de papel.
O Feed é a forma de seus leitores se manterem atualizados automaticamente e em contato com seu blog, mesmo sem precisar abrí-lo. Isso é fundamental para um blog bensucedido.
O resultado do efeito que vamos mostrar nesse tutorial pode ser visto no canto superior direito da dela do Blog Lemos [Idéias] – http://www.lemosideias.com/. Conquistar leitores e visitantes constantes é uma tarefa complicada e difícil para qualquer blog, de todos os tamanhos e nichos. Mais difícil disso tudo e conseguir que as pessoas voltem para continuar lendo seus artigos e acompanhando as suas atualizações. E, a melhor forma de fazer isso, é dar destaque ao seu Feed. Não sabe o que é Feed? Leia: Todas as formas formas de divulgação de seu Feed são importantíssimas. A pessoa assinante de Feeds, seja do seu blog e quantos mais desejar, recebe atualizações sem precisar visitar um por um de seus sites preferidos, o que agiliza a navegação por sites de interesse. Então, conquiste esse tipo de leitor que é o mais fiel. Se gostarem do seu blog ao ponto de desejarem receber seu conteúdo sempre que for atualizado, significa que seu blog tem qualidade e é relevante para aquela pessoa. Escrevemos um artigo ensinando como divulgar seu Feed e ter mais assinantes: E agora vamos ensinar você uma ótima forma de divulgação, que não vai ocupar espaço em seu layout e exige pouca adaptação. Efeito Canto de Página para Feed – Peel Effect. 1. Abra o Painel do Blogger e clique em “Layout” ~> “Editar HTML” para procurar em seu código-fonte a seguinte linha: </head> 2. Exatamente ANTES dela, cole esse código sem fazer nenhuma modificação: <style type='text/css'> <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> //Page Flip on hover $("#pageflip").hover(function() { }); Obs.: Em destaque é o link da imagem usada. Você pode usar outra ou modificar, mas só recomendamos para quem sabe trabalhar com imagens, pois uma parte dela usa transparência. 3. Agora, ainda no código-fonte, praticamente nas linhas seguintes onde você está, encontre: <body> 4. Logo DEPOIS disso cole o restante do código que faz o efeito funcionar: <div id='pageflip'> Colocando onde mostramos em vermelho o endereço do seu Feed. 5. Salve o modelo clicando no botão laranja, abaixo do editor do código-fonte, “SALVAR MODELO” e veja o resultado em seu blog. Claro, assine o nosso Feed para manter-se sempre atualizado e ajudar a melhorar o seu blog.
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.ferramentasblog.com.br/imagens/subscribe01.png) no-repeat right top;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
</script>
<a href='URL-do-seu-Endereço-FEED'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
t="Feed-rss" align="left" src="http://lh6.ggpht.com/_rwJ50XF9OVI/SmVJ19kdb5I/AAAAAAAAB1s/FVBJSGp52H8/Feed-rss%5B6%5D.png?imgmax=800" width="67" height="90" /> Com muita criatividade e sabendo usar imagens, você poderá criar outros efeitos de seu interesse com outras mensagens de canto de página. Lembre-se de ter muito empenho em fidelizar seus leitores, mas sem descuidar da qualidade de seu conteúdo.
Muito bom!
Fácil, rápido, ótimo efeito. Coloquei no meu blog e ficou muito bom!
stanleyrossine.blogspot.com
Stanley
Existem algumas funcionalidades que apresentam efeitos muito bonitos. Esta é uma delas. Não combinou muito com o meu blog quando testei, mas certamente abre possibilidade para diversas ideias que tenho. Parabéns pelo blog, Marcos.
Obrigado Marcos!
Coloquei no meu novo trabalho, e ficou a funcionar a 100%, no meu caso preferi colocar na sidebar.
http://www.temavivo.com
Como diria o povo daqui de JF: ficou violento! rsrsrs. Combinou direitinho com meu blog.
Muito bom! Seu blog é d+!
Marco Damaceno
No meu comentario anterior eu tinha testado somente no Firefox. Testei no IE8 e pra minha "surpresa" não ficou no local exato.
Tive que mudar alguns valores do css (sou leigo no assunto, mexo de curioso e corajoso). Troquei o primeiro valor position que estava como relative por absolute.
Depois ficou certinho nos navegadores.
Marco Damaceno
Adorei esse tutor!
Ficou ótimo o meu blog ..
Esse site aqui tá ficando cada dia melhor!
Nota: link quebrado – a imagem hospedada no Image Sharing foi deletada.
Antonio Gabriel
http://diariodoverde.blogspot.com/
@Antônio,
Obrigado pelo aviso. Já corrigi.