Si vous vous rendez sur le Blog de MisterAir, vous remarquerez qu’il y a comme le bout d’une page qui s’ouvre et laisse entrevoir un bouton Rss. En passant la souris dessus, l’ouverture de la page se fait plus grande et affiche la partie cachée de la page en dessous. Cette option est beaucoup utilisée sur la blogosphère anglophone pour attirer l’attention des visiteurs sur la possibilité de s’abonner sur blog et parfois pour faire la pub d’un produit quelconque.
Pour avoir cette même option sur votre blog, voici ce qu’il vous faut faire selon les recommandations de naeem :
1. Vous connecter à votre compte Blogger et aller sur « Mise en page », puis « Modifier le code html ».
2. Trouvez la balise </head>
3. Juste au dessus, mettez le code suivant :
<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>
<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>
3. Juste au dessus, mettez le code suivant :
<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>
<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>
L’url en gras est celle de l’image à afficher sur la page cache. A vous de mettre l’image de votre choix.
Et comme le dit MisterAir, si vous voulez que cet effet s'affiche au coin droit de l'écran, changez “ #pageflip {position: relative ” par: “ #pageflip {position: top; top: 0;
4. Cherchez la balise <body> et mettez le code suivant juste après :
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Les deux lignes en gras sont les urls : 1) de l’adresse où sera envoyé le visiteur en cliquant sur l’image, ici vous pouvez metre l’url de votre flux (ou du produit pour lequel vous faites la publicité) et 2) l’url de l’image avec la page entrouverte.
Vous pouvez faire des modifications sur le code css, changer l'emplacement de l'effet de page à Peel selon vos connaissance, en veillant de ne pas faire de votre blog une monstruosité.
J’espère cette astuce sera utile à quelqu’un.
Vous pouvez faire des modifications sur le code css, changer l'emplacement de l'effet de page à Peel selon vos connaissance, en veillant de ne pas faire de votre blog une monstruosité.
J’espère cette astuce sera utile à quelqu’un.
@+
Tu utilises quel navigateur ? Y'a le bouton "go!" qui a une drôle d'allure sur ton screenshoot oO"
RépondreSupprimer//merci de m'avoir cité au fait ;)
@ MisterAir: J'utilise Chrome et Firefox (je crois que l'image je l'ai eu avec chrome).
RépondreSupprimerBonjour,
RépondreSupprimerTout d'abord merci pour ton blog, vraiment génial!
Je ne suis pas experte et plutôt contente des différents résultats sur mon blog..
Juste une chose, comment faire pour changer l'adresse de renvoi (je ne voudrais pas le feed, mais le formulaire d'abonnement au site Feedburner). Lorsque je change l'adresse, la validtaion est refusée. Merci d'avance si tu trouves le temps et bonnes fêtes de fin d'année!
Salut Rodney, ce code est tout simplement génial !! j'aime les petits plus actifs sur un blog comme ça !! mais est ce que tu pourrais me dire comme le mettre en plus petit bien sur, à chaque angle droit de chaque article stp ! ça pourrait faire bien !
RépondreSupprimerJe te remercie beaucoup, si tu peux me répondre et trouver la solution !
Thks
P.S : encore bravo pour ton blog et toutes ces astuces ULTRA pratiques pour embellir nos blog et site ! encore merci ...
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimer