Dans la catégorie outils gratuits, celui-ci va être utile à tous les photographes ou concepteurs d'images.

A partir d'une photographie ou d'une image l'outil vous permet de retrouver le blog ou le site qui héberge l'image en question.

Ça permet aussi de voir si d'autres webmasters utilisent vos photos ;)

L'utilisation est très simple, vous "uploadez" une image à partir de votre ordinateur ou entrez l'adresse de l'image / de la page web où elle se trouve, cliquez sur search et la liste des blogs qui ont l'image s'affiche.

L'outil est ici: recherche d'images

Comment héberger des fichiers javascript et des images?

Pour ce tuto nous allons utiliser "google sites" parce que la bande passante est illimité, que l'on peut tout héberger même des images plus grande que 800 px, chose impossible sur picasa.

La première chose à faire c'est d'ouvrir un site google, pour cela allez vous inscrire sur sites.google .
Donnez lui le titre que vous voulez cela n'a aucune importance.

Lorsqu'un code javascript vous intéresse, il faut déjà l'enregistrer sur votre PC avant de pouvoir l'envoyer sur votre site google. Il suffit d'ouvrir le javascript via le bloc note et de l'enregistrer sous format .txt, pensez à lui donner un nom (un seul mot c'est plus simple pour la suite des opérations)

https://sites.google.com/site/votre google site/home/votre page

https://sites.google.com/site/votre google site/home/votre page/postsimilaire.txt

1. Pour ajouter des questions au formulaire, texte simple, cases à cocher et choix multiple.
2. Pour changer le look (l'arrière plan de votre formulaire)
3. Pour récupérer l'adresse du formulaire et l'intégrer sur une page de votre blog.
4. Adresse directe du formulaire que vous pouvez intégrer dans le code HTML de votre template.

<li><a href='#'>About</a></li>

Le pense bête de La blogatière.

C'est un florilège des petits trucs machins choses que l'on oublie ou que l'on ne connait pas mais qui sont indispensables. Il sera complété au fur et à mesure.


Toujours télécharger l'intégralité de son template.

• Avant de modifier le code HTML de votre template, pensez systématiquement à le sauvegarder! 

• Lorsque vous êtes sur votre page HTML, faites Ctrl + f une barre d'outils va s'ouvrir en bas de votre écran, entrez le bout de code recherché et faites défiler jusqu'à celui voulu. "Respecter la casse" signifie exactement comme vous l'avez entré, avec majuscule...

• Ajoutez target='_blank' dans votre lien (nota ' ou " c'est pareil)

<a href="http://blogatiere.blogspot.com/" target="_blank">La blogatière</a>

• Un seul lien vers la bibliothèque jQuery est nécessaire, supprimez tous les autres lorsque vous utilisez plusieurs scripts. Lien qui se présente sous cette forme:

Faire défiler la liste de ses billets les plus lus dans la barre de menu.

En voilà un qui fait partie de la catégorie top widgets, afficher ses billets dans un menu déroulant comme dans le menu ce blog. Blogger vous offre cette option mais avec l'ensemble fixe, c'est plus sympa lorsque ça défile automatiquement ;)

Avant toute chose il faut ajouter "message les plus consultés" dans blogger.

#postlist-spy { 
 font-size: 11px;
 overflow: hidden;
 margin-top: 5px;
 padding : 0; }
#postlist-spy ul { 
 width: auto;
 overflow: hidden;
 list-style-type: none;
 padding: 0;
 margin: 0; }
#postlist-spy li {
 padding: 0;
 margin: 0 0 5px;
 list-style-type: none; 
 float: left; 
 height: auto;
 overflow: hidden;
 line-height: 12px;
 text-indent: 0px;}
#postlist-spy li a {
 margin-left: 0; }
#postlist-spy li a img {
 margin-top: 0;
 float: left; }

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
jQuery(function () {
    jQuery('ul.spy').simpleSpy();
});
(function (jQuery) {
jQuery.fn.simpleSpy = function (limit, interval) {
    limit = limit || 2; // Number popular post shown - maximal 4 default 2
    interval = interval || 10000;
    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var jQuerylist = jQuery(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = jQuerylist.find('> li:first').height();
        // capture the cache
        jQuerylist.find('> li').each(function () {
            items.push('<li>' + jQuery(this).html() + '</li>');
        });
        total = items.length;
        jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
        jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var jQueryinsert = jQuery(items[currentItem]).css({
                height : 0,
                opacity : 0,
                display : 'none'
            }).prependTo(jQuerylist);
            // fade the LAST item out
            jQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                jQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                // AND at the same time - decrease the height of the LAST item
                // jQuery(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    jQuery(this).remove();
                // });
            });
            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }
            setTimeout(spy, interval)
        }
        spy();
    });
};
})(jQuery);
//--><!]]></script>

