mars 2012 ~ The Blogueur

31 mars 2012

Testez Votre PageRank Calculé En Live

3/31/2012 Featured, Outils Blogueur 2 comments

Tester votre PageRank calculé en direct.
Définition Wikipédia :
Le PageRank ou PR est l'algorithme d'analyse des liens concourant au système de classement des pages Web utilisé par le moteur de recherche Google. Il mesure quantitativement la popularité d'une page web. Le PageRank n'est qu'un indicateur parmi d'autres dans l'algorithme qui permet de classer les pages du Web dans les résultats de recherche de Google.

Test De PageRank Calculé En Direct

Utilisez cet outil gratuit pour Vérifiez le Page Rank de votre blog ou n'importe quelle page Web!

Tester autres URLs - Cliquez ici pour rafraîchir la page et vérifier d'autres URLs

24 mars 2012

Intégrer Une Vidéo Facebook Sur Son Blog

3/24/2012 Tutoriel Blogger 2 comments

Je vais vous montrer dans cet article comment intégrer une vidéo Facebook sur son blog ou site.

Attention toutefois au droits d'auteurs concernant la publication des vidéo Facebook et rappelez-vous que vous n'avez pas le droit de publier une vidéo si celle-ci est sous Copyright.

Comment publier une vidéo Facebook sur son site/blog

D'abord, vous devez vérifier les paramètres de confidentialités de la vidéo. Elle doit être publique pour que tout le monde puissent le voir.
Ensuite vous devez retrouver l'adresse de la vidéo. Cliquez alors sur son titre pour vous rendre sur une page avec une URL de la forme suivante :
https://www.facebook.com/video/video.php?v=3443888143545
se sont les numéros verts qui nous intéresse dans cette URL.

Maintenant copier/coller le code ci-dessous dans la page que vous voulez lui ajouter la vidéo et remplacer les XXXX par les numéros (verts) à la fin de L'URL : dans notre exemple ça sera 3443888143545

Voici le résultat

Vous pouvez personnaliser la dimension de la vidéo en changeant les valeurs de Height et Width.

23 mars 2012

Placer Les Liens De Navigation Blogger En Haut De Page

3/23/2012 Blogger Hacks, Tutoriel Blogger No comments

Voici un tutoriel très simple vous explique comment mettre les liens de navigation qui se trouvent par défaut au bas du blog :
"Messages Plus Anciens", "Accueil", "Messages Plus Récents"
en haut des articles dans Blogger.

Placer ces mentions en haut de la page permet aux visiteurs qui ne lisent pas un message, de passer immédiatement à une autre page au lieu de quitter le blog.

Comment placer les liens de navigation en haut de page

Important : Télécharger votre modèle avant de commencer.

1. Connectez vous à Blogger et allez à "Présentation" > "Modifier le code HTML"
2. Cochez la case "Développer des modèles de gadgets"
3. Recherchez le code suivant :

4. Ajouter le code ci-dessous, juste après, et enregistrer votre modèle.

<b:include name='nextprev'/>

22 mars 2012

Résumé Automatique De Vos Articles Avec Image

3/22/2012 Blogger Hacks, Tutoriel Blogger 4 comments

Dans ce tutoriel, je vais vous expliquer comment afficher un résumé automatique de vos articles avec image et lien "Lire la suite" dans la page d'accueil, des archives, des libellés et de recherche.

Installation Du Hack : Résumé avec Image et "Lire la suite"

Important : Télécharger votre modèle avant de commencer.

1. Connectez-vous à blogger
2. Allez à "Présentation" > "Modifier le code HTML"
3. Cocher la case "Développer des modèles de gadgets"
4. Recherche la balise </head> et juste avant copier/coller le code suivant :

# Vous pouvez changer les valeurs numériques en fonction de votre utilisation.

summary_noimg = 430;          :La longueur du résumé d'article sans image
summary_img = 340;              :Longueur du résumé d'article avec image
img_thumb_height = 100;       :Hauteur en pixel de l'image de résumé
img_thumb_width = 120;        :Largeur en pixel de l'image de résumé

5. Maintenant recherchez la balise <data:post.body/> et juste avant copier/coller le code suivant :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>

</div>

6. Enregistrer votre modèle.

21 mars 2012

Remplacer "Messages Plus Récents", "Messages Plus Anciens" & "Accueil" Avec Des Images

3/21/2012 Blogger Hacks, Featured, Tutoriel Blogger 9 comments

Dans ce tutoriel, je vais vous montrer comment remplacer les liens de navigation situées au-dessous des articles : "Messages Plus Récents", "Accueil" et "Messages Plus Anciens" avec des images.
Si vous utilisez la barre de navigation numérotée pour les pages, ces liens ne vont apparaître que sur les pages d'articles.

