• ::</font /></strong /> Quelques exemples de bloggs que j'ai revu :</font />
    Cliquez sur les images ou sur les liens sous les images pour voir les BLOGGs
    Bientôt !
    J'y travaille

    - - - -

    :: Ils ont relooké leur blogg :

    Inscrivez-vous par mail pour ajouter le votre : cliquez-ici

    - - - -

    :: "Poto" Blogues :

    Blog Saint Tropez

    Blog de St-Tropez

    ::Un blog sur le village de "Saint-Tropez".

    Découvrez le village des corsaires ouvert sur la méditérannée. De belles photos, des articles sur les artistes et expos. Quelques belles vue du village.

    Je vous conseille également son site : www.saint-tropez.tv

    Blog BlueShit

    Blog BlueShit

    ::Le blog de "Blueshit". Photos et infos web

    Des trouvailles, des infos, kits design gratuits (templates) pour vos blogs, des photos

    Blog de MyRtHa
    Le Blog de MiThRa

    ::Le blog de "MiThRa". La vie de Myrtha

    La belle Mithra vous fait partager ses points de vues, ses pensées, ses goûts, ...


    1 commentaire
  • Je ne répondrai aux questions sur la mise en place d'un design que dans cette partie du blogg. Posez vos questions dans les commentaires.

    NB : Je ne réponds pas aux questions d'ordre général sur vos bloggs.


    26 commentaires

  • :: L'exemple TOURNESOL ::

    J'ai créé le blogg TOURNESOL (cliquez ici pour voir le résultat final) pour l'application de ce qui a été expliqué précédemment.
    Relooking du blogg à partir d'une seule image perso (photo en grand format à la base : 1280x960) dans laquelle j'ai re-cadré pour créer les 3 images qui composent le blogg.

    :: PROCEDE (comme indiqué sur l'image) :

    1) Recadrage de l'image du titre dans la photo initiale puis mise au format 740px de long sur 150px de haut. Modif de l'image en appliquant un contour plus net et en jouant sur les réglages de couleurs, contraste et luminosité.

    2) Recadrage de l'image du sous-titre juste en dessous du cadre titre. Format 740px de long sur 24px de haut. Modif de l'image par ajout de flou.


    3) Détourage (découpe) du tournesol du milieu et copie de la découpe dans un nouveau fichier à fond blanc d'une taille de 245px de long sur 150px de haut.
    Mise à la taille de la fleur dans le nouveau fichier à fond blanc.
    Désaturation de la fleur (noir et blanc) et mise à 50% d'opacité.

    :: Enregistrement au format web (.jpg ou .gif) en vérifiant que la taille du fichier définitif ne soit pas trop lourde (jouez sur la compression à l'enregistrement). Pour l'exemple de tournesol, l'image du TITRE pèse 40ko – l'image du SOUS-TITRE pèse 6ko – l'image des THEMES pèse 8ko.

    4) Mise en ligne des images puis recopie des url

    5) Accès à la partie admin de mon blogg et modif de la CSS

    6) Modif des parties #cadretitreblog - #titreblog - #soustitre - #themes

    :: Le cadre qui contiendra l'image du haut

    #cadretitreblog{
    width:740px;
    height:150px;
    background-image: url('http://www.temca.net/images/titre_toursesol.jpg');
    border: #FFFFFF; (bordure blanche)
    border-style: groove;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    background-color : #ffffff; (fond blanc)
    text-align:left;
    }


    :: Le cadre qui contiendra le tire texte TOURNESOL

    #titreblog{
    width:740px;
    height:150px;
    color: #ffffff;
    font-size: 43px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding:5px;
    }

    #soustitre{
    width:740px;
    height :24px
    background-image: url('http://www.temca.net/images/sous-titre_toursesol.jpg');
    color: #FFFFFF;
    font-size: 17px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: #FFFFFF;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    background-color : #333333;
    text-align:left;
    margin: 0;
    }

    :: Le cadre qui contiendra les Thèmes :

    #themes{
    width:245px;
    height:150px;
    background-image: url('http://www.temca.net/images/themes_toursesol.jpg');
    color: #000000; (couleur du texte du sous-titre)
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCCCCC;
    margin-bottom:3px;
    border: #000000;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    text-align:left;

    }

    Et hop, voilà, c'est à vous ! Et votre TOURNESOL sera en ligne... Bonne chance.

    Chris (FOTOTEK)


    1 commentaire
  • :: LA CSS (Cascding Style Sheet – Feuilles de Style en Cascade) ::

    Tremblez pas comme ça, vous allez voir, c'est « aveugle » comme façon de procéder, mais efficace.
    Je ne vais pas expliquer les CSS (cherchez des tutos sur le web – il y en a plein) mais juste ce qu'il faut modifier pour son design.

    :: Allez dans la partie administration de votre blogg sur la partie modifier la mise en page et modifiez votre css.

    On va prendre un exemple sur lequel j'ai laissé quelques erreurs de calage pour bien vous faire comprendre la suite. Donc ça sera CoCoRoOm.

    Le fond :

    Pour infos :
    En gras
    = le contenu de la css
    Width = largeur de l'élément contenant l'image et/ou les textes.
    Height = hauteur de l'élément.


    _________________________________________

    body {
    background-color : #336600;
    }

    _________________________________________

    on aurait pu mettre une image en fond :
    _________________________________________

    body {
    background-image: url('http://www.temca.net/images/bando.jpg');
    }

    _________________________________________
    Le cadre titre :

    #cadretitreblog{
    width:740px;
    (vérifiez qu'il est bien de la taille en largeur de votre image)
    height :140px ;
    (à la taille de la hauteur de votre image)
    border: #00FF00;
    (couleur de la bordure)
    border-style: dotted;
    (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
    border-top-width: 1px;
    (taille du trait « bas » du cadre)
    border-right-width: 1px;
    (taille du trait « droite » du cadre)
    border-bottom-width: 1px;
    (taille du trait « haut » du cadre)
    border-left-width: 1px;
    (taille du trait « gauche » du cadre)
    background-color : #003300;
    (couleur du fond du cadre, vous pouvez mettre une image, remplacez alors par background-image: url('http://www.temca.net/images/titre.jpg';)
    text-align:left;
    (alignement left = à gauche, remplacer par center ou right selon vos critères)
    }

    _________________________________________

    N.B. : Si 0 partout alors pas de cadre

    Le cadre sous-titre :

    _________________________________________

    #titreblog{
    width:740px;
    (= largeur de votre image)
    height:140px;
    (= hauteur de votre image)
    border: #00FF00;
    (couleur de la bordure)
    border-style: dotted;
    (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
    border-top-width: 0px;
    (taille du trait « bas » du cadre 0 = pas de bordure)
    border-right-width: 0px;
    (taille du trait « droite » du cadre 0 = pas de bordure)
    border-bottom-width: 0px;
    (taille du trait « haut » du cadre 0 = pas de bordure)
    border-left-width: 0px;
    (taille du trait « gauche » du cadre 0 = pas de bordure)
    color: #333333;
    (= couleur du texte)
    font-size: 47px;
    (= taille du texte)
    font-family: Verdana, Arial, Helvetica, sans-serif;
    (= police du texte)
    margin: 0;
    (=la marge du cadre par rapport à la fenêtre)
    padding:5px;
    (= la marge entre le texte et le bord du cadre. Vous pouvez moduler en remplaçant par padding-bottom:5px; ou padding-left , etc... Si vous souhaitez plus d'espace à gauche ou à droite du cadre)
    }

    _________________________________________

    En gros :

    C'est le même mode opératoire pour tous les autres cadres (thèmes, moblog = Moi, archives, rechercher, etc...)
    Retenez que pour mettre une image en fond de cadre il faut ajouter la ligne background-image: url('http://www.); ou remplacer la ligne background-color : #003300; par celle-ci.
    Gardez également à l'esprit qu'il faut caler les width et height à la taille de vos images.


    1 commentaire
  • :: Relook Manuel ::

    La base de travail :

    :: Connectez-vous à votre blogg avec votre navigateur internet dans la partie administration.

    :: Accédez à nouveau à votre blogg en mode consultation. Modifiez et différenciez par couleurs toutes les parties qui composent votre blogg (titre, sous-titre, moi, thèmes, archives...).
    Affichez ensuite le résultat dans votre navigateur (Faites F11 avec internet explorer pour avoir le maximum de surface d'affichage).

    :: Puis appuyez sur la touche « print screen » du clavier.
    :: Ouvrez THE GIMP.
    :: Faites nouveau fichier en 1024x768 (ou de la taille d'affichage de votre écran).
    :: Puis faites édition coller.

    Vous avez maintenant votre blogg comme image à l'écran.

    :: Sauvegardez cette image sous le nom de « base ».jpg (maximum) ou dans le format propriétaire de votre THE GIMP.

    :: Ensuite vous allez sélectionner (avec l'outil sélection) chacun des différents carrés que vous souhaitez modifier et les enregistrer sous le nom qui lui correspond (titre.jpg ou .gif pour le tire, sous-titre.jpg, moi.jpg. themes.jpg ET SURTOUT SANS ACCENT .

    Dans ces carrés vous allez poser votre relooking dans l'espace de sa taille. Vous pouvez là laisser aller votre imagination en composant votre design, en jouant sur les formes et les couleurs comme sur les contrastes, dégradés, fondus et autre joyeusetés.

    :: Après avoir modifié tous les carrés de différentes tailles et trouvé la bonne image pour illustrer votre thème, vous devez recomposer succintement les carrés modifiés en les replaçant sur la page « base » (ils doivent pouvoir recouvrir exactement les carrés de couleur). Vous aurez ainsi une première idée de ce que peux donner votre blogg.

    Astuce :
    Jouez sur la couleur du fond de la page base pour que ça reste joli à l'œil.

    Sachez également que vous pouvez, ensuite, modifier la taille des carrés du blogg en ligne pour les caler à la taille de l'image.

    Travaillez au moins le titre, les plus patients feront LA TOTALE.


    Le fond :

    Recherchez des images de fonds d'écrans sur le web et les récupérer (toujours ce fameux clic droit. Faire enregistrer l'arrière-plan sous... pour la récupération. La fonction enregistrer l'image-sous permet de ne récupérer que l'image.
    Gardez à l'esprit qu'un fond se répète à l'infini par défaut (je vous expliquerai plus tard comment bloquer le repeat). Donc il faut que :
    - soit l'image de fond a la taille du blogg (la taille 1024x768 est la mini). Mais là ça fait une très grande image bien lourde.
    - Ou alors l'image .gif ou .jpg qui se répète ne pèse que quelques ko (comme le fond rayé de « BLOGG Design ») et là ça s'affiche tout de suite (c'est au choix).

    EN LIGNE, LES IMAGES !!!

    Mettre ses images sur le web :

    1) J'ai un hébergement :

    Vous devez vous rapprocher de votre fournisseur d'accès pour savoir comment et ou mettre vos images dans le répertoire qui vous est réservé en ligne (c'est souvent expliqué sur la page des abonnés ou en lien sur la page d'accueil). Créez un nouveau répertoire nommé "images"dans votre espace.
    Les autres (qui ont déjà un espace web) je vous conseille également de créer un répertoire au nom de votre blogg.
    Si votre hébergeur vous donne la possibilité de passer par du FTP (voir avec vos paramètres d'accès pour mettre à jour FILEZILLA ou consorts). Utilisez de préférence cette façon de procéder. Là aussi chacun a sa manière.

    2) je n'ai pas d'hébergement :

    :: Créez un nouveau thème ou un nouveau blogg dédié pour mettre ces images.
    :: Dans l'ajout de texte d'un thème on peut mettre une image (bouton parcourir...), créez un theme par image.
    :: Affichez chacunes des images de vos thèmes dans le navigateur. Faites un clic droit dessus et notez l'url dans l'onglet propriétés.

    Mettez en ligne toutes vos images qui composent le blogg avant de modifier la CSS.

    Les url des images :

    Avant d'insérer les images dans votre blogg il faut connaître leur adresse sur le web.
    Cette adresse sera de la forme

    http://www.temca.net/images/titre.jpg ou .gif

    ou

    perso.wanadoo.fr/votre_nom/blogg/titre.jpg ou .gif

    ou

    http://www.blogg.org/afficher_image.php?id=21452&img_x=

    (pour ceux qui auront leurs images hébergées par blogg.org)

    :: Tapez dans votre navigateur l'adresse des images que vous avez mis en ligne.
    :: Ouvrez le bloc-note de windows et copiez y toutes les adresses.

    Exemple :
    http://www.temca.net/images/titre.jpg

    http://www.temca.net/images/sous-titre.jpg

    http://www.temca.net/images/themes.gif

    Ensuite tout ce passe dans la CSS

    Suite dans :: LA CSS (Cascding Style Sheet – Feuilles de Style en Cascade) ::


    3 commentaires



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires