24 déc. 2012

Ajouter L'effet Arc En Ciel Sur Vos Liens

Effet Arc En Ciel
L'effet Arc En Ciel (rainbow colors effect) donnera des couleurs aléatoires au passage de la souris sur les liens de votre blog et ces derniers reprennent leur couleur d'origine quand la souris se retire.
Si vous en avez marre des couleurs uniques et que vous voulez mettre un peu d'effet sur vos liens de manière assez simple, alors ajouter le widget "Arc En Ciel".






Démonstration

Faites passer la souris sur les liens suivants pour voir l'effet Arc En Ciel :

Ajouter L'effet Arc En Ciel Sur Vos liens

Pour ajouter l'effet arc en ciel sur les liens de votre blog, procédez comme suit:
Allez à "Mise En Page" ➥ "Ajouter Un Gadget" ➥ "HTML/JavaScript"
Collez le code suivant dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".
<script src="http://arc-en-ciel.googlecode.com/files/arc-en-ciel.js" type="text/javascript"></script>

17 déc. 2012

Comment Ajouter Un Flux RSS Pour Chaque Libellé Blogger

Flux RSS Blogger
Comment ajouter un lien Flux RSS pour chaque libellé Blogger.
Dans ce tutoriel, nous allons voir comment ajouter un bouton image devant toutes les libellés (catégories) de votre blog Blogger afin de permettre à vos visiteurs de s'abonner aux articles appartenant à un libellé particulier au lieu de s'inscrire à tous les messages du blog.
Ceci est très utile pour les Blogs "mixte" avec plusieurs catégories de type différent.



Avant De Commencer

1. Sauvegardez une copie de votre modèle actuel et de vos widgets sur votre disque dur.
Pour ce faire, allez à "Modèle", cliquer sur le bouton "Sauvegarder/Restauration" situé en haut à droite, puis cliquer sur "Télécharger le modèle complet".

2. Le widget Libellé doit être installé sur votre blog. Si ce n'est pas le cas, rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Libellés". Vous pouvez ensuite configurer ce gadget en choisissant d'afficher tous les libellés de votre blog, ou seulement une sélection correspondant à vos catégories les plus importants. Ces libellés pourront également être classés par fréquence ou par ordre alphabétique. Il ne vous restera ensuite qu'à choisir l'emplacement de votre widget libellés.

Comment Ajouter Un Flux RSS à Chaque Libellé Blogger

Pour ajouter un flux RSS pour chaque libellé Blogger, procédez comme suit :
1. Allez à "Modèle" ➥ "Modifier le code HTML" ➥ "Développer les modèles de gadgets"

2. Cherchez et remplacez ce code: 
<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
Avec le code suivant :
<b:loop values='data:labels' var='label'>
        <li>
    <a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'>
        <img alt='S inscrire' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0' />
    </a>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
Notez que vous pouvez choisir pratiquement n'importe quelle image en modifiant l'url suivante :
http://www.feedburner.com/fb/images/pub/feed-icon16x16.png

3. Enregistrer ensuite votre modèle.

Et voilà, vous avez maintenant ajouter un lien de flux RSS pour chaque libellé de votre blog Blogger.

5 déc. 2012

Ajouter Un Menu Horizontal Déroulant Dans Blogger

Menu Horizontal Déroulant Blogger
Nous allons voir dans ce tutoriel comment ajouter un menu horizontal déroulant à quatre niveaux (Menu et Sous Menus) dans Blogger Blogspot.
Le menu de navigation à niveaux multiple vous aidera à bien organiser les catégories et les liens importants de votre blog. Ainsi, il permettra à vos lecteurs de naviguer facilement à travers le blog et le déplacement entre les différentes rubriques devient plus confort.





Comment Ajouter Un Menu Horizontal Déroulant à Blogger

Avant de commencer, vous pouvez voir la démo ici : blogueur- test.blogspot.com

Allez à "Mise En Page" et juste en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget".
Dans la liste proposée par Blogger choisissez "HTML/JavaScript", collez le code du menu dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".

Voici le code du menu à insérer :
 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */  
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul> 