Important : Télécharger votre modèle avant de commencer.

1. Connectez-vous à Blogger et allez à "Présentation" > "Modifier le code HTML"

2. Cochez la case

Remplacer "Messages Plus Anciens"

Rechercher <data:olderPageTitle/> et le remplacer par le code ci-dessous :

Remplacer "Messages Plus Récents"

Rechercher <data:newerPageTitle/> et le remplacer avec le code suivant :

Remplacer le lien "Accueil"

Rechercher <data:homeMsg/> et le remplacer avec le code ci-dessous :

Vous pouvez mettre vos propres icônes en remplaçant les URL des images dans les codes ci-dessus.

Télécharger d'autres modèles de boutons

Cet ensemble d'icône a été créer par MyBloggerTricks. Vous pouvez télécharger ce pack gratuitement sur MyBloggerTricks.com
Cliquez sur l'image pour commencer le téléchargement

Widget Articles Similaires Pour Blogger Blogspot

3/21/2012 Tutoriel Blogger, Widget 25 comments

Dans ce tutoriel nous allons voir comment intégrer le widget "Articles Similaires Pour Blogger" qui affiche les messages similaires (articles de la même catégorie) après chaque article de votre blog Blogger.
Ce widget augmente également le référencement et le nombre de pages vues sur votre blog. Il est conseillé donc de l'installé.

Comment installer le widget articles similaires

Avant de commencer, vous devez enregistrer une copie de votre modèle sur votre disque dur.

1. Connectez-vous à votre blog et allez à "Présentation" > "Modifier le code HTML" > cochez la case "Développez des modèles de gadgets"

2. Maintenant, ajouter le code CSS ci-dessous juste avant la balise ]]></b:skin>

#related-posts {
    padding:10px;
    display:block;
    clear:both;
}
#related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.75em;
    margin-top: 0;
    padding-top: 0;
}
#related-posts a:hover{
    text-decoration:underline;
}
#related-posts ul{
    list-style-type:none;
    margin:10px 0;
    padding:0;
}
#related-posts ul li{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRPWpQbkPM0oOAk3ziQGEIJbWS0RrgaGTXM4JqIW38VxNKnDT2UdIIaj1NpdStUsv9TdZYMuUveuQUJRozy64qDfe_DFZfzOpsggT3D2edSf61gkw-WeDl9nmR1vdwFwGTtE3yNiq8TEh/s320/w2barrow.gif") no-repeat scroll left center transparent;
    display: block;
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-top: 0;
}

3. Ajouter le code JavaScript suivant juste avant la balise </head>

var relatedpoststitle="Related Posts";

</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

# Vous pouvez changer le titre du widget en modifiant la valeur "Related Posts"

var relatedpoststitle="Related Posts";

4. Maintenant, cherchez l'une des lignes suivantes :

5. Et ajouter le code suivant juste après

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in- script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";

var maxresults=5;

removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

var maxresults=5 : c'est le nombre d'articles similaires à afficher; Vous pouvez changer cette valeur avec le nombre que vous voulez.

6. Enregistrer votre modèle.

Le widget "Articles Similaires" est installé maintenant sur votre blog. Vous pouvez le personnaliser en modifiant le code CSS.
Si vous rencontrez des problèmes lors de l'installation, vous pouvez me contacter via les commentaires.

Le script "Articles similaires" est réalisé par Blogger Plugins.

Widget Horoscope Français Pour Blog

3/21/2012 Widget 11 comments

Widget Horoscope français pour votre blog.
Ajouter Gadget horoscope gratuit quotidien signe par signe à votre blog Blogger.
Laissez vos visiteurs choisir leurs date de naissance et consultent l'horoscope sous quatre angles :
Amour, Santé, Travail, Finance.

Ajouter Widget Horoscope à Votre Blog Blogger

Démonstration : 

Pour installer le gadget Horoscope dans Blogger, suivez les étapes suivantes :
Connectez-vous à Blogger et allez à
"Présentation" > "Éléments de la page" > Cliquez sur le lien "Ajouter un Gadget"
Dans la liste proposée par Blogger, choisissez le gadget "HTML / Javascript", copier/coller le code ci-dessous et cliquez sur "Enregistrer"

20 mars 2012

Supprimer Les Liens De Modification Rapide Dans Blogger

3/20/2012 Tutoriel Blogger 2 comments

Les liens (ou boutons) situés à côté des articles Pencil Blogger

et des widgets Wrench Blogger

vous permettent de modifier rapidement et directement vos messages et gadgets sur votre blog sans la nécessité d'avoir retourner au tableau de bord.
Ces icônes apparaissent uniquement lorsque vous êtes connecté à Blogger.
Nous allons voir dans ce tutoriel comment cacher ces liens.

