METTRE UN POP-UP

A la demande de Nehodrawm, voici comment créer un petit pop-up...
Libre à vous de bidouiller et de le personnaliser !

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

<div id="notebook">C'est quoi ce pop-up !? <ul style="list-style-image:url(https://storage.canalblog.com/97/56/255038/11246592.gif)"> <ul style="list-style-image:url(https://storage.canalblog.com/97/56/255038/11246592.gif)"> <li><a href="http://sylposelance.canalblog.com/">La grande aventure</a></li> <li><a href="http://landslord.canalblog.com/">Land's Lord</a></li> <li><a href="http://www.mariee2enfants.canalblog.com/">Mariée 2 enfants</a></li> <li><a href="http://lucifera06.canalblog.com/">Luciféra</a></li> <li><a href="http://moliscrap.canalblog.com/">Molinia</a></li> </ul> <a id="close" onclick="document.getElementById('notebook').style.display ='none';" href="#"><font color="#dc143c">Fermer</font></a></div>

Ensuite "collez" le code ci-dessous dans la "feuille de style" après le bloc body {

#notebook { position: absolute; top: 170px; left: 90px; width: 200px; height: 200px; background: transparent url(https://storage.canalblog.com/74/03/255038/11268916.gif) no-repeat center; font-family: georgia; font-size: 16px; font-weight: bold; color: #dc143c; font-style: strong; text-align: center; line-height:10px; margin: 0; padding: 0; } #notebook p { padding:0 10px 0 10px; padding:10px 10px 0 10px; } #notebook a { font-family: georgia; font-size: 12px; font-weight: bold; color: #00ff00; font-style: strong; text-align: center; line-height:20px; } #close { position: absolute; bottom: 1px; right: 1px; text-decoration: none; font-size:8px; font-family: georgia; font-style: normal; color: #dc143c; padding: 0px 5px 5px 5px; }

Comme sur la capture, et "validez".

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

Maintenant, il ne reste plus qu'à changer les "liens" dans la page d'accueil et mettre les votres, ainsi que les "titres".

et de modifier la police, les couleurs,  l'image de fond, l'emplacement du pop ect...dans la feuille de style.

Amusez-vous bien...

Comments

[BOHEME / FLO]

Je suis venue sur ton blog pour essayer de trouver la manière dont je pourrais empècher la copie de mes photos sur mon blog et je ne trouve pas les explications !!!
je sais que je ne suis pas douée du tout !!
Peux-tu m'expliquer la marche a suivre ??
Merci et bonne soirée

[Demolite]

Oh...Vivi, [Salut] ça faisait trop longtemps ! [Clin d oeil]
c'est toi qui est "the best" ! je suis allée sur ton blog...je vais faire comme toi, je vais faire un pop-up pour la petite Mady...c'est tellement dégeulasse....[casse tete]

[Victoria]

J'ai reçu par mail l'avis de recherche à diffuser pour la petite fille Maddy dispraue au Portugal.
Je suis vite venue chez toi pour mettre un pop up !!!
C'est du tonnere ![flash]
Démo, t'es trop ... THE BEST !!!!
Gros bisous
(moi aussi j'aimerai le mettre en "flottant" Mais si je trouve the code secret pour le faire, je te le dirai ;)

Bisous [bisous]

[sylpo]

.... Je suis !
Pendant que je regardais un film, je [cogiter] et après avoir regardé les codes sur LGA .... J'avais aussi trouvé la solution !!!
Depuis ce matin que je cogite la future page d'accueil ... J'ai mon petit neurone de Mollusque qui a rendu l'âme !!!!
Demain sera un autre jour !
Merci et bonnes vacance !
[sapin]

[Demolite]

bin tu les mets à la place des liens sur la page d'accueil...le même le code que pour faire un "bloc texte" c'est à dire : ^div id="demolite">tes dates ici^/div^ [cogiter]c'est toi ou moi qui ai besoin de vacances ? [Rire moqueur]