Comment Personnaliser Le Menu De Navigation

  • Pour changer la couleur du fond, il suffit de changer background: #414141;
  • Remplacez toutes les signes # avec votre propres liens.
  • Remplacez LINKS x et Item x avec les titres des liens.
  • Pour créer un sous-menu à l'intérieur d'un menu il suffit de lui ajouter l'attribut "rel" comme indiqué dans le code ci-dessus : rel="ddsubmenu1" et changez le nombre du menu en conséquence.  
Note: Les liens de libellés dans Blogger prennent la forme suivante :
<a href="http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De-Libellé">Titre-De-L'URL</a>
Par défaut, les libellés Blogger affiche 20 articles par page.
Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:
<a href='http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De- Libellé?&amp;max-results=X'>Titre-De- L'URL</a>

X: le nombre d'articles à afficher.

Des problèmes ? des questions à propos de ce tutoriel ?
Vous pouvez me contacter via les commentaires.

21 nov. 2012

Cacher Supprimer La Barre De Partage Blogger

Boutons De Partage Blogger
Blogger affiche à la fin de chaque article des boutons de partage permettant aux lecteurs d'envoyer le contenu par e-mail ou de le partager sur Facebook, Twitter et Blogger.
Blogger Share Button
Si vous ne souhaitez pas que vos articles soient publiés sur les réseaux sociaux, ou si vous utilisez un autre widget de partage et vous voulez supprimer cette barre, alors procédez comme suit :




Comment Supprimer La Barre De Partage Blogger

