Widget Articles Récents Avec Image Pour Blogger

Dans cet article nous allons voir comment ajouter le widget "Articles Récents Avec Image" afin d'aider vos visiteurs de retrouver directement les derniers articles de votre blog Blogger.
Ainsi, vous pouvez facilement personnaliser l'affichage du gadget grâce à un certain nombre de paramètres tel que  le nombre d'articles à afficher, la largeur et la longueur de l'image, la taille et la couleur du texte...etc

Comment Installer Le Widget Articles Récents Avec Images Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ choisissez un titre, puis copier/coller le code suiavnt dans la grande zone et enfin cliquez sur "Enregistrer"

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 300;
cellspacing = 2;
borderColor = "#fff";
bgTD = "#000000";
thumbwidth = 32;
thumbheight = 32;
fntsize = 12;
acolor = "#555";
aBold = true;
icon = " ";
text = "Commentaire(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#555";
icon2 = " ";
numposts = 5;
home_page = "http://www.theblogueur.blogspot.com/";
</script>
<script type="text/javascript" src="http://posts-recent.googlecode.com/files/Widget-Articles-Recent.js" />

Personnalisation Du Gadget

Vous pouvez personnaliser l'affichage du widget "Articles Récents Avec Images" en modifiant les valeurs suivantes :

boxwidth = 300;  : Largeur du gadget en pixel.

cellspacing = 2;   : Espacement entre les titres.

borderColor = "#fff";  : couleur de l'arrière plan du gadget.

thumbwidth = 32;  : Largeur de l'image en pixel.

thumbheight = 32;  : Longueur de l'image en pixel.

fntsize = 12;  : Taille des titres.
acolor = "#555";  : Couleur des titres

aBold = true;  : Texte en gras (sinon remplacer true par false)
text = "Commentaire(s)";  : Texte à afficher à côté du nombre de commentaires.

numposts = 5;  : le nombre d'articles à afficher.
home_page = "http://www.theblogueur.blogspot.com/";  : Vous devez absolument modifier theblogueur.blogspot.com avec l'adresse de votre blog.

Voilà, le widget "Articles Récents Avec Image" est installé maintenant sur votre blog Blogger.

Liste Déroulante Avec Liens Hypertexte

Afficher une liste déroulante HTML dont chaque option serait un lien hypertexte aboutissant à une des pages de votre site/blog.
Lorsque l'on choisi un élément, l'url de cette page s'ouvre sans que l'on soit obliger de cliquer sur un bouton envoyer (submit).
Dans la suite, nous allons voir comment créer une liste déroulante simple contenant une série de liens parmi lesquelles le visiteur peut en choisir un, et une autre liste qui demande d'utiliser l'élément optgroup si vous choisissez de regrouper des éléments.  

Comment Créer Une Liste Déroulante Avec Des Liens Hypertextes

Démonstration

-Selectionnez votre destination- Widget Libellés En Nuage Animé Widget Commentaires Récents Ajouter L'effet Arc En Ciel Formulaire De Contact Gratuit

Code De La Liste

<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
  <option value="Lien 1">Titre 1</option>
  <option value="Lien 2">Titre 2</option>
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option> 
</SELECT>
</FORM>

Configuration De La Liste

Menu Déroulant De Liens :  c'est le titre à afficher sur la lite, vous pouvez le modifier avec un titre de votre choix.
Lien 1, Lien2, Lien 3 et Lien 4 sont les adresses (url) des pages vers lesquelles vont pointer les entrées Titre1, Titre 2, Titre 3 et Titre 4; Vous devez faire les modifications nécessaires.
Vous pouvez rajouter autant de liens que vous le désirez en recopiant la ligne : 

<option value="Lien X">Titre X</option>

Liste Déroulante Avec Regroupement D'éléments :

Plutôt que de définir les éléments <option> les uns à la suite des autres, ce qui donne un aspect uniforme à la liste une fois déroulée, il est possible de créer des groupes d’options et de leur attribuer un titre qui fait ressortir les groupements effectués pour structurer la liste, en particulier quand elle contient un grand nombre d’éléments. Pour réaliser ces groupes, il faut faire intervenir l’élément <optgroup> dans l’élément <select>.

Démonstration :

-Selectionnez votre destination- Liens De Navigation Blogger Résumé Automatique Avec Image Bouton De Partage Facebook Bouton StumbleUpon Bouton De Partage LinkedIn Sitemap Blogger Inscription Moteurs De Recherche

Code De La Liste

<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
<optgroup label="Groupe 1">
  <option value="Lien 1">Titre1</option>
  <option value="Lien 2">Titre 2</option>
</optgroup>
<optgroup label="Groupe 2">
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option> 
<option value="Lien 5">Titre 5</option>
</optgroup>
<optgroup label="Groupe 3">
<option value="Lien 6">Titre 6</option>
  <option value="Lien 7">Titre 7</option> 
</optgroup>
</SELECT>
</FORM>

Configuration De La Liste 

Les options de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. À l’intérieur d’un élément <select>, on peut inclure autant de groupes que l’on veut. Le libellé de chaque groupe est donné dans l’attribut label de l’élément <optgroup>.

Comment Ajouter Un Menu Déroulant De Liens Dans Blogger

Copier le code de la liste de votre choix (sans ou avec regroupement d'éléments) et allez à :
"Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
collez le code dans la petite fenêtre qui s'ouvre, et enfin cliquez sur "Enregistrer".