Illustrer un widget avec une image

 Une image jointe à un widget, n’importe lequel, le rend plus attrayant, plus visible pour les lecteurs.

Vous aurez remarqué que sur la nouvelle page d’accueil de ce blog se trouvent différentes sortes de widgets que j’ai illustré avec des images.  Ainsi en est-il du widget Flux ci-haut auquel j'ai ajouté une image décalée vers la gauche. C’est un exercice très facile à exécuter.





1. Avoir le code avec l’url de votre image



La première chose à faire, c’est d’héberger votre image sur un site (Photobucket ou Google Pagecreator) puis récupérer le lien vers l’image que vous collerez dans la balise de code suivante (à l’endroit indiqué).



<img src=" URL DE L’IMAGE " border="0px" />



Il faut noter que la largeur de votre image ne doit pas dépasser celle de la colonne dans laquelle se trouvera le widget. Si par exemple, votre colonne latérale ne dépasse pas 200 pixels de largeur, ne mettez une image de plus de 200 pixels. C’est toujours mieux de mettre une image ayant un pixels inférieur. Je vous conseillerais d’utiliser des images de 80x81 pixels.



Si vous avez une image que vous n’arrivez pas à redimensionner, ajoutez les valeurs width et height au code ci-haut



<img src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />



Vous pouvez orienter l’image, pour qu’elle soit au centre, à gauche ou à droite.



Pour centrer l’image, utiliser ce code :



<center><img src=" URL DE L’IMAGE " border="0px" /><center>



Exemple : Voir notre widget Récente publications à la page d'accueil (Un widget blog, où s'affichent les messages, proposé par Blogger) et Pour les débutants (un widget Linkliste (liste des liens) fournis par Blogger).



Aligner vers la gauche :



<img style= "float :left ; " src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />





Exemple : Voir notre Widget Astuces Blogger à la page d'accueil (un widget Flux offert par Blogger).



Aligner vers la droite



<img style= "float :right ; " src=" URL DE L’IMAGE " border="0px" widht= "80" height="81" />





2. Insérer l'image dans le widget



A. Aller sur la Mise en page de votre blog, puis sur modifier le code html. Là cocher sur "Développer des Modèles de gadget"



B. Trouvez le widget dans lequel vous voulez insérer l'image et mettez le code de celle-ci (voir étape 1) juste après la balise <div class='widget-content'> (Voir exemple ci-après )





<b:widget id='Feedjit' locked='false' title='Live Traffic' type='HTML'>

    <b:includable id='main'>

        <b:if cond='data:title'>

            <h2><data:title/></h2>

        </b:if>

        <div class='widget-content'>

<center><img src=" URL DE L’IMAGE " border="0px" /><center>

            CONTENU DU WIDGET

        </div>

    </b:includable>

</b:widget>



Si la balise <b:if cond='data:title'><h2><data:title/></h2></b:if> se trouve après celle <div class='widget-content'>, mettre le code de l'image après cette première.





<b:widget id='LinkList3' locked='false' title='Nom du widget ' type='LinkList'>

<b:includable id='main'>

 <div class='widget-content'>

<center><img src=" URL DE L’IMAGE " border="0px" /><center>

    <b:if cond='data:title'><h2><data:title/></h2></b:if>

   <ul>

     <b:loop values='data:links' var='link'>

       CONTENU DU WIDGET

     </b:loop>

   </ul>

    </div>

</b:includable>

</b:widget>





Enregistrez votre modèle puis allez apprécier le résultat.



Si vous avez bien suivi les instructions, tout se passera bien.



A+





Vous pouvez voter pour cet article sur : Scoopeo !TapemoiBlogastyWikioDiggons



Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.