L’effet page peel n’est ni plus ni moins qu’un “coin” qui se soulève au passage du pointeur pour dévoiler ce qu’il y a en dessous.
Je vous propose aujourd’hui d’installer facilement cela sur Blogger et de personnaliser cet effet…
Lire la suiteAprès le widget “Sexy-sharing” que je vous ai présenté dernièrement, voici une nouvelle astuce pour ajouter un widget “page peel” soit littéralement une page que l’on pèle…
Voici le résultat final après les manipulations qui vont suivre:
1. Allez dans le code de votre blog et trouvez la balise </head>
2. Copiez juste après ce code:
<style type='text/css'> 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.wallheaven.com/subscribe.png) no-repeat right top; } </style> <span id="preservee051cc34556243fd826470927cb43e66" class="wlWriterPreserve"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Page Flip on hover $("#pageflip").hover(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></span>
3. Enregistrez , puis ajoutez un nouveau widget HTML, et mettez-y ce code:
<div id='pageflip'> <a href="Url_de_votre_flux"><img alt="" src="http://www.wallheaven.com/page_flip.png" /></a> <div class='msg_block'></div> </div>
4. Pensez à changer l’adresse du flux par le votre.
Le widget s’affiche désormais à l’endroit où vous l’avez placé. Pour ceux qui veulent que celui-ci s’affiche au coin supérieur droit de l’écran, allez dans le code du blog et replacez le “ #pageflip {position: relative ” par: “ #pageflip {position: top; top: 0; ”
Au cas où vous souhaitez changer les images comme je l’ai fait, il ne faut pas oublier de changer la taille des images dans le script pour éviter toute mauvaise surprise.
Si vous avez des questions ou des difficultés, n’hésitez pas à les mettre en commentaire. de plus vous pouvez voir un exemple fonctionnel dans la sidebar d’Oro’o à la section “S’abonner”.
Via –> www.cssreflex.com
Démo tirée de: www.sohtanaka.com