Nous vous parlions du nouveau Widget MyBloglog il y a quelques jours, même s’il apporte des fonctionnalités très intéressantes vous ne l’avez pas adopté pour la plupart. Effectivement l’ancienne version du Widget MyBloglog est nettement plus discrète mais surtout plus personnalisable, ce qui permet en bricolant un peu de l’intégrer harmonieusement à votre blog.

Vous avez toujours la possibilité de générer un code pour l’ancien widget en cliquant ici :

Nous allons vous apprendre à bricoler le widget MyBloglog pour l’adapter, selon vos envies, à votre blog. Lorsque vous en générez le code, vous avez la possibilité de remplir les champs suivants :

Traduction :

• c_color_heading_bg : couleur de fond du titre
  
• c_color_heading : couleur du titre
• c_color_link_bg : couleur de fond des liens
• c_color_link : couleur des liens
  
• c_color_bottom_bg: couleur de fond du bas

• Width : largeur du widget
• Show Screen Names : affiche uniquement les avatars
• Images size : Avatar en grande ou demi taille
• Rows : nombre de lignes d’avatars affichés
• Title : titre du widget

Voici le code généré que vous allez placer à l’endroit où vous souhaitez qu’il apparaisse dans votre blog :

<script type=”text/javascript” src=”http://pub.mybloglog.com/comm2.php?mblID=2007063000240007&c_width=180&c_sn_opt=y&c_rows=5&c_img_size=f&c_heading_text=Recent+Readers&c_color_heading_bg=005A94&c_color_heading=ffffff&c_color_link_bg=E3E3E3&c_color_link=005A94&c_color_bottom_bg=005A94″></script>

On retrouve dans ce code les différents éléments qui vont vous permettre d’aller plus loin dans la customisation du widget MyBloglog. La première chose qui pose souvent problème est que la couleur de fond de votre blog n’est pas dans la palette proposé par le générateur de code. Pour cela il vous suffit de remplacer au bon endroit le code couleur par celui de votre blog

exemple : c_color_heading_bg=005A94 le fond du titre est en #005A94 il vous suffit de remplacer ce code couleur par celui que vous désirez. Notez que vous pouvez indiquer “none” pour qu’il n’y ait aucune couleur (fausse transparence)

Le reste de la customisation va se faire grâce à la feuille de style (style.css dans la plupart des cas)

Vous pouvez par exemple supprimer les différents liens qui se trouvent en dessous des avatars grâce à la ligne suivante (ajouter dans le css)

table#MBL_COMM td.mbl_fo_hidden, table#MBL_COMM td.mbl_join, table#MBL_COMM td.mbl_join_img {display:none;}

Vous pourrez ensuite attribuer une class css à votre widget avec le rajout suivant :

<div id=”mybloglog”>
<script type=”text/javascript” src=”http://pub.mybloglog.com/comm2.php?mblID=2007063000240007&c_widt…none&c_color_link=none&c_color_bottom_bg=none”></script>
</div>

Cet ajout vous permettra de définir dans votre feuille de style (CSS) des paramètres pour le widget MyBloglog, comme ceci:

#mybloglog {
text-align: left;
float: left;
margin: -107px 0px 0px 16px;
height: 50px;
}

On commence à voir quelques blogs qui présente le widget de manière rectiligne, pour cela il vous suffit de fixer le nombre de ligne (rows) à 1 et une largeur suffisamment grande (500px par exemple).

Il ne s’agit là que d’un exemple de ce que vous pouvez faire, l’attribution d’une classe (ou id) css vous permettra d’aller beaucoup plus loin. Si vous avez des questions n’hésitez pas à les poser dans les commentaires.