Canalblog
Suivre ce blog Administration + Créer mon blog

shnapps

10 janvier 2010

Traducteur Google

Vous voulez faire apparaitre un traducteur "Google" sur vos pages ....

Mettre entre les balises <head> et </head>:

Posté par arian à 14:01 - Commentaires […] - Permalien [#]
Tags: traducteur google
Vous aimez ?
0 vote
Publicité
2 novembre 2008

L'habillage du lecteur deezer

Avoir un lecteur pour partager ses propres goûts musicaux, pourquoi pas ? encore faut-il le fondre dans le design de son blog ...

En premier lieu, vous devez créer une image de fond

danzer

Ensuite, vous incluez dans votre feuille CSS, le code suivant:

Changez les mesures des padding pour mettre le lecteur à la place désirée

Collez le code suivant à l'endroit où vous voulez placer votre lecteur

Allez sur le site de Deezer pour choisir vos propres musiques...

Ce superbe script vient de "BlogMastering"

Posté par arian à 02:06 - Commentaires […] - Permalien [#]
Tags: Musiques,  lecteur
Vous aimez ?
0 vote
19 octobre 2008

Menu vertical On Mouse Over

Le script et explication du menu en page d'accueil de Shnapps se trouve sur Source d'essai.

cliquez_ici_menu_on_mouse_over

Posté par arian à 14:17 - Commentaires […] - Permalien [#]
Tags: Javascript,  menu
Vous aimez ?
0 vote
16 octobre 2008

Les listes

Les "listes HTML" sont très pratiques pour énumérer des listes d'items ou d'éléments. Un exemple d'application le sommaire ci-dessus.

<dl>...</dl>, <dt>...</dt> et <dd>...</dd> : Liste de définitions
  • </dl> : Est le conteneur de la liste de définitions
  • </dt> : Est le conteneur d'un terme à définir
  • </dd> : Est le conteneur de la définitions
    • Ex :
    <dl>
    <dt>Banane</dt>
    <dd>Fruit jaune alongé</dd>
    <dt>Pomme</dt>
    <dd>Fruit vert sphérique</dd>
    </dl>    		 Résultat :
    Banane
    Fruit jaune alongé
    Pomme
    Fruit vert sphérique
    Compatibilité : EI / FIREFOX
    Attribut : aucun

    <lh>...</lh> : Titre d'une liste
    Ex :
    <lh>Titre liste</lh>
    <li>Item 1</li>
    <li>Item 2</li>    		 Résultat :
    Titre liste
  • Item 1
  • Item 2
    • Compatibilité :  EI / FIREFOX

    Attribut : aucun

    <li>...</li> : Item ou élément d'une liste
    Ex :
    <li>Item 1</li>
    <li>Item 2</li>    		 Résultat :
  • Item 1
  • Item 2
    • type="..." :
  • Dans les listes ordonnées "<ol>" : spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
  • Dans les listes non-ordonnées "<ul>" : spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
    • Ex :
    <ol>
    <li type="1">Item 1 - En chiffres</li>
    <li type="a">Item 2 - En lettres minuscules</li>
    <li type="A">Item 3 - En lettres majuscules</li>
    <li type="i">Item 4 - Romains minuscules</li>
    <li type="I">Item 5 - Romains majuscules</li>
    </ol>    		 Résultat :
    1. Item 1 - En chiffres
    2. Item 2 - En lettres minuscules
    3. Item 3 - En lettres majuscules
    4. Item 4 - Romains minuscules
    5. Item 5 - Romains majuscules
    Ex :
    <ul>
    <li type="disc">Item 1 - Disque plein</li>
    <li type="circle">Item 2 - Disque creux</li>
    <li type="square">Item 3 - Carré</li>
    </ul>    		 Résultat :
    • Item 1 - Disque plein
    • Item 2 - Disque creux
    • Item 3 - Carré
    value="..." : Utilisé dans les listes ordonnées "<ol>". Permet d'imposer un numéro de départ
    Ex :
    <ol>
    <li value="15">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ol>    		 Résultat :
    1. Item 1
    2. Item 2
    3. Item 3
    Compatibilité :  EI / FIREFOX

    <ol>...</ol> : Listes ordonnées
    Ex :
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol>    		 Résultat :
    1. Item 1
    2. Item 2
        1. type="..." : Spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
        Ex :
        <ol type="1">
        <li>Item 1 - En chiffres</li>
        <li>Item 2</li>
        </ol>        		 Résultat :
        1. Item 1 - En chiffres
        2. Item 2
        Ex :
        <ol type="a">
        <li>Item 1 - En minuscules</li>
        <li>Item 2</li>
        </ol>        		 Résultat :
        1. Item 1 - En minuscules
        2. Item 2
        Ex :
        <ol type="A">
        <li>Item 1 - En majuscules</li>
        <li>Item 2</li>
        </ol>        		 Résultat :
        1. Item 1 - En majuscules
        2. Item 2
        Ex :
        <ol type="i">
        <li>Item 1 - En romain minuscule</li>
        <li>Item 2</li>
        </ol>        		 Résultat :
        1. Item 1 - En romain minuscule
        2. Item 2
        Ex :
        <ol type="I">
        <li>Item 1 - En romain majuscule</li>
        <li>Item 2</li>
        </ol>        		 Résultat :
        1. Item 1 - En romain majuscule
        2. Item 2
        value="..." : Spécifie le numéro de départ de l'énumération
        Ex :
        <ol value="15">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ol>        		 Résultat :
        1. Item 1
        2. Item 2
        3. Item 3
        Compatibilité :  EI / FIREFOX

        <ul>...</ul> : Listes non ordonnées
        Ex :
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        </ul>        		 Résultat :
        • Item 1
        • Item 2
            • img src="..." : Permet de remplacer les puces standards par celles que vous aurez choisi.
            Ex :
            <ul>
            <img src="images/puce.gif">Item 1<br>
            <img src="images/puce.gif">Item 2<br>
            <img src="images/puce.gif">Item 3<br>
            </ul>            		 Résultat :

              Item 1
              Item 2
              Item 3

            type="..." : Spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
            Ex :
            <ul type="disc">
            <lh>Disque plein</lh>
            <li>Item 1</li>
            <li>Item 2</li>
            </ul>            		 Résultat :

              Disque plein

            • Item 1
            • Item 2
            Ex :
            <ul type="circle">
            <lh>Disque creux</lh>
            <li>Item 1</li>
            <li>Item 2</li>
            </ul>            		 Résultat :

              Disque creux

            • Item 1
            • Item 2
            Ex :
            <ul type="square">
            <lh>carré</lh>
            <li>Item 1</li>
            <li>Item 2</li>
            </ul>            		 Résultat :

              Carré

            • Item 1
            • Item 2
            Compatibilité :  EI / FIREFOX

            Listes imbriquées ou à plusieurs niveaux : Vous pouvez concevoir des listes à plusieurs niveaux et même mélanger les types de listes. Voyez les exemples ci-dessous.
            Premier exemple : Voyez le résultat avec 3 niveaux de listes à puces. Remarquez le changement de type de puce (automatiquement) à chaque niveau de l'arborescence. Cet exemple étant devenu plus complexe, il est bon d'indenter les lignes de code afin d'avoir une bonne visualisation des balises ouvertes et fermées, cela évite bien des erreurs.
            Ex : 
            <ul>
   <li>Item 1</li>
      <ul>
         <li>Item 1.1</li>
            <ul>
               <li>Item 1.1.1</li>
               <li>Item 1.1.2</li>
            </ul>	 
         <li>Item 1.2</li>
      </ul>	 
   <li>Item 2</li>
      <ul>
         <li>Item 2.1</li>
         <li>Item 2.2</li>
      </ul>	 
</ul>
            		 Résultat :
            • Item 1
              • Item 1.1
                • Item 1.1.1
                • Item 1.1.2
              • Item 1.2
            • Item 2
              • Item 2.1
              • Item 2.2
            Deuxième exemple : Ici les listes à puces (non ordonnées) et listes ordonnées ont été alternées.
            Ex : 
            <ul>
   <li>Item 1</li>
      <ol>
         <li>Item 1.1</li>
            <ul>
               <li>Item 1.1.1</li>
               <li>Item 1.1.2</li>
            </ul>	 
         <li>Item 1.2</li>
      </ol>	 
   <li>Item 2</li>
      <ol type="A">
         <li>Item 2.1</li>
         <li>Item 2.2</li>
      </ol>	 
</ul>
            		 Résultat :
            • Item 1
              1. Item 1.1
                • Item 1.1.1
                • Item 1.1.2
              2. Item 1.2
            • Item 2
              1. Item 2.1
              2. Item 2.2

            Posté par arian à 07:23 - Commentaires […] - Permalien [#]
            Vous aimez ?
            0 vote
            19 septembre 2008

            Image de fond des posts

            Créez une image de la largeur de vos posts ( content) et d'une dimension adaptée à vos motifs, sachant que le post suivant doit se coller sur le précédent.

            Hébergez cette image sur CB et insérez l'adresse dans ce code:

            background: #ffffff url("adresse de votre image.gif");
            background-repeat:repeat-y;

            Recherchez dans le css de CB le bloc suivant:

            .blogbody {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #4c536f;
            font-size: small;
            font-weight: normal;
            font-style: normal;
            text-transform: none;
            padding: 10px;
            text-align: left;
            line-height: 150%;
            background: #ffffff url("adresse de votre image.gif");
            background-repeat:repeat-y;
            }

            Validez

            Posté par arian à 14:12 - Commentaires […] - Permalien [#]
            Tags: image de fond,  post
            Vous aimez ?
            0 vote
            Publicité
            6 septembre 2008

            Smilies dans les commentaires

            Alérion propose un script sans faille que l'on peut adapter à son propre blog ... Je vous renvoie directement sur son blog.

            Pour ceux qui préféreraient les outils de CB, j'ai un peu modifié le JS.

            smileysCommentaires2

            Posté par arian à 12:08 - Commentaires […] - Permalien [#]
            Vous aimez ?
            0 vote
            6 septembre 2008

            Menu Animated on Mouse Over

            Pour récupérer le javascript du menu de Shnapps, toutes les explications se trouvent sur "source d'essai"

            cliquez_icimenu

            Posté par arian à 10:03 - Commentaires […] - Permalien [#]
            Tags: Javascript,  menu
            Vous aimez ?
            0 vote
            6 septembre 2008

            Un logo au dessus des titres des posts

            Vous voulez ajouter une image, logo ou widget au dessus du titre de vos posts, sachant que la même image se reproduira à chaque post.

            * Créez une image 35x35 ou 50x50

            * Hébergez l'image

            * Placez l'adresse dans le script

            * identifiez dans <body> la position du script

            *Collez le script

            * Prévisualisez l'effet

            * Envoyez

              <Blogger><BlogDateHeader>
            <h2><$BlogDateHeaderDate$></h2>
            </BlogDateHeader> <a name="<$BlogItemNumber$>"></a>

            <a name="<$BlogItemNumber$>"></a> <BlogItemTitle><img height="35" alt="logo" src="adresse de votre image.gif" width="35" border="0" />

            <BlogItemTitle>
            <h3><$BlogItemTitle$></h3> 
            </BlogItemTitle>

            Posté par arian à 09:35 - Commentaires […] - Permalien [#]
            Tags: HTML,  Logo
            Vous aimez ?
            0 vote
            6 septembre 2008

            Favicon dans la barre adresse

            Il suffit dans un premier temps de créer une image au format png ou gif (formats standards, à utiliser).
            Vous pouvez choisir plusieurs dimensions, 16x16 ou 32x32 (en pixels).

            Si on ne respecte pas les standards

            Comme d'habitude, IE ne respecte pas les standards et n'utilise pas les images avec les bons formats.
            Pour ce navigateur, il faut utiliser une image ou format ico (ou bmp renommée) (non standard, à éviter de préférence) , et de dimensions 16x16 pixels.

            Quand on a fait le favicon

            Il faut le déposer sur votre site, et indiquer son chemin via la balise link dans les balises d'en tête head.
            Voici un exemple avec une image au format png :

            <link rel="icon" type="image/png" href="/images/mafavicon.png" />

            Selon le format, c'est l'attribut "type" qui change :

            *format png : image/png

            *format gif : image/gif

            *format jpeg (extension jpg ou jpeg) : image/jpeg

            Concernant Canalblog, vous devez passer par "insertion d'un fichier" pour récupérer l'adresse de votre image.ico.

            l'adresse récupérée doit être insérée dans le code comme suit:

            <link rel="icon" type="image/ico" href="/images/mafavicon.ico" />

            ou

            <LINK REL="SHORTCUT ICON" href="votre adresse.ico">

            Toujours à placer entre les balises <head> et /head>

            Posté par arian à 09:03 - Commentaires […] - Permalien [#]
            Tags: HTML,  Favicon
            Vous aimez ?
            0 vote
            6 septembre 2008

            Retour "Haut de page"

            Pour permettre de revenir en haut de la page plus facilement, vous pouvez créer une image et l'intégrer dans vos pages HTML.

            * hébergez l'image et récupérez l'adresse

            * Identifiez dans vos pages, l'endroit où placer le code:

            <div class="itemfooter">  Posté par <$BlogItemAuthorNickname$><!-- à <$BlogItemDateTime$>--> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]<BlogItemTags><br />Tags : <$BlogItemTagsList$></BlogItemTags></div>
            </Blogger>

            * placez le code après </Blogger>
                         <a href="#top" onclick="scrollTop();"><img height="43" alt="Haut de page" src="adresse de l'image.gif" width="20" border="0" /></a>

            * prévisualisez votre page

            * Validez         

            Posté par arian à 08:48 - Commentaires […] - Permalien [#]
            Tags: HTML,  Haut de page
            Vous aimez ?
            0 vote
            Publicité
            1 2 > >>
            shnapps
            Publicité
            Catégories
            Archives
            Publicité