1. Connectez-vous à Blogger, allez à "Mise En Page"
(Si vous utilisez l'ancienne interface Blogger, allez à "Présentation" > "Éléments de la page")
Cliquez maintenant sur le lien "Modifier" situé en bas à droite de "Messages du blog"
Et décocher la case : "Afficher les boutons Partager" puis cliquez sur "Enregistrer"

Rafraîchir la page de votre blog et vérifiez si la barre a disparu.
Si elle est encore présente, vous devez modifier le code de votre modèle.
Allez donc à "Modéle" > "Modifier le code HTML" > "Traiter" et cochez la case "Développer des modèles de gadgets"

Recherchez la ligne suivante et supprimez-la
<b:include data='post' name='shareButtons'/>
Enregistrer le modéle.

Voilà, vous ne verrez plus maintenant la barre de partage Blogger sur les pages de votre blog.

17 nov. 2012

Envoyer Un Sitemap Blogger à Google Webmasters

sitemap google
Une fois vous avez créer votre blog Blogger, il est fortement conseillé de l'ajouter à Google webmasters tools et d'envoyer son SiteMap pour optimiser l'indexation et le référencement de vos pages sur le moteur de recherche Google.
Les outils Google pour les webmasters, Google Webmasters Tools, vous fournit des rapports détaillés sur la lisibilité de vos pages sur Google.
Juste après, nous allons voir comment inscrire un blog Blogger dans google webmasters tools et comment envoyer son SiteMap.



Inscrire Son Blog Dans Google Webmasters Tools

1. Connectez-vous à Google Webmasters Tools en utilisant vos identifiants Google.

2. Cliquez sur "Ajouter un Site", entrez l'URL de votre Blog et cliquez sur "Continuer"
3. L'étape suivante est primordiale pour pouvoir accéder à toutes les options de webmasters tools. Elle consiste à prouver à Google que vous êtes bien le propriétaire de votre blog.
Cliquez sur "Méthodes Alternatives" et choisissez "Balise Meta" (Ne cliquer pas sur "Vérifier")


4. Conserver la méthode de validation par "Balise Meta",
Retournez maintenant à Blogger et ouvrez le code HTML de votre modèle :
"Tableau de Bord" > "Modèle" > "Modifier le code HTML" > "Traiter"
Rechercher "<Head>" et juste après coller la balise Meta puis enregistrer le modèle


5. Retourner à Google webmasters tools et cliquez sur le bouton "Vérifier"
Votre blog doit maintenant être vérifier :

Envoyer le SiteMap Blogger à Google Webmasters Tools

Une fois votre blog est ajouté à outils webmasters google, vous pouvez envoyer à Google votre SiteMap afin de montrer au moteur de recherche toutes les URLs de vos articles à indexer.
Un site map aide à l'indexation d'un site, car il permet de s'assurer que toutes les pages sont accessibles par les robots d'indexation.
La plupart des moteurs de recherche suivent seulement un nombre fini de liens sur une page, donc pour un site très grand, un site map peut être nécessaire pour que les visiteurs et les moteurs de recherche puissent accéder à toutes les pages.
La structure d'un fichier sitemap est équivalente à celle d'un flux RSS, nous allons donc utiliser le flux RSS de notre blog Blogger comme sitemap.

Pour envoyer le sitemap de votre blog Blogger à Google, procédez comme suit :
Dans webmasters tools, sélectionnez votre blog et allez à "Optimisation" > "Sitemaps
Cliquez sur le bouton "Ajouter/Tester un sitemap" et entez la ligne suivante :
atom.xml?redirect=false&start-index=1&max-results=100
Selon le nombre d'articles de votre blog, vous allez devoir soumettre plusieurs sitemaps en faisant varier la valeur de start-index dans l'adresse du sitemap. par exemple si vous avez entre 300 et 400 articles dans votre blog, vous devez envoyer ces 4 sitemaps :
atom.xml?redirect=false&start-index=1&max-results=100
atom.xml?redirect=false&start-index=101&max-results=100
atom.xml?redirect=false&start-index=201&max-results=100
atom.xml?redirect=false&start-index=301&max-results=100
En ajoutant un SiteMap, vous avez Fourni Google de tous les détails et informations sur votre blog; ce qui optimise l'indexation et l'archivage de vos articles dans son moteur de recherche.

16 nov. 2012

Ajouter Une Signature à Vos Messages Blogger

Signature Icon
Vous pouvez ajouter une signature personnalisée et automatique en dessous de chaque article de votre blog Blogger.
Ça serait très utile si vous êtes une équipe de blogueurs : vous pouvez utiliser des signatures uniques pour chaque auteur. 
Signer tous vos messages avec le nom de votre blog ou avec votre propre nom est une bonne façon de personnaliser votre blog et de le rendre plus attrayant.





Ajouter Une Signature à Vos Messages Blogger

1. Créez votre propre signature en utilisant un outil de création d'images tel que Photoshop, Gimp .. ou avec l'un des générateurs en ligne tel que My Live Signature.

2. Télécharger votre signature dans Blogger puis récupérez son URL.

3. Maintenant allez à "Modèle" > "Modifier le code HTML" > "Traiter" > "Gadgets Développés"
et trouver (CTRL+F) la ligne suivante :
<div class='post-footer-line post-footer-line-1'>
Si vous ne trouvez pas ce code, essayez de chercher le suivant :
<p class='post-footer-line post-footer-line-1'>
Ou celui-ci :
<data:post.body/>

3.A- Si vous êtes le seul auteur du blog, ajoutez le code suivant juste après le bout de code précédant :
<b:if cond='data:blog.pageType == "item"'>
<img src='URL_De_La_Signature' style='border:0px;'/>
</b:if>
Changez URL_De_La_Signature avec l'URL de votre image de signature.

3.B- Si vous êtes dans une équipe Blog, collez le code suivant juste après le code que vous avez trouvé :
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == &quot;Nom_Auteur1&quot;'>
<img src='url_image_signature_Auteur1' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Nom_Auteur2&quot;'>
<img src='Url_image_signature_Auteur2' style='border:0px;'/>
</b:if>
</b:if>
Le code doit être modifié avec les noms des auteurs et les URLs d'images des signatures.

Si vous êtes plus de deux auteurs, vous devez répéter le bloc autant de fois que le nombre d'auteurs :
Ici j'ai mentionné 2 blocs : 1er bloc en bleu pour le l'auteur 1 et deuxième bloc en noir pour l'auteur 2.

Si vous souhaitez que la signature apparaîtra dans la page d’accueil du blog, vous devez supprimer les lignes en rouge.

4. Enregistrer votre modèle et vous devriez voir la signature en action.

Voici deux exemples de signatures crées avec MyLiveSignature :

15 nov. 2012

Ajouter Son Blog Dans Les Moteurs De Recherche

Search Engines" title=
Lorsque vous créez un blog avec Blogger, il est utile de le faire savoir aux principaux moteurs de recherche comme Google, Yahoo ou Bing.
Google et Yahoo trouveront votre blog de toutes façons avec leurs bots dès que des liens existeront vers celui-ci, mais le plus rapide pour commencer le référencement reste de soumettre l'URL auprès de ces moteurs.
De plus, après la soumission sur Google et Yahoo, il peut être intéressant de référencer également le site sur les moteurs Exalead, Voila.fr ou Mirago.



Comment Ajouter Son Blog/Site Dans Les Moteurs De Recherche

Le principe est le même mais le fonctionnement est parfois différent selon les moteurs !
En voici donc quelques-uns, mais dans une liste non-exhaustive qui ne demande qu'à être complétée ...

Google
Yahoo
Bing (Ancien MSN)
Bing (Compte webmaster: un identifiant windows live nécessaire)
Exalead
Voila.fr 
Orange
Baidu (Moteur de recherche chinois)
ExactSeek
SearchSight
Scrub The Web
EntireWeb
GigaBlust
AnooX
SplatSearch
Jayde
InfoTiger
TowerSearch
The Search Site
Websquash
UnAsked
EviSum
SearchRamp
Search The Web
Best Yellow
Beamed

Soumission Automatique Dans Les Moteurs De Recherche

Il existe de nombreux sites internet qui offrent gratuitement des services de soumission de site Web pour les moteurs de recherche. La liste des moteurs de recherche sont en grande partie les mêmes. Certains d'entre eux offrent d'envoyer votre URL à plus d'une centaine de moteurs de recherche.
Pour commencer, vous pouvez utiliser leurs services gratuitement et surveiller le trafic :

FastSubmit
Submit Express
Add Me
IneedHits
Searchengineoptimising
Add Pro
AmFibi
JerkasMarknad
Local Submit

6 juil. 2012

Modifier "Affichage De Messages Dont Le Libellé Est..."

Status Message Blogger
Nous allons voir dans cet article comment supprimer ou modifier le message : "Affichage de messages dont le libellé est ... Afficher tous les messages"

Status Message Blogger

C'est le Status Message. Ce type de message s'affiche en haut de page à chaque fois que vous cliquez sur un libellé ou lorsque vous effectuez une recherche interne dans un blog Blogger.

Comment Supprimer "Affichage de messages dont le libellé est ..."

1. Connectez-vous à Blogger et allez à "Modèle" > "Modifier le code HTML" > Gadgets NON Développés.

2. Recherchez (avec ctrl+F) la balise suivante : ]]></b:skin>
et juste avant copier/coller  la ligne suivante :
.status-msg-wrap{display:none !important;}
Et Enregistrer ensuite votre modèle.

