29 janv. 2013

Widget Libellés En Nuage De Mots-Clé Avec Animation Flash

libellés Nuage Mots Clé Animés
Dans cet article, je vais vous montrer comment installer la nouvelle version du Widget Libellés En Nuage De Mots-Clé Avec Animation Flash dans Blogger Blogspot.
L'installation simple, rapide et sans toucher aucune ligne de code de votre modèle.
Vous pouvez également personnaliser le gadget grâce à un certain nombre d'options telles que la largeur, la hauteur, les couleurs et la vitesse.




Live Démo

Cliquez sur le lien suivant pour voir la démo en live widget libellés en nuage de mots-clé animés :
démo

Ajouter Le Widget Libellés de Mots-Clé Animés Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée par Blogger, sélectionnez "HTML/JavaScript" ➥ choisissez le titre du gadget (ex: Catégories) et copier/coller le code suivant dans le grand rectangle puis cliquez sur "Enregistrer"
<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.TheBlogueur.Blogspot.com/">TheBlogueur</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://TheBlogueur.blogspot.com",
    color          : "333333",
    hoverColor     : "666666",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 230,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://label-cloud.googlecode.com/files/TheBlogueur-new-flash-label-cloud.js"></script>

Configuration Du Gadget

Changer les valeurs des paramètres en rouge pour personnaliser l'affichage du gadget :

blogurl : remplacer http://theblogueur.blogspot.com avec l'adresse de votre blog.
color : couleur du texte
hovercolor : couleur au survol.
backgroundColor : couleur de l'arrière plan.
size : taille du texte.
speed : vitesse de rotation des mots-clé.
width : largeur en pixel.
height : hauteur en pixel.
transparency : remplacer true par false pour désactiver l'effet de transparence.

Pour obtenir les codes couleurs, consultez les liens suivants :
Code Des Couleurs HTML
Générateur De Code Couleur Hexadécimal

28 janv. 2013

Widget Commentaires Récents Avec Avatars Pour Blogger

Commentaires Récents Icone
Ajouter le widget "Commentaires Récents Avec Avatar" pour afficher les derniers commentaires de votre blog Blogger.
Si vous voulez contrôler complètement ce qui apparaît sur votre blog, voici un article présentant une fonction affichant la liste des derniers commentaires.
Le gadget "Commentaires Récents" affiche le nom du commentateur, son avatar, un extrait du commentaire et un lien lire la suite.
En plus, le widget est facile à utiliser et à personnaliser.




Démonstration

Voici une capture d'écran du résultat final :
Recents Comments With Avatar

Ajouter Le Widget Commentaires Récents Avec Images à Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ choisissez le titre du gadget (ex: Commentaires Récents) et copier/coller le code suivant dans la grande case puis cliquez sur "Enregistrer"
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !

important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-

shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 30,
    roundAvatar    = true,
    characters     = 40,
    showMorelink    = true,
    moreLinktext    = "Suite »",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://commentaire-recents.googlecode.com/files/Tblogueur.js"></script>
<script type="text/javascript" src="http://www.theblogueur.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Personnalisation Du Gadget

Vous pouvez,si vous voulez, personnaliser le widget "Commentaires Récents" en modifiant les valeurs suivantes :
    numComments     = 5➥ Le nombre de commentaires à afficher
    showAvatar     = true,
Si vous voulez désactiver l'affichage d’avatars remplacer true par false
    avatarSize     = 30,
La taille de l'avatar en pixel, remplacer 30 avec la valeur que vous voulez
    roundAvatar    = true, Pour afficher les avatars en carrés, remplacer true par false
    characters     = 40,
le nombre de caractère à afficher
    showMorelink    = true,
Afficher ou non un lien lire la suite
    moreLinktext    = "Suite »",
le titre du lien lire la suite
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
  url des avatars par défaut
 
Vous devez absolument modifier http://www.theblogueur.blogspot.com avec l'adresse de votre blog.

2 janv. 2013

Ajouter Un Champ De Recherche Interne Personnalisé Dans Blogger

Champ De Recherche Interne
Ajouter un champ de recherche interne personnalisé dans votre blog Blogger afin de permettre à vos visiteurs de retrouver directement ce qu'ils cherchent sans passer par la liste des libellés ou des archives.
Vous pouvez placer ce champ de recherche au début ou à la fin de chaque article, dans le corps du message, dans le header ou dans la barre latérale.






Insérer Un Champ De Recherche Interne Personnalisé Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ copier/coller le code de la zone de recherche puis cliquez sur "Enregistrer"

Style 1 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRHeJ_eChqX9L3FqcD6I0FcDGc9_2ThNAvCWn534gugONGelrhv6xwq3Gf2X7dnSUEOtTMsKfCZ913uGfb7JMJll_ArMz-Od_NyxDqfAmm2QGcsFesDUyLwnWZPkXA2hOz96tbCklw5k/s1600/champ-recherche1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 2 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffdNHezv_fRvQQDw0noRI2TKzKtfr8uJjkLa3BglIKHooBE4UnIhNJ3Dlbqsi0X90rJrZ6VQe0-JkIKZ7pRPFPs0VBuTJDHOgVLz3HCMuWvXRKem7b-7ynLqRA4zI3ot5e_KwRV7WibQ/s1600/champ-recherche2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 3 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQFXrzKhNDO_1c2O8B4L0HzOZXrhiVHMKuLoaLOWuMibSOwIgn-o3cQ6nrxKseSjJmLAA-ZfuC9xkMEjeA0osx99kQDdFn-2ywqbUQ930sFj1-OzcuyR8FjPFwrIbgY_vuufPxGygwDg/s1600/champ-recherche3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..." onfocus='if (this.value == "Recherche...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Recherche...";}'/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 4 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPC0SfaH5hZh6OTDJC8Vgz_uHDC6s-QyBftdvGyjpNhHmBznX7NOrSwOk0V6YzJ4yXmXc1HF0bFjFN4y7GsgtukS3guCP-2KfcZ0m00n3P7KQy55v63XuXmuprPjj4fz-dZEBO9WkHKZI/s1600/champ-recherche4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche"/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 5 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEAnKGaNjSNGwpn5Vt2HMlPv_jg7loZ0XvV860jXJUbm0TmF_V8i1Qslt2rAYsLxfj0tm65_g1lWlGBnOsnljdH7yovkM25ldBVC8c8APB6lJDe40qvEs58LtAcj_XH-ALxqnNWBrIYU/s1600/champ-recherche5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..."/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Style 6 :
<style type="text/css">
#tb-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdqNW9KPWY3gLz8gN8PrJTzFy1wL415BMNxIpLf4dKUNpg2hLiyAdbhmk7b0Y79MTZFyy8ojG7_UtSS5JLCW5oEmTVUqbfA3Zx8lchh0izpqrM8llaHWRUBJVLjll-Yjv3IdmdrWAzLY/s1600/champ-recherche6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#tb-searchform{display: block;padding: 12px;margin:0;}
form#tb-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="tb-searchbox">
<form id="tb-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Recherche..."/>
    <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzAB4LzYJjBRQELyfMt_sk2vZEqFaVFkGLnQ1R3DL0DwvXEv8H9EAXzNQ5TpLw75QmRJ81cW5hYAC_i-jiZrjUrK5WqongDmGF4_Y_JWR7HpmhXjI5HSct3025wmhd3DIkYan4fAPtx4/s1600/blank.gif" id="sbutton" />
</form>
</div>

Advertissement