Quelle est l'utilité de supprimer ces liens?

Le nombre de liens externes sera réduit ce qui constitue une petite amélioration au niveau référencement.

L'inconvénient de supprimer ces liens

Vous ne verrez plus le crayon d'édition rapide, ni l'icône de modification externe des widgets.
Si vous souhaitez modifier un gadget vous devrez, à chaque fois, aller à "Présentation" > "Éléments de la page"

Comment supprimer les liens de modification rapide dans Blogger

1. Connectez-vous à Blogger, allez à "Présentation" > "Éléments de la page" et cliquez sur le lien "Modifier" situé en bas à droite de "Messages du blog"

Décochez l'option "Afficher le lien modification rapide"

et cliquez ensuite sur "Enregistrer"

2. Allez à "Présentation" > "Modifier le code HTML" et cliquez sur la case "Développer des modèles de gadgets"
Remplacez toutes les occurrences de

<b:include name='quickedit'/>

Avec

3. Enregistrer votre modèle.

Voilà, vous ne verrez plus de liens de modification rapide sur votre blog.

19 mars 2012

Supprimer Complétement La Barre De Navigation Blogger

3/19/2012 Tutoriel Blogger No comments

Nous avons vu précédemment que nous pouvions cacher la barre de navigation Blogger en utilisant le CSS :
Cacher la barre de navigation Blogger

Je vais vous montrer dans cet article comment supprimer complétement cette barre de votre modèle.

Supprimer Complétement La Barre De Navigation Blogger

1. Connectez-vous à Blogger et allez à "Présentation" > "Modifier le code HTML"

2. Dans le code de votre modèle, cherchez <body> et juste avant cette balise collez la ligne suivante :

3. Maintenant enregistrez votre modèle; Blogger va vous demandé de confirmer la suppression du nav bar. Cliquez donc sur le bouton "Supprimer les widgets".

4. Maintenant, votre barre de navigation est complètement supprimé de votre Blog.

Avantages de cette méthode

Vous allez non seulement cacher la barre de navigation, mais elle sera complétement désinstaller.
Le code de navbar ne sera plus présent dans votre modèle. Ainsi, votre blog aura un code XHTML plus valide ce qui constitue une petite amélioration au niveau référencement.

Inconvénients de cette méthode

En utilisant cette méthode, vous allez supprimer aussi les boutons de modification rapide des articles Pencil Blogger

et de widgets Wrench Blogger

.
Ainsi, ce bouton

qui permet de supprimer directement les commentaires à partir des pages de votre blog sera également supprimé.

Comment récupérer la barre de navigation

Si vous avez supprimé la barre de navigation de votre blog et vous voulez maintenant la récupérer, supprimer le code que vous avez ajouté; càd supprimez le code de l'étape 2 et enregistrez ensuite votre modèle.

Ajouter Un Fil D'ariane à Votre Blog Blogger

3/19/2012 Blogger Hacks, Featured, Tutoriel Blogger 4 comments

Le breadcrumb (traduction: miette de pain) est le terme anglais pour désigner le fil d'Ariane. Cela fait référence à un élément de navigation sur les sites web. Cet élément indique à l'utilisateur où il se situe dans la hiérarchie du site, par rapport à la page d'accueil. A titre d'exemple, le breadcrumb pourrait indiquer à l'utilisateur dans quel catégorie il se situe, dans quelle sous-catégorie et sur quelle page de cette sous-catégorie.
Voici un exemple :
Accueil >> Tutoriel Blogger >> Ajouter un fil d'ariane à Blogger

Nous allons voir dans ce tutoriel comment ajouter un breadcrumb/Fil d'Ariane à Blogger Blog.

Ajouter Un Fil D'Ariane à Blogger

Vous savez maintenant ce qu'est un fil d'Ariane, suivez les étapes suivantes pour l'ajouter à votre blog blogger :

1. Allez à "Présentation" > " Modifier le code HTML" > Cochez la case " Développer des modèles de gadgets"

2. Recherchez (avec CTRL+F) la ligne suivante dans votre modèle

<b:include data='top' name='status-message'/>

Et juste avant collez le code suivant

<b:include data='posts' name='breadcrumb'/>

3. Maintenant recherchez la ligne suivante

<b:includable id='main' var='top'>

Si vous trouvez deux occurrences, placez-vous sur la deuxième et juste avant elle ajoutez le code suivant

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

</b:if>

</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Ce code affichera uniquement le dernier libellé d'article dans le fil d'Ariane. Si vous souhaitez afficher tous les libellés, alors vous devrez supprimer les 2 lignes en bleu.

4. Enregistrer votre modèle.
)
5. Si vous souhaitez réduire la taille du fil d'Ariane, ajoutez le code CSS suivant à votre modèle ( juste avant la balise ]]></b:skin> )

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

