• ACCUEIL
  • blogger

    Personnaliser son blog : la mise en page

    Comment personnaliser son blog ? MISE EN PAGE


    Il est impératif de personnaliser son blog afin d'améliorer sa visibilité et de le personnaliser.

    Blogger offre de nombreuses possibilités de personnalisation. Cet article présente  la mise en page qui concerne l'ensemble du blog et la manière de  configurer  la structure et architecture  des éléments de mis en page (l'en-tête, articles, gadgets, pied de page ou footer..

    Selon vos souhaits : vous utilisez  tous les "blocs"  ou pas,et,  au contraire, vous rajoutez des blocs ! tout est possible... Chaque bloc peut être déplacé, modifié (configuré), et même supprimé  : soyez prudents !


    1- Comprendre
    2- Modifier/Configurer la mise en page
    Favicon, Navbar, Principal (articles du blog), En Tête avec insertion 
    3-Exemple : Insérer une "bannière" photo titre dans l'en tête 
    Méthode + 2  Tutoriels  avec Pixlr et avec Photofiltre
    4- Autres blocs (notion de gadgets)



    1-COMPRENDRE 

    L'affichage du contenu de  votre blog  est  structuré  via une "Mise  en page"  d'assemblage d'éléments  ou Blocs qui le constitue comme :  En-Tête, Principal, Sidebar, Footer...

    ACCEDER via le menu de configuration

    Vous pouvez Ajouter, supprimer ou modifier des blocs ou gadgets sur votre blog :
    -REAGENCER : Cliquer dessus et faire glisser
    -MODIFIER/CONFIGURER : cliquer sur "Modifier" > un menu contextuel s'affiche

    Pourquoi s'affiche cette configuration de mise en page ? 
    2 cas:
    -il s'agit de la mise en page par défaut  que propose Blogger pour le thème  que vous avez choisi.
    -Vous l'avez déterminée lors de la configuration de votre  thème (Thème > PERSONNALISER)

    Dans tous les cas  vous pouvez modifier  cette mise en page  via:
     Thèmes > mise en page 




    A savoir : Pour modifier les colonnes et leur largeur, utilisez l'Outil de création de thèmes/modèles 



    MISE EN PAGE : les blocs
    attention les appellations  de Blogger ne sont pas toujours explicites ! 

    • Ajoutez, déplacez, supprimez ou modifiez les élèments sur votre blog. 
    • Cliquez dessus et faites-les glisser pour les réagencer. 
    • Rappel : Pour modifier les colonnes et leur largeur, utilisez l'outil de création de modèles.
    Chaque élément/gadget de la MISE EN PAGE peut être configuré en cliquant en bas sur "Modifier"





    DEMO : Blocs de MISE en PAGE 


    BLOCS de Mise en PAGE de ce BLOG




    2-MODIFIER / CONFIGURER 

    2-1  La Navbar

    La Navbar
    Barre de navigation propre  à Blogger dont l'intérêt est discutable... mais qui permet d'accéder rapidement à l'interface de Blogger, donc mieux vaut la conserver.
    En effet cette barre occupe toute la largeur du Blog y compris les outils Blogger situés  à droite ! 



    IMPORTANT : si vous supprimer la Navbar, vous perdrez aussi sa partie droite qui permet d'accéder à la configuration du blog !


    Vous pouvez
    -choisir une modification de couleur ou transparente (conseillé car plus discret)
    -la supprimer  : cocher "désactivé"






      2-2 TOUS les  ARTICLES du BLOG

      =>Dans le bloc "Principal" > Articles du Blog>   cliquer sur Modifier

      Choisissez la configuration, les options  de  tous vos articles :
      =>il suffit de cocher/décocher /préciser les divers élèments
      =>Ceci sera valable pour TOUS les articles de votre Blog





        2-3 EN-TETE

        Vous pouvez modifier le titre de votre blog, et, surtout, sa présentation en mettant une image titre... sorte de "bannière" qui  sera  située en haut de  la page d'accueil  et permettra au visiteur, en un coup d'oeil, de voir la thématique de votre blog.
        Cette bannière attractive doit l'inciter à visiter votre blog !

        Elle s'affichera toujours à l'écran pendant la visite du blog.

        Aussi  cette image publicitaire qui va habiller votre blog doit-elle être conçue avec goût... afin qu'elle atteigne ses objectifs ! 



        Par défaut Blogger affiche le titre du Blog en haut de page, avec ou sans la ligne de description, son aspect  dépend du modèle choisi.
        Il vaut mieux concevoir soi même une bannière titre originale et personnalisée, c'est plus attractif.


        TITRAGE par défaut varie selon lemodèle :






        Pour changer cela, il faut préparer une image illustrative en longueur, une "bannière".

        Il suffit de préparer une image titre pour l'en-tête et de:

        - l'inserer "depuis votre ordinateur ".
        -Choisir son emplacement, qui sera le plus souvent "substituer le titre..." selon vos désidératas, faire des essais.-Cocher "ajuster  à la page"  pour ne pas dépasser la bonne largeur





        pour obtenir : 






        - Valider



        RESULTAT









        3-EN-TETE : EXEMPLE d'INTEGRATION d'IMAGE

        avant de passer  à la réalisation, vous devez préparer votre travai l...


        • 3-1 DETERMINER LA TAILLE DE VOTRE FUTURE IMAGE

        La taille de votre future image-titre dépend de la largeur que vous avez choisie pour l'affichage de votre blog.
        La retouver dans:
        Thème> Personnaliser> Ajuster la largeur
        ici le blog mesure 1150 pixels



        Le plus souvent l'image  titre aura  1000 /1100  pixels en largeur avec une  hauteur d'environ 200 pixels

        A vous de faire un essai ! 



        • 3-2 TROUVER UN FOND à  partir d'une  PHOTO / IMAGE (la votre de préférence...)
        Nota : Si vous souhaitez un fond de couleur  uniforme, passer cette étape !

        Vous devez sélectionner une image (libre de droits) qui vous convienne de ??  pixels de largeur : elle doit être  plus grande que la future image en-tête 

        Vous pouvez utiliser Google, onglet Image

        CONSEIL
        : Souvent un extrait de fond d'écran  
        (exemple) convient parfaitement et sera facile à "retravailler"
        Taper : "fonds ecran" + une thématique "musique"  "mer"
        et demander l'onglet "Image"






        En passant la souris sur une image, la taille s'affiche.



        Attention vous voyez des vignettes et non pas l'image en taille réelle, vous devez cliquer sur l'image  pour qu'elle s'affiche en taille réelle avant de la télécharger ou d'en faire une copie écran...



        => TELECHARGER CETTE IMAGE



        • 3-3 CHOISIR un  OUTIL POUR  ADAPTER /TRANSFORMER PHOTO-IMAGE et SUPERPOSER DU TEXTE 


        LOGICIELS  CLASSIQUES

        • Utiliser  votre logiciel  de traitement d'image usuel  que vous maitrisez parfaitement, si non..
        • un logiciel en ligne comme  Pixlr    très populaire outil en ligne simple et efficace que nous conseillons
         => VOIR NOTRE TUTORIEL pour réaliser une bannière avec PIXLR









        • un outil en ligne  logomaker
          dédié aux bannières, avec de nombreux symboles classés par thèmes pour illuster votre bannière. Tutoriel
          Conseil : faire une capture ecran à la bonne dimension pour récupérer votre travail
          (d'autres outils en ligne)








        AUTRES OUTILS 

        • avec le Galerie FontWork de Libre Office  ou OpenOffice



        Utiliser le logciiel  en mode  "Dessin", insérer votre image, utiliser Fontwork pour créer le logo puis coller le sur l'image. Affiner. Puis enregistrer l'assemblage en format jpg


        • en ligne avec un générateur de titres
        http://fr.cooltext.com/

        http://www.supportduweb.com/generateur-titre-web20-photoshop-image-texte-web-20-effet-reflet-gratuit.html

        http://www.toutimages.com/generateur_texte/generateur_texte.htm



        • en ligne en  créant un texte en gif animé
        http://www.bloggif.com/text 
        (ou créer toute animation en gif animé sur Bloggif)




        • en ligne en créant un "logo"comme Logomaker

        d'autres outils en ligne




        4-AUTRES BLOCS : Ajouter des GADGETS (présentation)


        Les autres blocs de la mise en page  se configurent en ajoutant des "gadgets" (sauf le pied de page préconfiguré)




        Les Widgets ou Gadgets sont de petits programmes ou applications vous permettent d’enrichir votre blog.
        Sur votre blog Blogger, un gadget peut être appelé un widget ou une élément de page.  Le plus souvent on les installe dans la barre latérale, dans l'en-tête ou  dans le pied de page.

        Leur contenu est très variable : 

        • du simple texte
        • du texte html/javascript (qui permet beaucoup de possibilités dynamiques pour qui connait un peu la programmation  mais  parfois, il suffit simplement de coller du code "tout prêt !)
        • divers blocs préconfigurés que propose Blogger ( liste de liens, de libellés nombre de visiteurs....

        Methode

        • Cliquez sur Mise en page dans le menu déroulant de votre tableau de bord au-dessous du blog à personnaliser.
        • De là, cliquez sur Modifier pour modifier les gadgets existants ou sur Ajouter un gadget pour en ajouter de nouveaux.
        • Après avoir cliqué sur Ajouter un gadget, il vous suffit de cliquer sur le signe plus en regard du gadget à ajouter. Vous pouvez choisir des gadgets par catégorie ou rechercher un gadget spécifique dans la partie supérieure droite de la fenêtre pop-up.

          • Après avoir donné les informations nécessaires pour le gadget sélectionné, cliquez sur Enregistrer la disposition. Les modifications apportées à la mise en page sont visibles immédiatement.
          • Exercice:  vous allez insérer un gagdet : "TEXTE" qui contiendra une rapide présentation de votre blog

          CONCLUSION :
          Vous pouvez désormais configurer  librement tous les blocs, selon les mêmes principes...
          ex : ainsi le "pied de page" ou "footer."

          Toutefois vous pouvez ne pas avoir l'utilité de certains blocs. Laissez les vides, vous verrez toujours les blocs dans la "Mise en page "  mais  rien n'apparaitra sur le blog en ligne.

          C'est simple et.. réversible !