<div id='postlist-spy'><ul class='spy'>

</div>

Afficher le bouton partager sur blogger.

Je me suis aperçu l'autre jour que le bouton "partager" n'était pas affiché sur mon blog alors que j'avais coché l'option.

Vous savez lequel? celui qui qui est en bas de tous mes billets avec twitter, facebook...

En fouillant mon code HTML j'ai vu qu'il manquait un bout de code comme sur tous les templates personnalisés.

<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>

• Ce terme fait référence aux moteurs de recherche. Tout simplement, montrer aux moteurs de recherche que votre site existe. Comment savoir que les moteurs ont indexés votre site càd que les moteurs sont au courant que votre site existe? Il faut juste interroger le moteur de recherche à l'aide de votre adresse URL en ajoutant " site: "devant l'url. exemple:
  site: http://blogatière.blogspot.com si vous voyez des résultats, c'est que vous avez été indexé. Si on vous dit que la page n'existe pas sous ce nom, c'est que vos pages ne sont pas indexées.

• Il existe de nombreux moteurs de recherche, mais nous ne sommes intéressés que dans le top trois, Google, Yahoo et MSN. Ces 3 moteurs représentent 95% de l'ensemble des requêtes effectuées sur les moteurs de recherches en France, avec Google en tête (80% estimation) d'où l'importance d'être bien positionné sur ce moteur.

• Si vous allez sur Google et tapez dans une requête, exemple "comment faire de l'argent avec son blog" Google cherchera dans toutes les pages qu'il a indexé (lu et enregistré) de tous les sites, à savoir qu'il explore continuellement sur internet afin de vous présenter une liste des sites les plus pertinents concernant votre requête. Le but étant de sortir dans les premières positions afin d'être vu par le maximum d'internautes.

• Les "génies" de Google ont mis au point des algorithmes qui déterminent la pertinence qui repose sur plusieurs facteurs. Nous connaissons sans en être certains des facteurs qui influe sur les sites et blogs comme le contenu de la page, l'âge d'un site, les mots clés, le volume de contenu unique, le page-rank (n'influe pas directement sur le positionnement d'un site) et les liens de retour.

• Google aime le contenu unique. Vous serez rapidement indexé si vous écrivez du texte/photo original sur votre blog. Si vous copiez et collez du contenu trouvé ailleurs sur Internet, vous ne serez pas classé très rapidement et en général, pas du tout. En plus de ne servir à rien pour votre blog et de ne pas être sympa pour le webmaster qui a écrit l'original, vous risquez des poursuites judiciaires en recopiant le contenu d'autres blogs.

• Les anciens site sont mieux classés. Ce n'est pas cruciale, mais Google donne une plus grande préférence aux anciens sites ( capital confiance ) qu'aux nouveaux sites tout simplement afin d'éliminer tous les spam-blogs et les sites qui sont créés tous les jours afin de dominer son index. Ce peut être surmonté grâce à la bonne technique.

• Le terme se réfère simplement à des mots clés de votre sujet. Si je voulais des infos sur des bananes de Martinique, je vais taper "Bananes de Martinique" sur Google qui va me présenter une liste de sites liés aux bananes de Martinique.

• Plus de pages vous produisez mieux c'est. Si vous continuez d'ajouter des pages dans votre blog ou site web, les moteurs de recherche vont parcourir régulièrement et vous aurez votre site figurant le plus souvent dans les résultats incluant vos mots clés. 

• Si vous écrivez un article sur un sujet, combien pouvez-vous donner d'infos dans 1 ou 2 pages? Un peu, mais vous avez beaucoup de billets écrits vous aurez plus de choix sur la pertinence des infos que vous allez donner.

• L'idéal est d'avoir une balise titre billet par mot clé important, parler de l'habitacle d'une voiture et de ses motorisations disponibles n'est pas judicieux, mieux vaut faire 2 billets moins longs ou encore mieux 1 pour l'habitacle et 1 par motorisation avec en titre des mots clés bien choisis.

• Si je décide de faire un blog sur la Renault wind, je vais faire une liste de toutes les requêtes qui pourraient être soumises sur les moteurs de recherches ( recherches de mots clés Adword peut aider) et faire autant de pages nécessaires pour couvrir l'ensemble des recherches des internautes, plus grande est la liste la liste, plus votre trafic sera grand et plus vous obtiendrez de clics sur vos annonces pub.