18 mars 2012

Comment Supprimer Les Nombres à Coté Des Labels

3/18/2012 Tutoriel Blogger No comments

Nous allons voir dans cet article comment cacher ou supprimer les chiffres qui apparaissent à côté des libellés et qui indiquent le nombre de messages qui portent ces libellés.

Comment Supprimer Les nombres à Côté des Labels Dans Blogger

1. Connectez-vous à votre blog et allez à "Présentation" > "Modifier le code HTML" > cochez la case "Développez des modèles de gadgets"

Cherchez (avec CTRL F) la ligne suivante et supprimez toutes ses occurrences.

2. Enregistrer votre modèle.

17 mars 2012

Comment Changer La Couleur De Sélection Avec CSS

3/17/2012 Truc Et Astuces 1 comment

Nous allons voir dans ce tutoriel comment modifier la couleur de sélection du texte.
Lorsque vous sélectionnez du texte, par exemple dans le but de faire un copier-coller d'une partie d'un article ou d'un lien, vous vous êtes déjà rendu compte que par défaut le texte sélectionné devient blanc sur fond bleu.
Pour modifier ces couleurs, on va utiliser un code CSS3, comme vous devez le savoir, le CSS3 n’est pas implanté sur tout les navigateurs.

Comment Modifier La Couleur De Sélection Avec CSS

Pour personnaliser votre site en adaptant la couleur de sélection aux couleurs de votre création web, voici le code CSS qui vous permettra de le faire
Par exemple, si vous voulez un texte blanc sur fond rouge:

::-moz-selection { /* Pour firefox */
background:red;
color:white;
}
::selection { /* Pour les autres navigateurs*/
background: red;
color:white;
}

Avec ce code CSS vous pourrez donc changer la vieille couleur de sélection par défaut..

Gérer Les Liens Externes Avec JQuery

3/17/2012 Truc Et Astuces 1 comment

Dans ce tutoriel, je vais vous montrer comment gérer les liens externes de votre site web/blog en utilisant JQuery.
Après l'ajout de ce script pour votre blog Blogger ou site web, tout lien externe s'ouvrira dans une nouvelle fenêtre et peuvent être identifier des autres liens.
Ceci est très facile à faire et vous pouvez voir une démo ici.

Gérer Les Liens Externes Avec JQuery

Pour ajouter l'effet Jquery sur les liens externes de votre site suivez les étapes indiquées ci-dessous :

1. Connectez vous à votre espace d'administration Blogger et allez à
"Présentation" > "Modifier le code HTML"

2. Cherchez (avec CTRL+F) le mot : </head>

3. Copier le code ci-dessous et collez-le juste avant la balise </head>.

4. Enregistrez votre modèle.

Maintenant, tous les liens externes présentés sur votre site/blog s'ouvrent dans des nouvelles fenêtres et peuvent être identifier des autres liens.

Redirection JavaScript Avec Temps à Rebours

3/17/2012 Truc Et Astuces No comments

Dans ce script, je vais vous montrer comment faire une redirection avec un temps à rebours (en millisecondes).
Vous devez placer le code ci-dessous avant la balise </head>; Vous pouvez aussi le placer dans un gadget "HTML/JAVASCRIPT" .

Code JavaScript De Redirection Avec Temps à Rebours

Il suffit de remplacer 5000(5 secondes) par le nombres de millisecondes avant la redirection et http://www.theblogueur.blogspot.com par la page de destination.

Bannières Publiciataires Animées Gratuites

3/17/2012 Outils Blogueur No comments

Je vous propose l'une des plus belles collections de bannières publicitaires pour Blogger, Wordpress, Typepad et toutes autres plateforme de blogs.
Le pack contient 13 bannières 125*125 animées et extrêmement professionnel.

Télécharger

16 mars 2012

Widget Articles Alétoires Avec Images Pour Blogger

3/16/2012 Widget 16 comments

Ce Widget vous permet d'afficher une sélection de messages de votre blog d'une manière aléatoire et automatique.
Lorsque la page est actualisée ou que vous naviguez sur le blog, de nouveaux messages s'affichent aléatoirement dans le widget.

Comment Ajouter Le Widget Articles Aléatoires/Messages Au Hasard à Blogger

Rendez vous sur "Modèle" >> "Modifier le code HTML" >> "Traiter"
Recherchez (avec CTRL+F) la ligne suivante :

]]></b:skin>

et insérer ce code juste avant:

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px;}
#random-posts li{list-style-type:none;}

