Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

20 novembre 2010

Mettre un Pop-Up sur votre blog

Posté par Demolite - Dans la catégorie Canalblog
Tags : , , ,

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">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>

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...


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41