•  Les retours de liens doivent être pertinents à votre sujet. Si votre site est sur "L'olympique de Marseille" il doit avoir des liens de sites sur le football comme par exemple sur le FC barcelone et des boutiques d'articles de sport, et si vous faites des liens à partir d'un site comme le mien alors les liens seront utiles mais moins "fort", parce que mon site n'est en aucune manière pertinent pour l'OM et le foot en général.

• Allez sur ce lien: Google Font Directory
• Choisissez votre police et notez son nom (sans faute d'orthographe) que vous allez mettre dans la balise:

<link href='http://fonts.googleapis.com/css?collez le nom de la police' rel='stylesheet' type='text/css' />

 <link href='http://fonts.googleapis.com/css?ofl sorts mill goudy tt' rel='stylesheet' type='text/css' />

• Dans votre template, présentation, modifier code HTML, trouvez la balise </head> et juste avant, y placer la balise avec le code. Vous pouvez placer autant de balises que de polices disponibles.
• sauvegarder le tout.

• Chaque fois que vous utiliserez une police il faudra simplement mettre une balise autour de votre texte.

<span style="font-family: Le nom de votre police; font-size: 24px;">Votre texte ici</span>

• Il faudra y indiquer le nom de la police c'est pour cela qu'il faut les noter dans un coin, j'utilise le bloc note, sinon il faut retourner dans le code HTML du blog pour retrouver les noms. Vous pouvez modifier la taille du texte.

Inverser le titre des posts avec celui du blog pour avoir plus de visites.

Comme vous avez pu le remarquer le titre du blog chez blogspot se trouve toujours devant celui du billet, il n'y a pas de widget pour inverser l'ordre des titres puisqu'il faut intervenir directement dans le code HTML du template.

Pourquoi inverser les titres?

Il est important que le titre de votre billet soit en avant afin qu'il se positionne bien dans les moteurs de recherches et qu'il soit le plus visible possible c'est à dire dans les premières places lorsqu'un internaute tape sa requête en rapport avec le sujet de votre post. La balise titre des billets est la 2eme plus importante après la balise titre du blog.

Nota: il faut que vous ayez au préalable optimisé les titres de vos billets, voir: optimiser son blog pour google

Donc titre du post + titre du blog. La partie la plus importante (ce que l'internaute recherche) sera affichée en gras et à droite sur google, le visiteur sera plus incité à cliquer sur votre blog, ce qui parait logique.

Voyons un exemple avec les 2 versions de la blogatière inscrite sur un annuaire de blog, recherche avec comme mot clé "la blogatière"

<title><data:blog.pageTitle/></title>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

• Sauvegarder !
• Attendre quelque jours le temps que votre blog se fasse crawler à nouveau pour voir les résultats.
• Je peux vous garantir que vous allez avoir plus de visiteurs une fois que google aura ré-indexé toutes vos pages.

Comment ajouter sur blogger la liste des billets similaires en bas de post.

• Première étape: aller dans présentation, modifier le code HTML et cocher "Développer des modèles de gadgets"

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://www.yourjavascript.com/1741101218/JS similaire.js
' type='text/javascript'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Billets similaires : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

• L'image rss: il vous suffit de changer l'URL de l'image (http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png) par la votre en 16x16 pixels.
• Le libellé "Billets similaires": remplacez le par ce que vous voulez, exemple: "vous aimerez également"
• Le nombre résultats paramétré sur 5: changez le chiffre dans cette balise "max-results=5&quot"

Quand ajouter Adsense sur son blog ?

La plupart des nouveaux blogs ne sont pas directement indexés donc n'ont aucun trafic, il est donc inutile d'afficher des AdSenses dessus. Sinon cela peut envoyer des signaux que le site est un blog fait pour Adsense et ce n'est pas un pas un site "sain" pour Google. Vous n'êtes pas autorisé à créer un site dans le seul but de faire de l'argent avec Adsense. Ne pas ajouter au début Adsense semble être un site légitime pour notre moteur de recherche préféré, c'est aussi la meilleure façon d'éviter la sandbox. (Obtenir un peu de liens à partir des mots clés principaux semble être la meilleure façon d'éviter le bac à sable avant la monétisation d'un nouveau site.).

Cela vous permettra également d'éviter la baisse de tarification de votre compte (eCPM). Un nouveau site a besoin de renforcer et de cibler le trafic en premier. Si le trafic de votre site est principalement social (forums, commentaires sur d'autres blog, réseaux du genre facebook, twitter...) les visiteurs qui vont cliquer sur vos Adsense sont des visiteurs qui arrivent d'un trafic non ciblé pour l'annonceur, de ce fait Google va réduire la conversion de vos clics et vous payer quelques centimes. Dans le même temps, tous vos autres blogs vont voir leurs revenus réduits également.

1. Optimisation de la page on (page du site avec son contenu).
2. Optimisation de la page off ( Liens externes, liens profonds, mots contenus dans les ancres...).

• La page d'optimisation (home page en général) se résume à deux choses.

1. Présentation du blog: (Titre, Description, entêtes du menu..).
2. Cadre du billet: (Titre du message, début du billet, contenu du billet).

• La page off se résume à une chose.

1. Backlinks: d'autres sites de même thématique que le votre(Qualité du PR, pertinence du site qui fait le lien, faire des liens pertinents vers les mots clés). 

• L'URL idéale serait -http://renault-wind.blogspot.com
• Le titre du blog serait Renault Wind
• Dans la description du blog un résumé de 2 ou 3 phrases  avec tous les mots clés (pas une guirlande de mots clés)
• Il y aurait dans mes titres de pages le sujet du billet réduit au strict minimum
• Dans mes billets ou messages "Renault Wind" + titre du sujet sans dépasser 6.5% de condensation de mots clés sinon c'est sur-optimisation et le résultat est le même que pas d'optimisation du tout. (pour 100 mots ne pas afficher plus que 6.5 mots clés).
• L'ancre de mes liens sur les annuaires ou chez les partenaires seraient "Renault Wind" mais pas que ça, il faut mettre des variantes comme "Renault décapotable" etc..

• Renault Wind (bon titre de blog)
• La nouvelle Renault Wind vient de sortir (mauvais titre de blog)

Comment changer le favicon sur blogspot

Les blogueurs se sont certainement posé la question comment changer le favicon sur blogger (la petite image à coté de votre adresse en haut du navigateur).

Voici un petit tuto pour le changer en 2 temps 3 mouvements.

• Il vous faut une nouvelle image ou même une photo, vous pouvez en créer une ou modifier celle existante facilement avec paint.

• Une fois créée, il faut la mettre sous format ".ico" les formats ".png" et compagnie fonctionnent sous firefox mais pas sous internet explorer qui n'accepte que le .ico

• Les programmes disponibles sur le web ne manque pas, j'utilise convertir en ico il suffit de télécharger votre image à partir de votre PC, le site offre d'autres services comme héberger votre favicon, il vous propose également des favicons animés
  

• Pour l'installer dans blogger, allez dans votre panneau de gestion du blog, dans présentation puis modifier code HTML.

• Placez ce code en changeant la partie écrite en rouge par l'adresse de votre favicon:

<link href='adresse de votre favicon' rel='shortcut icon'/>

•   Juste avant la balise <b:skin><![CDATA[/

• Ce qui donne par exemple:

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<link href='adresse de votre favicon' rel='shortcut icon'/>

<b:skin><![CDATA[

Favicon de la blogatière réalisé avec paint.

Duplicate content

Dans ce billet je vais essayer de faire simple pour que tout le monde comprenne, les blogueurs ne sont pas spécialement des experts SEO (Search Engine Optimisation).

Les moteurs de recherches et en particulier notre moteur préféré je veux bien sur parler de Google ont mis en place un système de filtre (nommé: duplicate content) qui consiste à "supprimer" (ne pas indexer dans les résultats de recherches) ou à placer les sites/pages en double de site très, très loin dans les résultats de recherches lorsque vous tapez sur le clavier vos mots clé (ce que vous recherchez).

Pourquoi ce filtre duplicate content?

Imaginez vous que soyez à la recherche d'un blog d'aide comme celui-ci, que moi j'ai fais mille blogs identiques et que je sois placé en tête des résultats de recherches, les mille premiers blogs que vous allez trouver seront les miens. Tout bon pour moi mais pas pour vous qui allez devoir en tourner des pages pour trouver un second blog dans la même thématique.

Pour schématiser google est comme un album photos Panini (vous savez les albums ou on colle des photos de footballeurs), les photos en double on ne peut les coller dans l'album, les descriptions en doubles c'est pareil on ne peut pas les afficher dans les moteurs de recherches (en fait c'est les moteurs qui n'en veulent pas).

Comprenez vous maintenant pourquoi les annuaires vous demande une description unique de votre blog lors de l'inscription? A quoi bon inscrire votre blog si personne ne peut le voir.

Le résultat est identique si vous écrivez les même billets ou si vous recopiez ceux des autres blogs.

Alors! qu'en pensez vous? 
Laissez vos impressions sur les commentaires et n'hésitez pas à vous inscrire et devenir membre de La blogatière, vous serez au courant avant tout le monde des nouveautés :)