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

• Afficher la possibilité d'imprimer ou mettre en PDF un article*
  

• 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"

• Afficher un lien qui affichera  le gadget

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é.

<h2> <a id="NOMDUGADGET-A" onclick="affichercacher('NOMDUGADGET','TEXTE A AFFICHER ▼');">TEXTE A AFFICHER ▼</a></h2>

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
  <script> function affichercacher(id,id3) {id2=id + "-A"; if(document.getElementById(id).style.display=='block') {document.getElementById(id).style.display='none'; document.getElementById(id2).innerHTML=id3;} else {document.getElementById(id).style.display='block'; document.getElementById(id2).innerHTML='fermer ▲';} return;} </script><style type='text/css'> #NOMDUGADGET{display:none} </style>

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

• Supprimer les Libellés qui s'affichent sous un article 

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  

• Créer une table des matières automatique

Il s'agit de  créer une table des matières qui  affiche les titres des messages du blog par ordre alphabétique  et qui se met mettre à jour automatiquement.

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
<style type=text/css>li{list-style-type: none;}.affichage {margin:0px;padding:0px;text-decoration:none;font-size:14px;}.affichage a {text-transform: capitalize;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > TABLE DES MATIÈRES :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL NOMDUBLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_alpha.js"></script></div> <div style="border-top: 1px dotted;"> </div>

=>Un  autre code en javascript

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

<style type='text/css'> .articles_alphas {list-style-type: none;float: left;width: 100%;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.articles_alphas li {padding-bottom:5px;padding-top:5px;border-bottom:black dotted 1px;min-height:40px;} .articles_alphas a {text-decoration:none;} .articles_alphas strong {font-size:10px;} img.article_alpha {padding:0px 1px;width:55px;height:40px;border:0; float:left; margin:0px 10px; margin-top:0px;} </style> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > TABLE DES MATIÈRES :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL NOM BLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_alpha_im.js"></script> </div>

• LISTE DES ARTICLES PAR ORDRE CHRONOLOGIQUE
  même principe, les articles sont classés par ordre chronologique (le plus ancien d'abord)
• <style type=text/css>li{list-style-type: none;}.affichagenom {margin:0px;padding:0px;text-decoration:none;font-size:14px;}.affichagenom a {text-transform: capitalize;}.affichagedate {color:black;margin:0px;padding:0px;text-decoration:none;font-size:12px;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > LISTE DES MESSAGES PAR ORDRE CHRONOLOGIQUE :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=300; nb_lignes_aff=10; adresse_blog = "NOM URL DU BLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_chrono.js"></script></div> <div style="border-top: 1px dotted;"> </div>

• 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


<script src="https://sites.google.com/site/rvdmarcrailcatrain/home/tablemataut1.js"> </script><script src="URL NOM BLOG/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script><script type="text/javascript">var accToc = true;</script><style type='text/css'> .post {color:black;font-size: small;line-height: .9;font-weight:bold;} .post a:link {text-decoration:none;color:#2288bb;font-weight:normal;font-size: small;line-height: .9;} .post a:visited {text-decoration:none;color: #888888;font-weight:normal;font-size: small;line-height: .9;} .post a:hover {text-decoration:underline;color: #33aaff;font-weight:normal;font-size: small;line-height: .9;} </style>

=> COMPLEMENT DOSSIER CLASSER & PRESENTER DES ARTICLES  

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

• Sondage simple 1 pas d'inscription
  
• Sondage simple  2 pas d'inscription

• Sondage simple 3
  
  

• 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

• Evaluation du blog

• Globe avec emplacement des visiteurs

5-GADGETS  SPÉCIFIQUES 

• Créer un formulaire de contact personnalisé avec Foxyform
  
  
  
  
• Carte*

• Météo
• Météo*
  


• Tameteo
  
• Meteocity
  
• MétéoFrance

• Date
  

• Horloges


• Horloge*
  


• zewidget.com/horloges
  
• Marée
  
• Phase lunaire
  

• RESEAU SOCIAUX
  TWITER => publier son statut Twitter
  RESEAUX SOCIAUX +>  Promouvoir un Article

• 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

Le meilleurs site (voir partie 7) 
http://modifier-les-modeles-de-blogger.blogspot.com

D'autres bons sites
http://widgetpourblog.blogspot.com/
http://www.zewidget.com/
http://mestrucspourblogger.blogspot.com
http://www.psyblogs.net/
https://www.leblogger.fr/
https://bloggercode-blogconnexion
http://tousurblog.blogspot

Autres... souvent, de nombreux  widgets proposés ne fonctionnent plus... cas de ces sites...mais on peut y trouver le gadget inespéré ! 
https://www.webself.net/blog/
blogdumoderateur
surlapage.fr/

leblogger.fr

blogger-au-bout-du-doigt

gadget.leblogger

elfsight.com/blogger-widgets/

theedublogger

gadgetspourblog

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 !