Essais E-commerce sur Blogger: 2013

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

Crée un diaporama avec Comboost

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é

Lien utile pour gérer son blogs

http://modifier-les-modeles-de-blogger.blogspot.de

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

Créer une infobulle sur une Image, un Bouton, etc...

Commander sur Amway.fr

Au-dessus, j'ai ajouter l'infobulle " direction Amway.fr sur mon bouton Commander.

Bouton crée à partir du site : http://www.cssbuttongenerator.com/

Pour ajouter l'infobulle sur l'image au passage de la souris ou / et un titre, ajouter dans votre code html : alt="votre infobulle" / title="votre titre"

Exemple <img src="..." alt="votre infobulle" title="votre titre" />

Rajouter une infobulle et un titre au éléments de votre Site est un important au cas ou il serait mal chargé.

Comment publier un Pdf sur son Blog avec lecture automatique

Aller sur le Issuu.com / Crée un compte / Télécharge votre Pdf.

Dans Editer le pdf / Embed Widget / Selectionner le Embed code et copiez-le sur votre blog.

Exemple :

Lecture automatique d’une vidéo

Pour qu'une vidéo démarre automatiquement lors de l'ouverture d'une page web, il suffit simplement d’ajouter &autoplay=1 dans le code Html de la vidéo

Exemple avec une vidéo youtube :

<u> <strike> <object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/vi/09bFnV-jYug/0.jpg" height="266" width="320"> <param name="movie" value="https://www.youtube.com/v/09bFnV-jYug?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata&autoplay=1"/> <param name="bgcolor" value="#FFFFFF" /> <param name="allowFullScreen" value="true" /> <embed width="320" height="266" src="https://www.youtube.com/v/09bFnV-jYug?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true"></embed> </object></strike></u>

Peut fonctionner avec des Vidéo d'autre site comme Dailymotion ( pas tester )

Comment bloquer les affichage dynamique sur Blogger

Suivant les menus que vous voulez supprimer :
Ajouter un ou plusieurs code ci-dessous dans modéle, puis personnalisé, puis ajout fichier CSS.

Pour bloquer le menu Classic utiliser le code ci-dessous
#header .menu li.Classic { display: none; }

Pour bloquer le menu Flipcard utiliser le code ci-dessous
#header .menu li.Flipcard { display: none; }

Pour bloquer le menu Snapshot utiliser le code ci-dessous
#header .menu li.Snapshot { display: none; }

Pour bloquer le menu Sidebar utiliser le code ci-dessous
#header .menu li.Sidebar { display: none; }

Pour bloquer le menu Magazine utiliser le code ci-dessous
#header .menu li.Magazine { display: none; }

Pour bloquer le menu Timeslide utiliser le code ci-dessous
#header .menu li.Timeslide { display: none; }

Pour en savoir plus

http://bloggercode-blogconnexion.blogspot.de/2011/11/masquer-des-elements-des-modeles.html#fil12

Créer un Tableau Css

Exemple de tableau :

Title 1	Title 2	Title 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

Tableau crée à partir de http://www.csstablegenerator.com/

Crée un tableau simple Html

La première balise à connaître est

. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.

Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :

<p>Ceci est un paragraphe avant le tableau.</p>

<table>

</table>

<p>Ceci est un paragraphe après le tableau.</p>

Bon, et qu'écrit-on à l'intérieur du tableau ?

Là, préparez-vous à subir une avalanche de nouvelles balises.

Pour commencer en douceur, voici deux nouvelles balises très importantes :

: indique le début et la fin d'une ligne du tableau ;
: indique le début et la fin du contenu d'une cellule.

En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (

), on indique le contenu des différentes cellules ().

Schématiquement, un tableau se construit comme à la figure suivante.

Un tableau, avec des cellules contenues dans des lignes

On a une balise de ligne (

) qui englobe un groupe de cellules ().

Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

<table>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

Le résultat est un peu déprimant (figure suivante).

C'est un tableau ça ?

Le texte s'est écrit à la suite et il n'y a même pas de bordures !

Oui, un tableau sans CSS paraît bien vide. Et justement, rajouter des bordures est très simple, vous connaissez déjà le code CSS correspondant !

td /* Toutes les cellules des tableaux... */

{

    border: 1px solid black; /* auront une bordure de 1px */

}

Et voici le résultat à la figure suivante.

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Heureusement, il existe une propriété CSS spécifique aux tableaux, border-collapse, qui signifie « coller les bordures entre elles ».

Cette propriété peut prendre deux valeurs :

collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;
separate : les bordures seront dissociées (valeur par défaut)

table

{

    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */

}

td

{

    border: 1px solid black;

}

La figure suivante représente le résultat obtenu.

Les bordures sont collées les unes aux autres

Voilà qui est mieux !

La ligne d'en-tête

Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau. Dans l'exemple ci-dessous, les en-têtes sont « Nom », « Âge » et « Pays ».

La ligne d'en-tête se crée avec un

comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises et non pas !

<table>

   <tr>

       <th>Nom</th>

       <th>Âge</th>

       <th>Pays</th>

   </tr>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

les cellules sont des au lieu des habituels ;
c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête (figure suivante).

table

{

    border-collapse: collapse;

}

td, th /* Mettre une bordure sur les td ET les th */

{

    border: 1px solid black;

}

Comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez changer cela à coups de CSS : modifier la couleur de fond des cellules d'en-tête, leur police, leur bordure, etc.

Titre du tableau

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.

Notre exemple est constitué d'une liste de personnes… oui mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a !

Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau (figure suivante) :

<table>

   <caption>Passagers du vol 377</caption>

   <tr>

       <th>Nom</th>

       <th>Âge</th>

       <th>Pays</th>

   </tr>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

C'est quand même plus clair !

Sachez que vous pouvez changer la position du titre avec la propriété CSS caption-side qui peut prendre deux valeurs :

top : le titre sera placé au-dessus du tableau (par défaut) ;
bottom : le titre sera placé en dessous du tableau.

Essais E-commerce sur Blogger

Bannière