Comment modifier Le Status Message Blogger

Pour modifier le texte figurant dans le status message, procédez comme suit :
1. Allez à "Présentation" > "Modifier le code HTML" > cocher la case "Développer des modèles de gadgets"

2. Recherhcez (CTRL + F) le code suivant :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3. Et le remplacer, par exemple, avec le code suivant :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Affichage des articles de la catégorie <strong><data:blog.pageName/></strong>
<b:if cond='data:newerPageUrl'>
<strong><a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Articles plus récents'>Articles plus récents</a></strong>
</b:if> |
<b:if cond='data:olderPageUrl'>
<strong><a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Articles plus anciens'>Articles plus anciens</a></strong>
</b:if>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Cela donnera l'affichage suivant :

Affichage des articles de la catégorie Nom_De_Libellé
Articles plus récents | Articles plus anciens

Vous pouvez modifier les mentions : Affichages des articles de la catégorie, Articles plus récents, Articles plus anciens avec les mentions que vous voulez.

5 juil. 2012

Cacher Désactiver Les Commentaires Dans Blogger

Cacher Interdire Les Commentaires Blogger
Les commentaires Blogger permettent aux lecteurs de votre blog de laisser des questions ou donner leurs avis sur les messages que vous avez publiés.
Si vous ne souhaitez pas que les visiteurs puissent déposer des commentaires pour certains articles/pages ou pour toutes les pages du blog, alors procédez comme suit :






Désactiver les commentaires pour certains articles / pages

Lorsque vous rédigez une page ou un article, dans le menu latéral sélectionnez "Options" :
- Si vous souhaitez désactiver les nouveaux commentaires en gardant les anciennes,
sélectionnez la case : "Ne pas autoriser, afficher les existants"
- Si vous souhaitez interdire les nouveaux commentaires et masquer les existants,
sélectionnez la case : "Ne pas autoriser, masquer les existants"

