• ACCUEIL
  • blogger

    Autres Gadgets / Widgets pour Blogger

    Comment améliorer la présentation du blog 

    en utilisant  des gadgets/widgets 

    autres que ceux proposés par Blogger ?


    • Améliorer la présentation du blog
      • Vous souhaitez ajouter ou supprimer des éléments dans la présentation (interface du blog)
      • Mieux présenter vos articles, faire évaluer votre blog
      • Ajouter des widgets spécifiques
    • Méthode
      • Vous savez  comment installer des widgets intégrés à la plateforme Blogger qui se placent automatiquement dans la sidebar de votre blog, mais il existe d'autres widgets HTML/Javascript qui vont répondre à vos attentes

      • L'installation est très simple : pour l'ajouter à votre blog, il faudra systématiquement  copier le "code" fourni dans un Gadget "HTML/Javascript" et le placer au bon endroit.
        =>aller  dans Mise n page > Ajouter u Gadegt HTML/Javascript



         

      • Il faudra toujours tester le résultat dans votre blog. L'affichage peut varier selon  la template ("Modèle" ou "Thème" )que vous avez choisie
    • Sélection de gadgets   => tous ont testés en 2020
      • ces gadgets sont sélectionnés uniquement sur leur pertinence, qualité, simplicité et utilité pur la majorité des blogs
      •  il vous suffit de copier le code proposé puis le coller dans un gadget Html/Javascript de votre blog
      •  * explications sur Blog&Blogger
    • Thématiques présentées

    • 1-GADGETS UTILITAIRES d'AJOUT concernant TOUT LE BLOG
      2-GADGETS UTILITAIRES de SUPPRESSIONS d’éléments du BLOG
      3-UTILITAIRES pour LISTER LES ARTICLES
      4-UTILITAIRES pour EVALUER LE BLOG : sondages ou évaluation
      5-GADGETS SPÉCIFIQUES "widgets"
      6-TROUVER D'AUTRES GADGETS
      7-SOURCE ESSENTIELLE


    1-GADGETS  UTILITAIRES d'AJOUT concernant TOUT LE BLOG

    • Interdire la copie (texte, image) via le clic droit de la souris
    • <SCRIPT LANGUAGE="JavaScript">
      <!-- Disable ;
      function disableselect(e){return false};
      function reEnable(){return true};
      //if IE4+
      document.onselectstart=new Function ("return false");
      document.oncontextmenu=new Function ("return false");
      //if NS6
      if (window.sidebar){document.onmousedown=disableselect;
      document.onclick=reEnable};
      //-->



    • Afficher un Copyright au Blog (date automatique)
       ajouter ce code dans un gadget HTML et le mettre en bas de page "Footer-1"
       
    <center><script type="text/javascript">function annee_en_cours(){var myDate = new Date();window.document.write(myDate.getFullYear(),"-",myDate.getFullYear()+8);}</script><span style="font-weight:bold;">© Copyright <script language="JavaScript" type="text/JavaScript">annee_en_cours();</script><br/>Tous droits réservés</span></center>
    • Afficher le Nombre de visiteurs 

        • zewidget : compteur de visites et statistiques




        • whos.amung.us :  statistiques et compteur en temps réel
    • Afficher nombre de commentaires et de d'articles
          <script style='text/javascript'>function nombre(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="color: #000;background: #ddd;width:220px;text-align:center;margin-left:20px;padding:3px;border-right:solid #000 1px;border-bottom:solid #000 1px;font-weight: bold;font-family: arial;font-size: large;">Sur ce blog : <script src='URL DU BLOG/feeds/posts/default?alt=json-in-script&callback=nombre'></script> articles et <script src='URL DU BLOG/feeds/comments/default?alt=json-in-script&callback=nombre'></script> commentaires</div>


    • Afficher  uniquement le nombre d'articles
      • <script style='text/javascript'>function nombre(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="color: #000;background: #ddd;width:150px;text-align:center;margin-left:20px;padding:3px;border-right:solid #000 1px;border-bottom:solid #000 1px;font-weight: lighter;font-family: arial;font-size: smallm;">Sur ce blog : <script src='URL DU BLOG//feeds/posts/default?alt=json-in-script&callback=nombre'></script> articles</div>

    • Afficher une durée pour un événement à venir ou passé
      exemple: 
      • Un évènement passsé
      • Confinement depuis <script language="JavaScript" type="text/javascript">
        <!--
        function chrono()
        {
        jour=Date.parse(new Date) - Date.parse("March 16, 2020 GMT-11" );
        return(Math.round(jour/(24*60*60*1000)))
        }
        document.write(chrono()+" Jours");
        //-->
        </script>
        <br />
        •  indiquer la nature de l 'évènement  ici "Confinement depuis"
        • et la date en anglais dans:("March 16, 2020 GMT-11" )
      • Autre script 
        • <script language="javascript"> 
          datedujour = new Date(); 
          hdj=datedujour.getHours(); 
          mdj=datedujour.getMinutes(); 
          sdj=datedujour.getSeconds(); 
          date_even = new Date(2009, 6, 27, hdj, mdj, sdj); //janv =0 > decemb =11 
          date1=datedujour.getTime(); 
          date2=date_even.getTime(); 
          nbrej= date1-date2; 
          nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24); 
          document.write("Il s'est écoulé "+nbrej+" jours depuis tel évènement "); 
          </script>
      • un évènement à venir
      • <script language="javascript">
        // PLF - /
        datedujour = new Date();
        hdj=datedujour.getHours();
        mdj=datedujour.getMinutes();
        sdj=datedujour.getSeconds();
        date_even = new Date(2020, 4, 11, hdj, mdj, sdj); //janv =0 > decemb =11
        date1=datedujour.getTime();
        date2=date_even.getTime();
        nbrej= date2-date1;
        nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
        document.write("Il reste "+nbrej+" jours avant la fin du confinement");
        </script>
        <noscript><a href="/"></a></noscript>

          • indiquer la date de l'évènement  attention au "numéro"du mois car janvier =0 dans new Date(2020, 4, 11, hdj, mdj, sdj)
          • indiquer la nature de l'évènement à venir ici : " jours avant la fin du confinement"



    Vos gadgets occupent trop de place ou/et sont trop nombreux. Une solution pour apporter  plus de discrétion consiste à les remplacer par un lien : en cliquant sur ce lien, le gadget s'affichera  ▼.


    Cela nécessite d'ajouter  2 gadgets dans le blog ! et l'ensemble peut apparaître un peu complexe mais cela fonctionne ! 
      • GADGET 1  =>  se place, dans "Mise en page", JUSTE AVANT le code du gadget concerné.

    EXPLICATIONS

    -"NOMDUGADGET" est le nom du gadget concerné. Pour cacher un autre gadget, il suffit de remplacer (deux fois) "NOMDUGADGET" par le nom de cet autre gadget.

    - Pour connaître le nom du gadget, aller dans "Mise en page" et cliquer sur "Modifier" dans le rectangle correspondant au gadget : le nom apparaît à la fin de l'adresse, en haut de la fenêtre qui s'est ouverte. Ci-dessous l'identifiant du gadget est : HTML11


    -Il faut enfin modifier (deux fois) le texte du lien : TEXTE A AFFICHER ▼

    On peut ajouter autant de gadgets que l'on veut.
      • GADGET 2  => a placer une fois dans le blog
    Il faut cependant ajouter une ligne avec le code "#NOMDUGADGET{display:none}" par gadget à cacher, en remplaçant "NOMDUGADGET" par le nom du gadget concerné.

    Remarque : L'auteur de ces codes propose également d'afficher un liste de liens pour afficher des gadgets

    2-GADGETS  UTILITAIRES de SUPPRESSIONS d'ÉLÉMENTS DU BLOG

    La  méthode la plus simple  consiste à ajouter ce code  dans un gadget HTML/Javascript

    <style type="text/css">.post-labels {display: none;}</style>


    • Supprimer les rubriques imposés par Blogger, en bas de page  principale

    Aperçu
     : En bas de la page d'accueil, Blogger impose  3 rubriques  qui indiquent:

    Méthode : à chaque fois il faut insérer un code indiqué dans un gadget HTML/JavaScript.
    D'autres instructions peuvent être ajoutées dans le même gadget entre <style type="text/css"> et </style>.


    • Supprimer:  " Article  plus récent .........Accueil .........Articles plus anciens"

    <style type="text/css">.home-link{display: none;}.blog-pager-newer-link{display: none;}.blog-pager-older-link{display: none;}</style>



    • Supprimer: "Inscription à : Articles Atom"
    <style type="text/css">.Attribution {display: none;}</style>


    • Supprimer : " Thème XXX . Fourni par Blogger"

    <style type="text/css">.feed-links {display: none;}</style>
    Cela concerne le gaddet nommé "Attribution" que l'on ne peut pas supprimer manuellement



    On peut seulement ajouter un "copyright" de type : 

     Copyright ©   Prénom NOM 2015 – 2020 – Tous droits réservés

    mais "thème fourni par Blogger" apparaîtra toujours ! 
    => voir ci-dessous comment ajouter  copyright après avoir supprimé cette rubrique imposée 


    • Supprimer/ Changer le Favicon

    Le Favicon est l'icône de votre blog qui s'affiche dans l'onglet du navigateur, par défaut celui de Blogger: ici à gauche




    Vous pouvez changer de "logo" si vous avez une image de remplacement ! Une image.gif en carré de moins de 100 ko : on en trouve sur Internet ou vous la fabriquez, par ex avec Photofiltre, taille 225/225 puis enregistrer en .gif ou png


    Voir notre dossier: créer une icône avec  l'outil en ligne PIXLR





    Avant          et          Après



    =>ASTUCE:  si vous ne voyez pas la modification, vous devez vider le cache du navigateur ou tester avec unautre navigateur...

    =>A SAVOIR : l'icône orange  B  "Blogger" de la Navbar  n'est pas modifiée ! 
    seulement celle de l'onglet de navigation ...


    • Supprimer 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 certains préfèrent  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é"





    • Ajouter un Copyright et droits d'auteur
    Faut-il apposer une mention particulière sur un blog pour protéger son contenu et si oui laquelle ?
    Lire notre article dédié : Droits d' auteur et blog

    Pour insérer un Copyright, on utilisera un gadget "HTML" positionné en pied  de page qui  coprendra un message de votre choix

    On peut indiquer  :
    -d'une manière classique 
    logo © ou  "Copyright" ou  "Tous droits réservés" ou "All rights reserved"  | Nom auteur | année de publication 

    © Copyright 2010-2020  Prénom Nom Auteur. Tous droits réservés


    -Une licence "CC " Creative Commons" avec 6 variantes


    • Afficher un Copyright au Blog (date automatique)
       ajouter ce code dans un gadget HTML et le mettre en bas de page "Footer-1"
      Il permet  une variation AUTOMATIQUE des années (en cours / en cours + 8) à copier dans un  gadegt HTML
     
    <center><script type="text/javascript">function annee_en_cours(){var myDate = new Date();window.document.write(myDate.getFullYear(),"-",myDate.getFullYear()+8);}</script><span style="font-weight:bold;">© Copyright <script language="JavaScript" type="text/JavaScript">annee_en_cours();</script><br/>Tous droits réservés</span></center>




    3-UTILITAIRES pour LISTER LES ARTICLES

    => COMPLEMENT DOSSIER CLASSER & PRESENTER DES ARTICLES  
      METHODE
      -Copier coller en mode HTML dans un article (ou une page)  le code indiqué
      -Il suffit d'ajouter dans le code l'URL du blog concerné
      -On doitaussi changer le nombre de lignes : var nb_lignes_aff=10;

      • LISTE ALPHABETIQUE des ARTICLES

      • LISTE ALPHABETIQUE des ARTICLES + ILLUSTRATION  issue de l'article


      • LISTE DES ARTICLES PAR ORDRE CHRONOLOGIQUE
        même principe, les articles sont classés par ordre chronologique (le plus ancien d'abord)

      • LISTE DES ARTICLES CLASSES PAR LIBELLES
      • idem avec articles regroupés par libellés (mots clés) avec le mot "Nouveau !" pour les 10 derniers messages


    => COMPLEMENT DOSSIER CLASSER & PRESENTER DES ARTICLES  

    4-UTILITAIRES  pour EVALUER LE BLOG : sondages ou évaluation













    • Sondage 
      utiliser un outil en ligne comme
      Polldaddy ? service d'hébergement de sondages. Créer un compte gratuit.
      Assez simple : Dans le menu "Polls" (Sondages), cliquez sur "Create a Poll". Choisissez la langue du sondage (Français). Elle est utilisé pour traduire les boutons et autres messages générés par Polldaddy
      Choisissez un style graphique pour votre sondage. Vous pouvez choisir un des styles par défaut, ou alors définir complètement votre style.
      Cliquez sur Save => Copiez le code obtenu  dans un gadget HTML










    5-GADGETS  SPÉCIFIQUES 









    • AMÉLIORER DES GADGETS DE BLOGGER
      • Améliorer le widget Google Traduction en affichant  des drapeaux pour chaque langue   à partir d'un autre blog (voir ce widget sur ce blog)
      • Pour quelques drapeaux, copier le code cette page de blogger-au-bout-du-doigt ou beaucoup plus de drapeaux ce code de blogger-au-bout-du-doigt



    6-TROUVER D'AUTRES GADGETS


    7-SOURCE ESSENTIELLE

    • Beaucoup de codes des parties 1 et  2 viennent de l'excellent Blog       http://modifier-les-modeles-de-blogger.blogspot.com/
    • Nous en avons sélectionné  quelques uns : ceux qui nous semblent les plus utiles et surtout les plus simples  à utiliser pour la plupart des blogs.
    • Vous trouverez sur ce blog de très nombreux compléments et astuces : c'est une mine d'or pour le blogueur,  l'auteur indique plus de  350 articles pour mieux bloguer ! 
    • Un grand merci à l'auteur pour sa profusion d'idées !