Mettre un Pop-Up sur votre blog

Voici comment créer un petit Pop-up...

Libre à vous de le bidouiller et de le personnaliser, vous pouvez mettre des liens vers votre blogs préférés comme renvoyer vos visiteurs vers une autre page de votre blog...

Collez le code suivant dans votre page d'accueil, tout en bas juste après la balise </body>

<div id="notebook">Votre texte ici...
<a href="http://lestuto2demolite.canalblog.com/">Texte pour renvoyer sur une autre page...et adresse à coller entre les " "</a>
<p>
<Font color="#C4C4C4"><font size="2"><em>Encore du texte...</em></font></font>
<a id="close" onclick="document.getElementById('notebook').style.display ='none';" href="#">
<font color="#ffffff">Fermer ou bye bye ou Sortir</font></a>
</div>

Ensuite collez les blocs suivant dans le bas de votre feuille de style.

#notebook {
position: absolute;
top: 300px;
left: 900px;
width: 200px;
height: 230px;
background: transparent url() no-repeat center;
font-family: georgia;
font-size: 16px;
font-weight: none;
color: #C4C4C4;
font-style: none;
text-align: right;
line-height:15px;
margin: 0;
padding: 0;
}
#notebook p {
padding:0 10px 0 10px;
padding:10px 10px 0 10px;
}
#notebook a {
font-family: georgia;
font-size: 14px;
font-weight: none;
color: #00FFFF;
font-style: strong;
text-align: right;
line-height:20px;
}
#close {
position: relative;
bottom: 1px;
right: 1px;
text-decoration: none;
font-size:8px;
font-family: georgia;
font-style: normal;
padding: 0px 0px 0px 0px;
}
Validez

Voilà...vous venez de créer votre premier pop-up !

Maintenant, il ne vous reste plus qu'à modifier le code en la page d'accueil.

Modifiez la police, les couleurs, l'image de fond, l'emplacement du pop etc...dans la feuille de style.

Retournez dans la page d'accueil pour modifier le code :

<div id="notebook">Pour sortir c'est par là
<a href="http://lestuto2demolite.canalblog.com/">Retour aux tuto 2 Demolite...</a>
<p>
<Font color="#C4C4C4"><font size="2"><em>Si un lien ne correspond pas au bon tuto ou si vous trouvez une erreur, je compte sur vous pour me le signaler...merci d'avance.</em></font></font>
<a id="close" onclick="document.getElementById('notebook').style.display ='none';" href="#">
<font color="#ffffff">Fermer</font></a>
</div>

Amusez-vous bien...

Comments

[Demolite]

Salut,
As-tu essayé de coller l'adresse (url) de ton image dans cette ligne ? (dans le bloc #notebook dans ta feuille de style)

background: transparent url(url ici) no-repeat center;

[Loli ;)]

Bonjour! Je n'arrive pas a mettre une image pour mon pop. En fait je voudrai une image, et que lorsquon clique dessus ca nous envoie sur un liens.. mais je ne sais pas ce qu'il faut remplacer exactement dans les deux feuilles... POuvez vous m'aider svp? :)

[Demolite]

Je viens de vérifier le tuto en mettant le pop-up sur la page des archives de mon blog, et je t'assure que ça marche :o)
http://lestuto2demolite.canalblog.com/archives/index.html#
Tu dois faire une bêtise...
Si tu veux, donne moi tes identifiants par mail, je peux le faire pour toi.

[Laeti]

C'est super gentil... mais non, toujours pareil lol

[Demolite]

Je viens de modifier le tuto avec un pop-up qui fonctionne sur un autre de mes blogs.

http://demolitetuto2.canalblog.com/

Essaies de nouveau, ça devrait marcher :o)