Magazine

Ajouter un effet de page peel à Blogger.

Publié le 29 septembre 2009 par Mister Air

page_peel001

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 suite 

   Aprè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:

page_peel001

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

rodney-green-lantern rectified Retrouvez aussi pleins d’astuces pour Blogger sur

Blogger au Bout du Doigt

Weblog multithématique traitant du Design, des Technologies, de la Photo, ainsi que de la musique heavy metal.

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Mister Air 16 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte