Bannière

Bannière

Ajouter un bouton sur 1 lien qui ouvre de 2 fenêtre, pages, windows + Code Html

Commander sur Amway.fr

Bouton crée CSS button Générator

Voici le code Html :

En Bleu foncé la fonction script de ouvreture des 2 liens
En Bleu clair la fonction css du bouton 
En Noir le lien et le bouton

<script>
function chapichapo()
{
w1 = window.open("http://www.amway.fr/user/coachwellbe", "plum", "width=760, heigbht=420, top=0, left=0, resizable=yes, scrollbars=yes, location=yes, menubar=yes, status=yes, toolbar=yes");
w2 = window.open("http://www.amway.fr", "pudding", "width=760, height=420, top=0, left=0, resizable=yes, scrollbars=yes, location=yes, menubar=yes, status=yes, toolbar=yes");
}
</script> <body>
<a class="classname3" href="javascript:" onclick="javascript:chapichapo();">
<span style="color: black;">Commander sur Amway.fr</span></a></body>
<style type="text/css">
.classname3
{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e8efff), color-stop(1, #9ab6e6) );
background:-moz-linear-gradient( center top, #e8efff 5%, #9ab6e6 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8efff', endColorstr='#9ab6e6'); background-color:#e8efff;
-webkit-border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topright:4px;
border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomright:4px;
border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-left-radius:4px;
text-indent:0px;
border:1px solid #dcdcdc;
display:inline-block;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
font-style:normal;
height:25px;
line-height:25px;
width:160px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.classname3:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9ab6e6), color-stop(1, #e8efff) ); background:-moz-linear-gradient( center top, #9ab6e6 5%, #e8efff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ab6e6', endColorstr='#e8efff'); background-color:#9ab6e6;
}
.classname3:active
{
position:relative; top:1px;
}
</style>

Frise d'image HTML


Diaporama avec miniature


.

.




Placer une partie d'un site web dans votre blog

Pour information, vous pourrez prendre les résultat de match de foot régulièrement mise à jour sur votre blog.

Exemple pour prendre le afficher uniquement le diaporama du site Amway.fr   

Voir le Diaporama 

le code html/css : 

<div id="outdiv">
<iframe id="iniframe" scrolling="no" src="http://www.amway.fr" width="1070px" height="680px"></iframe></div>
<style type="text/css">
#outdiv
{
height: 500px;
overflow: hidden;
position: relative;
width: 1160px;
}
#iniframe
{
 height: 680px;
left: -40px;
position: absolute;
top: -150px;
width: 1070px;
}
</style)</div>

Ensuite si on veut pas que l'on puisse cliquer sur l'Iframe, ou crée un lien sur tout l'Iframe
Il faut ajouter un cadre Css

Exemple HTML du cadre css avec le lien du site.

<head>
<style>
body{
padding:100px;
}
.div1{
position:absolute;
top:0px;
left:0px;
width:1030px;
height:475px;
background-color:#00000;
border:0px solid #000000;
}
</style>
</head>
<body>
<a href="http://www.amway.fr/start-a-business-new" target="_blank"><div class="div1">
</div></a>
</body>

Ouvrir 2 pages avec un seul lien

Voici le code Html qui permet d'ouvrir 2 fenêtre avec 1 seul liens :

<html>
<script>
function chapichapo()
{
w1 = window.open("http://www.amway.fr/user/coachwellbe", "plum", "width=760, height=420, top=0, left=0, resizable=yes, scrollbars=yes, location=yes, menubar=yes, status=yes, toolbar=yes");

w2 = window.open("http://www.amway.fr", "pudding", "width=760, height=420, top=0, left=0, resizable=yes, scrollbars=yes, location=yes, menubar=yes, status=yes, toolbar=yes");
}
</script>
<body>
<a href="javascript:" onclick="javascript:chapichapo();">Amway</a>
</body>
</html>

Exemple : 
Amway essais 2

Mettre un diaporama en haut de blog blogger

- Aller dans modéle, modifier le code html.
- Copier tout le code dans un document wordpad. Pour que au cas où il y ai un bug. Vous puissiez remplacer votre erreur par le code d'origine.
- Accéder au widget, Header 1 : supprimer la ligne
- Enregistrer
- Revenez dans modifier le code html.
- Rétablir les paramètres par défaut des modèle de gadjet.
- Mise en page
- Ajouter un gadjet html/Javascript
- Crée votre Gif animé

Outils du web

Coller une page web dans un article bloggeur

Un code iframe est un petit code tout simple à insérer dans vos pages qui permet d'appeler une page dans une autre page à la taille voulue et à l'endroit désiré.

Par exemple : J'ai pris le lien du site : https://www.amway.fr/ . Pour afficher uniquement le logo de l'entreprise Amway



 Code Html :

<iframe frameborder="yes" height="120" name="iframe" scrolling="no" src="https://www.amway.fr/about-amway-new/" width="200"></iframe>

Height = hauteur en px
Width =  largeur en px = pixels
Src = Votre page
Scrolling = yes ; no = ascenseur de la page visité

Pour améliorer le code ou donner plus de fonction à votre code Iframe :  Voir d'autre article sur les Code Iframe

21 Générateur pour la création de site Web