Allez maintenant à "Mise En Page" > "Ajouter un Gadget" > choisissez "HTML/JavaScript" et copier/coller le code suivant :

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV93feGD3Fg6YZMpLu1B7yUR8QKY6XJTSNPPRsmSKi9EznY6TU-EQf21fWP-akYbEuDhtln5StkuHzmQNGGSIK1z0776vDo3weLwnGjqo06xFr0XHcuH7pBnE5UIWNquy9bSLvcq1heT4/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

var rdp_numposts=5 >> C'est le nombre d'articles à afficher;
Vous pouvez le modifier avec la valeur de votre choix.

14 mars 2012

Widget "Informations Du Visiteur" Pour Blogger Blogspot

3/14/2012 Widget No comments

Ce widget permet d'afficher aux visiteurs de votre blog leurs propres données tel que : l'adresse IP, le nom de la hôte, la ville, l'état, le pays et le fournisseur d’accès à internet...

Démonstration :

Ajouter Widget "Informations Visiteurs" à Blogger Blogspot

Pour ajouter ce widget à votre blog, procédez comme suit :

Connectez-vous à Blogger et allez à
"Présentation" > "Éléments de la page" > Cliquez sur le lien "Ajouter un Gadget"
Dans la liste proposée par Blogger, choisissez le gadget "HTML / Javascript", copier/coller le code ci-dessous et cliquez sur "Enregistrer"

Ajustez le placement du widget sur votre blog et cliquez sur "Enregistrer"

Résoudre Les Erreurs De Script Dans Internet Explorer

3/14/2012 Truc Et Astuces 3 comments

Si vous utilisez Internet Explorer, il est possible qu'une page ne fonctionne pas correctement ou que vous receviez un message d'erreur avec le petit triangle jaune et son ! dans la barre d'état qui ressemble à ce qui suit :

Il y a plusieurs raisons pour lesquelles vous obtenez cette erreur de script dans internet explorer. "La plus probable" est que l'auteur de la page web a tout simplement fait une sorte d'erreur de programmation.

Comment Résoudre les Erreurs De Script Dans Son Site/Blog

Je vais vous montrer comment résoudre ce problème dans Blogger Blogspot

1. Connectez vous à votre espace d'administration Blogger et allez à
"Présentation" > "Modifier le code HTML"

2. Cherchez (avec CTRL+F) le mot : </head>

3. Copier le code ci-dessous et collez-le juste avant la balise </head>.

4. Enregistrez votre modèle.

Internet explorer ne montre plus d'erreurs de votre site / Blog Blogger.

13 mars 2012

Formulaire De Contact Gratuit Pour Votre Site Ou Blog

3/13/2012 Blogger Hacks, Featured, Outils Blogueur, Tutoriel Blogger 81 comments

Créez votre formulaire de contact HTML facilement et gratuitement à l'aide de foxyform.com et insérez le dans votre site ou blog.
C'est simple et rapide, et pas besoin d'avoir de serveur php, un simple accès à votre code source HTML suffit.

I'inscription n'est pas requise. Ainsi, vous pouvez l'ajouter en quelques secondes. Une protection anti spam est intégré et vos visiteurs peuvent soumettre le formulaire de contact sans rafraîchir la page.

Ajouter Un Formulaire De Contact à Votre Site/Blog

Pour créer le formulaire de contact gratuit de "FoxyForm", procédez comme suit :

1. Allez à l'adresse suivante : http://fr.foxyform.com/
2. Sélectionnez les champs que vous voulez inclure dans le formulaire et décider s'ils sont obligatoires ou non.

3. Personnalisez la couleur, le font, la police... pour votre formulaire de contact pour mieux correspondre au design de votre site/blog.

4. Entrez une adresse e-mail valide pour recevoir les données envoyées du formulaire.

5. Maintenant, appuyez sur le bouton

Le code HTML pour votre formulaire de contact s'affiche. Copiez et collez ce code sur votre site.

6. Maintenant connectez vous à Blogger, créez un message ou une page, cliquez sur l'onglet "Modifier le code HTML" et copier/coller Le code HTML de "FoxyForm" dans le corps du Message comme sur l'image suivante :

Pour voir une démonstration du formulaire de contact "FoxyForm", consultez notre page de contact.

L'importance de ce formulaire de contact est qu'il peut soumettre sans rafraîchir la page et affiche un message de remerciement après l'envoi des données.

Ajouter Yahoo Media Player à Blogger Blogspot

3/13/2012 Blogger Hacks, Featured, Tutoriel Blogger, Widget 6 comments

Yahoo Media Player est l'un des moyen les plus simples pour lire des fichiers audio sur votre site ou blog. Il est très facile à intégrer dans votre site et s'affiche uniquement lorsque vous cliquez sur le nom d'un fichier audio.
Yahoo Media Player ne prend pas beaucoup de temps dans le chargement et capable de jouer des fichiers uniques ou bien des playlist, qui fonctionne très simplement.