Vous pouvez aussi faire la manipulation pour les anciens articles en passant par "Messages" > "Modifier"

Cacher/Désactiver les Commentaires Dans Toutes Les Pages Du Blog

Pour masquer / désactiver les commentaires dans toutes les pages de votre blog, procédez comme suit :
allez à "Paramètres" > "Publications et Commentaires" ,
dans la liste "Emplacement des commentaires" choisissez "Masquer"
=> le champ "Enregistrer un commentaire" est désactiver maintenant sur toutes les pages du blog.

30 mai 2012

Ajouter Des Liens Non Statiques au Gadget PageList Blogger

Widget Pagelist Blogger
Nous allons voir dans ce tutoriel comment ajouter des liens "non statiques" au gadget PageList de Blogger.
En fait, il existe deux méthodes pour ajouter des URLs (liens externes, urls de libellés, adresse d'un article etc...) au menu de pages Blogger :
- La première méthode (la plus simple) consiste à utiliser la nouvelle interface Blogger.
- La deuxième (un peu plus compliqué) consiste à modifier le code Html de votre modèle.





Méthode 1 : à l'aide de la nouvelle interface Blogger

1. Cliquez sur le lien 'Effectuer la mise à jour dès maintenant' en haut du tableau de bord Blogger. (Vous pouvez toujours revenir à l'ancienne interface à tout moment)
Mise à Jour Nouvelle Interface Blogger
2. Cliquez sur le menu 'gris' à côté du blogue dans lequel vous souhaitez ajouter des liens, puis sélectionnez 'Pages'
Nouvelle Interface Blogger

3. Cliquez maintenant sur 'Nouvelle Page' puis 'Adresse web'
Nouvelle Page Blogger

4. Entrez le titre et l'URL du lien puis cliquez sur 'Enregistrer'
Add Link to Blogger PageList

Méthode 2 : En Modifiant le code HTML

1. Si vous n'avez pas encore installé le gadget "PageList", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Pages". Vous pouvez ensuite configurer ce gadget en choisissant un titre et les pages à afficher.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"

3. Rechercher le code du gadget "Pages", comme ceci :
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
    Insérer vos liens ICI
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

4. Insérer les liens entre les balise </b:loop> et </ul> de la façon suivante
<li> <a href="URL_du_lien">Titre Du Lien</a></li>

Voila c'est tout pour ce tutoriel, espérant qu'il répond à vos attentes.

29 mai 2012

Liste Déroulante Pour Les Libellés Blogger

Libellés Blogger
Le widget libellés de Blogger est présenté sous forme d'une liste verticale de liens ou encore d'un nuage.
Certains blogueurs se retrouvent avec trop de libellés, ce qui devient un peu illisible et le widget prendra trop d'espace.
Nous allons voir dans ce tutoriel comment adapter le gadget libellés sous forme de menu ou d'une liste déroulante contenant tous les libellés, étiquettes, catégories de votre blog.





Démonstration
libellés Blogger

Menu Déroulant Pour Les Libellés Dans Blogger

1. Si vous n'avez pas encore installé le gadget "Libellés", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Libellés". Vous pouvez ensuite configurer ce gadget en choisissant d'afficher tous les libellés de votre blog, ou seulement une sélection correspondant à vos catégories les plus importants. Ces libellés pourront également être classés par fréquence ou par ordre alphabétique. Il ne vous restera ensuite qu'à choisir l'emplacement de votre widget libellés.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > Gadgets NON Développés et recherchez (avec ctrl+F) la ligne suivante :
<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>

3. Remplacez la ligne précédente avec le code suivant
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Note : le texte en Bleu c'est le texte qui sera affiché sur la liste déroulante. Vous pouvez le modifier avec Libellés, Catégories, etc...
4. Enregistrer votre modèle.

Voilà, le gadget libellés s'affiche maintenant sous forme d'un menu déroulant.

26 mai 2012

Ajouter Le Bouton De Partage Facebook Blogger

Boutons De Partage Facebook
Le bouton de partage Facebook vous permet d’augmenter le trafic de votre blog en encourageant vos visiteurs à partager les liens de vos articles sur Facebook.
Ce bouton détecte automatiquement l'adresse de la page sur laquelle il est.
Pour l'utiliser, il vous suffit de choisir le style désiré et de copier son code et le mettre sur les pages de votre blog.






Présentation Du Bouton

|Version vertical avec compteur

Partager
<a name="fb_share" type="box_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Version horizontal avec compteur

Partager
<a name="fb_share" type="button_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Version horizontal sans compteur

Partager
<a name="fb_share" type="button" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Icône 16*16

Partager
<a name="fb_share" type="icon" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Bouton large


<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'large' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

| Bouton léger


<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'small' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

Ajouter le bouton de partage facebook à Blogger

Allez à "Modèle" > "Modifier le code HTML" cochez la case "Développer des modèles de gadgets"
Pour afficher le bouton au début des articles, placez son code juste après la balise :
<div class='post-header-line-1'>

Si vous désirez afficher le bouton à la fin de vos articles, alors placez le code approprié juste après l'une des lignes suivantes :
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Vous pouvez aussi placer le code du bouton dans un gadget "HTML/JS"

25 mai 2012

Ajouter Le Bouton J'aime Facebook à Blogger

Bouton Jaime Facebook
Ajouter le bouton J'aime Facebook (Facebook Like Button) à votre blogue afin de faire un peu de promotion de vos articles sur Facebook.
Le bouton J'aime vous permettra de savoir qui a apprécié vos articles, et laissera une trace discrète sur le mur de l'utilisateur.
Il est relativement intéressant car il peut être mis en place en quelques minutes à l'aide de quelques lignes de code.




Présentation Du Bouton

Standard + bouton 'Send'

Bouton avec compteur

Boîte avec compteur


Configuration Du Bouton

Type du bouton
Texte dans le bouton
Afficher le bouton 'Send'
Couleur du thème
Font
Alignement
Emplacement du bouton
Condition d'affichage
<div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>

Ajouter le bouton j'aime à Blogger

1. Copiez le code ci-dessus. Connectez-vous à votre compte Blogger et allez à "Modèle" ► "Modifier le code HTML" et cochez la case "Développer des modèles de gadgets".

2. Rechercher <data:post.body/> et juste avant coller le code copié.

20 avr. 2012

Widget Youtube Subscription Pour Blogger

Youtube Subscription
Ajouter le gadget officiel d'abonnement Youtube sur votre blogue pour promouvoir votre chaîne YT.
Comme pour le page de fan Facebook, les utilisateurs peuvent s'abonner directement à votre chaîne sans la nécessité de quitter la page.
Votre nom d'utilisateur, le logo, le nombre de vidéos et le nombre d'abonnés vont être affichés sur le widget.
Vous pouvez également modifier la largeur et la hauteur du gadget.




Démonstration Du Gadget Abonnement Youtube

Voici une démonstration du gadget Youtube Subscribe avec les chaînes "BloggerHelp" et "InsideAdsense".

Configuration Du Gadget

Indiquez le nom de votre chaîne Youtube ainsi la largeur souhaitée du widget :
Votre nom d'utilisateur Youtube
Largeur du gadget
le code du widget à copier
<iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=TBlogueur" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

Ajouter Le Widget Youtube Subscribe à Blogger

Le widget peut être placé au-dessus ou en-dessous de chaque article de votre blogue ou dans un gadget HTML/JavaScript :

Placer le code dans un gadget HTML/JS

Allez à "Mise En Page" ► "Ajouter un Gadget" ► Dans la liste proposée par Blogger, choisissez le gadget "HTML/JavaScript", coller le code du gadget et cliquez sur "Enregistrer"

Placer le widget dans les pages articles

Allez à "Modèle" ► "Modifier le code HTML" ► cochez la case "Développer des modèles de gadgets",

Collez le code juste après la ligne suivante pour afficher le widget au début des articles,
<div class='post-header-line-1'>

ou après l'une des lignes suivantes pour l'afficher à la fin des articles.
<div class='post-footer-line post-footer-line-1'>
 --
<div class='post-footer-line post-footer-line-2'>
 --
<div class='post-footer-line post-footer-line-3'>

Advertissement