les principales caractéristiques de Yahoo Media Player :

Fait l'intégration de l'audio à votre site/Blog avec une simple ligne de code HTML.
Trouve automatiquement tous les liens audio sur votre page, tourner la page dans une playlist.
Lit toutes les entrées de votre blog avec un seul clic.
Vous permet de mettre les boutons de lecture où ils appartiennent: EN CONTEXTE.
Laisse l'utilisateur dans la page plutôt que le rediriger à un lecteur multimédia.
Capte vos images pour faire des couvertures.
Ne nécessite pas de téléchargement, d'installation et de maintenance.

Comment Ajouter Yahoo Media Player à Votre Blog Blogger

Suivez les étapes suivantes pour intégrer Yahoo Media Player sur votre blog ou site web :

1. Connectez-vous à votre espace d'administration Blogger et allez à :
"Présentation" > "Modifier le code HTML"

2. Cherchez (avec CTRL+F) le mot : </head>

3. Copier le code ci-dessous et collez-le juste avant la balise </head>.

4. Enregistrez votre modèle

5. Allez à "Présentation" > "Éléments de la page" et cliquez sur "Ajouter un gadget"

6. Sélectionnez "HTML/Javascript" et ajoutez le code ci-dessous (Vous pouvez également ajouter ce code dans la section Modifier le code HTML de votre éditeur de message) :

<a href="DIRECT_URL_OF_YOUR_MP3-FILE">NOM-DU-FICHIER-MP3</a>

7. - Remplacez DIRECT_URL_OF_YOUR_MP3-FILE avec l'URL direct de votre fichier mp3
- Remplacez Name_Of_the_Mp3_File avec le nom que vous voulez.

8. Voici une démonstration :

First link

Second link

Third link

Vous pouvez voir plus d'informations à propos de Yahoo Media Player à partir du lien suivant
http://mediaplayer.yahoo.com

Ajouter Traduction Google Avec drapeaux à blogger

3/13/2012 Widget 5 comments

Google propose un outil formidable qui est la traduction des langues. Nous pouvons utiliser cet outil pour traduire des sites web et des blogs.

Maintenant Ce widget permet à vos lecteurs de traduire les pages de votre blog dans leur langue.

Les langues disponibles au clic d'un drapeau sont :
Anglais (Américain et Britannique), Espagnol, Italien, Allemand, Portugais, Suédois, Danois, Russe, Arabe, Chinois, Japonais, Coréen, Serbe, Néerlandais, Finnois, Polonais et Turc

Voici une capture d'écran du widget

Comment Installer Le Widget Google Traduction Avec Drapeaux Dans Blogger

Connectez-vous à Blogger et allez à
"Présentation" > "Éléments de la page" > "Ajouter un Gadget"
Dans la liste proposée par Blogger, choisissez le gadget "HTML / Javascript", coller le code ci-dessous et cliquez sur "Enregistrer"

<div style="text-align:center;"><a href='http://www.theblogeur.blogspot.com' style='display:none;'>blogger</a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8');return false;" title="American"><img style="cursor:pointer; cursor:hand;" alt="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpD9rRznEX55-9gezV3ppfzXmeQV8ixnLcpCa5m40-SCNVl88WlOKhTrQb4DKggPxkavn54mrOpLPl_Nr5odk11ymTm78Eg4YHUzQoPL6QS_r0qB60e8Wami_mA2PzldjnqNZYJXYsoE/s1600/USA.png" title="Translate this page to American"/></a><a target="_blank" rel="nofollow"
onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;"title="English"><img style="cursor:pointer; cursor:hand;" alt="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZelcVObrkr4VYEZnvft-kSaGqm9t8ODqptqBMWsniQrQhBjaP0evyIfEsUHfbZ4mA75vS_bFZGFQiJ3qOcnf-8za5KHAKRAkL-FHHDZ_qQBIUylSes8lVkslP0kmEIFZbbFGkOzkIpo/s1600/England2.png" title="Translate this page to English"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Ces&hl=fr&ie=UTF8');
return false;"><img style="cursor:pointer; cursor:hand;" alt="español" src="http://2.bp.blogspot.com/-
d3qraf867nI/T17gJzjC97I/AAAAAAAAAuo/qP95gCklqds/s1600/Espagne.png" title="traducir esta página al español"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cit&hl=fr&ie=UTF8');
return false;"><img style="cursor:pointer; cursor:hand;" alt="Italiano" src="http://3.bp.blogspot.com/-
c7mxCXZ5ijs/T17gWj11tlI/AAAAAAAAAuw/TBoPjfb18Wk/s1600/Italie.png" title="Traduci questa pagina in Italiano"/></a><a href='http://www.theblogueur.blogspot.com' style='display:none;'>blogger</a><a target="_blank" rel="nofollow" onclick="window.open
('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img
style="cursor:pointer; cursor:hand;" alt="deutsch" src="http://1.bp.blogspot.com/-6u-
zhJEYfhM/T17gj6pkELI/AAAAAAAAAu4/2HSEX1vD1ow/s1600/Allemagne.png" title="diese Seite auf deutsch"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cpt&hl=fr&ie=UTF8'); return
false;"><img style="cursor:pointer; cursor:hand;" alt="Português" src="http://3.bp.blogspot.com/-
mwl0YzXNFW0/T17gw692FMI/AAAAAAAAAvA/lzYaqk0Nd3A/s1600/Portugal.png" title="Traduzir esta página em Português"/></a><a target="_blank"
rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cda&hl=fr&ie=UTF8');
return false;"><img style="cursor:pointer; cursor:hand;" alt="
Oversæt denne side til dansk" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg94q_dPpjjvKkVw-JORBU-BXaPvezS8tGmwyOV8XHPyCX_mWwhMozjQj1DBYTCEyQyPPlr5s7W_Ppaxs4BrS-Pl30qETNh5Zw0GHDnA8jX7sHUGtgZxemyFuA73tLlQqsUC2jA5c7lEQE/s1600/Danemark.png" title="Dansk"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent
(location.href)+'&langpair=fr%7Csv&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Översätt webbplatsen på svenska" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6UCUtEN8i9P2vpSIKTN-YkldRLhyJ8OCcPOrq9R9QefvRG0U0dLl7VnCwuo6TDw1WMcGkSvNIUASXZqe03haKKTNnTLZUTaL-zENQeOBLIvncJRqUu6GR6vFkWtUMLncC9w1xvj0n_A/s1600/Suede.png" title="Översätt webbplatsen på
svenska"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent (location.href)+'&langpair=fr%7Car&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="العربية"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmYqAX_sM5-fRo0CeplSb-vUiu8acQb8GtoDlz47sHmVRwiLfbev7k4y1RXImBz_k5tr0RHdu6qCrZo-dlwzL6nELHAl5Xo1L0F3EnmBNX_koASOEKMIGPgjDzYVM2VP2dzMijhyBLMJ8/s1600/Arabie.png" title="ترجمة هذه الصفحة إلى العربية"/></a><a target="_blank"
rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Czh-
CN&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="中文" src="http://2.bp.blogspot.com/-
VpTjATuPgZU/T17hlzFWTZI/AAAAAAAAAvg/iLvSWxYOjGk/s1600/Chine.png" title="翻译此页成中文"/></a><a target="_blank" rel="nofollow" onclick="window.open
('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cru&hl=fr&ie=UTF8'); return false;"><img
style="cursor:pointer; cursor:hand;" alt="Русский" src="http://3.bp.blogspot.com/-
UUwuHlnUpm4/T17h0opaTSI/AAAAAAAAAvo/hYRlO1Z8XkM/s1600/Russie.png" title="Перевести эту страницу на русский"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cja&hl=fr&ie=UTF8');
return false;"><img style="cursor:pointer; cursor:hand;" alt="日本語" src="http://3.bp.blogspot.com/-hM2dEI7-bHo/T17iA7QQrcI/AAAAAAAAAvw/kyz-
KDecwk8/s1600/Japon.png" title="このページを日本語に翻訳"/></a><a href='http://www.theblogueur.blogspot.com.com' style='display:none;'>blogger</a><a
target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr
%7Cko&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="한국어" src="http://1.bp.blogspot.com/-4VbNli-Uc-
I/T17iYqJLvuI/AAAAAAAAAv4/o05A6DOFsPM/s1600/Core.png" title="이 페이지 번역가 한국"/></a><a target="_blank" rel="nofollow" onclick="window.open
('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Csr&hl=fr&ie=UTF8'); return false;" title="English"><img
style="cursor:pointer; cursor:hand;" alt="Српски" src="http://3.bp.blogspot.com/-
LRwP70twJZw/T17imnZfSQI/AAAAAAAAAwA/WSvhcEd2ti0/s1600/Serbie.png" title="
Транслате тхис паге ин Сербиан"/></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?
u='+encodeURIComponent(location.href)+'&langpair=fr%7Cnl&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;"
alt="Nederlands" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mpfIBexqn7jhNhCMMn2ZfYXLHl5XEglQFCmBbgZjsDEhsNKycr_-97klmfQj6UI8NyDAZ82NToyXDj0GNBLTQJTmeqdNIPVWCrnsBuguezi4vgMgSGyD53AhGDFEOEH95g__m-OXaAo/s1600/PaysBas.png" title="Vertaal deze pagina in
het Nederlands"/><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent
(location.href)+'&langpair=fr%7Cfi&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Suomen"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRq33DZ8vOq_OTZrsl3WdblZHtKfbs4-kJezjHMPAIdrHcsEw7gHf2yQRUYKUT6UGIyq3cVwiQBQi_ajTSwkJyrdntjq8b4quHprTsqRUoOZnIWro_MqH_DBKVrG_3zdBUFyPMLwXFNC8/s1600/Finland.png" title="Käännä tämä sivu osaksi
Suomen"/></a></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent
(location.href)+'&langpair=fr%7Ctr&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Türkçe" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpL2os1AXcxz6D3YTNNZrVygbGpe040aRgflXUlBThEhMCpB8-6-HEbvF2i3Fridi3eQ8pur6GwffXD7F_7rtbHF5pk-l4fD6tWkAh1x5noQP6cJFNEHDKUnVtyByvAwYXiRWSnpG8VVI/s1600/Turkey.png" title="Çevirisini Bu sayfa türk"/></a><a
target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr
%7Cpl&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Polska" src="http://2.bp.blogspot.com/-
F762Q3NSIgk/T17jaHMN4qI/AAAAAAAAAwg/OmUHGStqoBk/s1600/Poland.png" title="Przetłumacz tę stronę na język Polski"/></a><div
style="font-size: x-small; text-align: center;"><a href="http://theblogueur.blogspot.com/2012/03/ajouter-traduction-google-avec-drapeaux.html" target="_blank">The </a><a href="http://www.theblogueur.blogspot.com/" target="_blank">Blogueur</a></div></div>

- Une fois cette étape franchie, ajustez le placement du widget sur votre blog et cliquez sur "Enregistrer"

Compteur De Mots Et De Caractères En Ligne

3/13/2012 Outils Blogueur 2 comments

Voici un calculateur en ligne gratuit qui compte le nombre de mots et de caractères (ou lettres) dans un texte avec ou sans espace.
Cet outil peut vous aider dans le référencement de votre blog/site.
Par exemple, vous devez vous assurer que le titre est inférieur ou égal à 66 caractères.

Pour commencer, simplement écrivez ou copiez-collez le texte dans le champ ci-dessous et voyez les résultats apparaître immédiatement.

Écrivez ou copiez-collez votre texte dans le champ suivant :

12 mars 2012

Générateur De Code Couleur Hexadécimal

3/12/2012 Outils Blogueur No comments

Pour ajouter une couleur à vos pages web, il vous faut connaître son code couleur hexadécimal qui sera compris par les navigateurs.
Ci-dessous une dynamique de codes couleurs HTML qui vous permettra d'obtenir des codes pour les couleurs de base.

31 mars 2012

Test De PageRank Calculé En Direct

24 mars 2012

Comment publier une vidéo Facebook sur son site/blog

23 mars 2012

Comment placer les liens de navigation en haut de page

22 mars 2012

Installation Du Hack : Résumé avec Image et "Lire la suite"

21 mars 2012

Remplacer "Messages Plus Anciens"

Remplacer "Messages Plus Récents"

Remplacer le lien "Accueil"

Télécharger d'autres modèles de boutons

Comment installer le widget articles similaires

Ajouter Widget Horoscope à Votre Blog Blogger

20 mars 2012

Quelle est l'utilité de supprimer ces liens?

L'inconvénient de supprimer ces liens

Comment supprimer les liens de modification rapide dans Blogger

19 mars 2012

Supprimer Complétement La Barre De Navigation Blogger

Avantages de cette méthode

Inconvénients de cette méthode

Comment récupérer la barre de navigation

Ajouter Un Fil D'Ariane à Blogger

18 mars 2012

Comment Supprimer Les nombres à Côté des Labels Dans Blogger

17 mars 2012

Comment Modifier La Couleur De Sélection Avec CSS

Gérer Les Liens Externes Avec JQuery

Code JavaScript De Redirection Avec Temps à Rebours

16 mars 2012

Comment Ajouter Le Widget Articles Aléatoires/Messages Au Hasard à Blogger

14 mars 2012

Ajouter Widget "Informations Visiteurs" à Blogger Blogspot

Comment Résoudre les Erreurs De Script Dans Son Site/Blog

13 mars 2012

Ajouter Un Formulaire De Contact à Votre Site/Blog

les principales caractéristiques de Yahoo Media Player :

Comment Ajouter Yahoo Media Player à Votre Blog Blogger

Comment Installer Le Widget Google Traduction Avec Drapeaux Dans Blogger

12 mars 2012

Générateur De Code Couleurs Hexadécimal

Catégories

S’abonner à

Partager

S\'inscrire à The Blogueur

Libellés

Archives du blog

Messages les plus consultés

Membres

Articles Récents

Commentaires Récents

Libellés

Statistique