Afficher les boutons sociaux comme sur Mashable

By // 29 commentaires:

L'une des innovations venues sur le blog avec le nouveau modèle est l'affichage des boutons de partage sur les réseaux sociaux de la même façon que le site Mashable. Je tiens ici à vous montrer comment faire la même chose sur votre blog, au cas où ça vous tenterait.

1. Se connecter sur Blogger. Aller sur "Mise en page", "Modifier le code html" et cocher sur la case "Développer des modèles de gadget"

2. Mettre le code suivant juste avant ]]></b:skin>

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

Explication : top:215px; indique la distance entre le début de la page et l'endroit où se placera le groupe des boutons de partage. Sur mon blog j'ai mis 215px afin que ceux-ci n'apparaissent qu'après le titre de l'article.

4. Ajouter le code suivant juste avant <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRt8W5AoPOvzdEhiIcI0P3PcdFkluW5tUPLe0VPBJsmItp_YKSTdeOQTGaBbo9TM7HvwmXNNZHfzDdlkcm4LQF4i-xuJIu6JMknX56v5336rvPKvEiT0FQDEPpE0Nhe1w_LXyuJm4Mzo/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>
          <!-- email post links -->
          <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
              </a>
            </span>
          </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
        </span>
</center>
</div>
</div>

  </b:if>

5. Enregistrer votre modèle et allez admirer le résultat.

@+

Le nouveau Blogger au bout du doigt est là !

By // 21 commentaires:
Très chères lectrices, très chers lecteurs, votre bien aimé blog vient a revêti d'un nouvel habit depuis le vendredi 19 février 2010.

nouveau blogger au bout du doigt


En effet, suite aux différentes remarques recueillies au sujet template précédent, je me suis sentis dans l'obligation de changer l'apparance graphique de tout le blog, cela dans le but de rendre plus agréable l'expérience des visiteurs (dans l'espoir que j'y arrive).

Le modèle est un mélange de plusieurs éléménts récueillis ici et là, particulièrement sur des templates des blogs hébergés sur wordpress.

L'entête, la barre de menu et la partie centrale dédiée aux articles sont inspirés de Woork Up, un blog  tenu par le génial Antonio Lupetti (le même qui avait conçu le modèle Typoork utilisé sur Café Biblique).  Link, le graphiste attitré des bannières de mes blogs, est entrain de préparer une bannière qui ira avec ce modèle.

La sidebar et le pied de page sont tiré du modèle blogger "webnolia", inspiré du blog d'Amit Agarwal, Digital inspiration. Il en est de même de la présentation de l'auteur.



La mise en exergue du premier article est inspirée de Mashable, mais le code a été pris du modèle Blogger "Simplex Pro", utilisé sur Blogger Mastering. La disposition des boutons des votes et partages sur les pages d'articles est aussi inspiré de Mashable.



J'espère vivement que ce dernier modèle aura l'approbation générale (même si je reste convaincu qu'on ne peut pas plaire à tout le monde).

Et vous, que pensez-vous de ce template ?

Script pour afficher l'heure sur votre blog

By // 11 commentaires:
script pour afficher l'heure sur le blog
De quelle utilité serait un script pour afficher l'heure sur votre blog ? Simple, rappeler à vos visiteurs qu'il existe un monde réel dans lequel le temps ne fait pas de cadeau.

Il est vrai que vous aimeriez avoir le plus des visiteurs possible sur votre blog, mais je n'en vois pas un ici qui sauterait à l'idée de savoir qu'un quidam a passé 3 jours entiers les yeux rivés sur les articles de son blog.

Alors, si vous aimez vous lecteur au point de parfois leur demander d'une façon subtile de retourner dans le monde réel, quoi de plus simple que de placer une horloge sur le blog ? Voici pour cela un petit script à mettre dans un widget html.


<div id='clock'>
<script type='text/javascript'>var d = new Date(); document.write(d.getHours()+':'+d.getMinutes());</script>
</div>


Ce script pour afficher l'heure sur votre blog a été trouvé sur le template Win7 press.

Bouton de partage Google Buzz - Buzz it - pour Blogger

By // 13 commentaires:
bouton de partage google buzz pour blogger, buzz it


Après les boutons de partage pour Twitter et Facebook, j'ai l'honneur de vous présenter la version non officielle du bouton de partage Google Buzz (Buzz it) pour Blogger, que je viens de créer en basant sur la version de TechCrunch

Comme certains d'entre vous le savent déjà, Google veut faire concurrence à Facebook sur son champ de bataille grâce à Google Buzz. C'est le réseau social de google à la facebook qui vous permet d'échanger vos statuts, des photos, vidéos et autres trucs. Il paraît que c'est la monté en flèche des réseaux sociaux qui a poussé Google à en créer pour une enième tentative un qui lui appartienne.

Voici donc le code à utiliser sur Blogger pour bénéficier de ce nouveau service, Google Buzz, afin de faire la propagande de vos articles. 

Il faut vous connecter à votre compte Blogger, aller sur "Mise en page" puis sur "Modifier le code html" et là cochez sur "développer des modèles de gadget". Mettez le code suivant juste avant  <p><data:post.body/></p> ou simplement <data:post.body/>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aSl0qagl0vE-uLGSe0toTmKDBIFUybDzIRrKo1oY05Gm_6-tW-LZkn3AbILlwcxQJ9X5GBEnCKKXsdM0CgfJ3ts3NBJs67TpOPL-E04vR8YhZ1WTgCCeIyx9JWFYER2Pj1brvJ1L91W_/s1600/buzz-icon2.png'/>Buzz it</a>



Un bouton  Buzz it apparaîtra désormais au début de chacun de vos articles. Quand il est cliqué, il conduit l'auteur du cliquer sur sa page de partage "Google reader".

partage google buzz via google reader


L'opération finie, l'on peut voir apparaître sur son compte Gmail (cliquez le lien "Buzz"), l'article qui a été proposé en partage.

affichage partage google buzz via reader sur gmail, buzz, buzz it

Alors, ça vous tente d'avoir le bouton de partage Google Buzz pour votre blog hébergé sur Blogger ?

@+

Blogger a effacé des blogs populaires consacrés à la musique

By // 7 commentaires:


J'ai appris chez Quick online tips que la plateforme Blogger aurait effacé plusieurs blogs populaires de musique à cause de violation répétée des conditions d'utilisation du service.

En effet, la politique de Blogger en cas de plainte déposée contre l'un de vos blogs ou article de celui-ci est de vous envoyer une notification par email et sur votre tableau de bord en faisant par la même occasion passer les articles incriminés en mode brouillon, histoire de vous permettre de les réviser ou de les effacer carrément. Une copie de la plainte est aussi envoyé à ChillingEffects.org par Blogger.

Lorsque les plaintes se multiplient au sujet du même blog, Blogger l'efface carrément (en notifiant sont auteur bien sûr). Pour le récupérer, il faut engager une procédure de contre-plainte (avis de contestation) qui si elle réussie vous permettra le recouvrement du blog supprimé.

Pour plus des renseignements lire les explications sur Blogger, concernant les avis de violation de droit d'auteur ainsi que les avis de contestation

La leçon à retenir de ces mésaventures qu'ont connu certains blogueurs est qu'il faut toujours faire une sauvegarde de son blog et si possible lui associer un nom de domaine (qui ne sera pas perdu même si Blogger efface le blog). La sauvegarde pourra toujours servir à restaurer le blog, même sous une autre plateforme avec le nom de domaine gardé intact.

Parlant de nom de domaine, je tiens à remercier Link qui a offert un joli nom de domaine à Blogger mastering, qui n'est sera plus http://blogger-mastering.blogspot.com mais devient www.bloggermastering.com.

@+

Comment les robots des moteurs de recherche lisent votre blog

By // 9 commentaires:

 Le site MyPagerank propose un service pour aider à comprendre comment les moteurs de recherche lisent votre blog quand ils l'explorent. Comme ces robots ne lisent que les textes, vous aurez une idée des mots qu'ils lisent en premier sur votre page d'accueil ou sur une page d'article, le tout dépend  de l'url que vous allez tester.



Alors, ça vous dit de tester la façon dont les robots des moteurs de recherche lisent votre blog ?

Bas de page à 4 colonnes

By // 8 commentaires:
bas de page à 3 colonnes


Pourquoi afficher une bas de page à 4 colonnes me demanderez-vous ? Je crois que ce serait pour y stocker tous les widgets et autres éléments que vous aimeriez avoir sur votre blog mais qui à votre avis risqueraient de faire un peu trop de remplissage sur la sidebar.

Cliquez sur ce lien si vous préférez plutôt avoir un bas de page à 3 colonnes. Pour ce qui veulent un bas de page à 4 colonnes, voici la procédure à suivre :

1. Se connecter à votre compte Blogger, aller sur "Mise en page" puis sur "Modifier le code html"
2. Trouver la partie de code ayant l'un des identifiants suivant : footer-wrap, footer, footer-end etc.

Dans les modèles classics le code du pied de page se présente comme suit :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


3. Remplacez le code en rouge ci-haut par le code suivant


<div id='footer-column-container'>
        <div id='footer1' style='width: 225px; float: left; margin:0; '>
    <b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='HTML32' locked='false' title='' type='HTML'/>

</b:section>
    </div>

      <div id='footer2' style='width: 225px; float: left; margin:0; '>
    <b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='LinkList32' locked='false' title='Blogroll' type='LinkList'/>
</b:section>
    </div>

      <div id='footer3' style='width: 225px; float: right; margin:0; '>
    <b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text32' locked='false' title='' type='Text'/>
</b:section>
    </div>

  <div id='footer4' style='width: 225px; float: right; margin:0; '>
    <b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Feed32' locked='false' title='Articles récents' type='Feed'/>
</b:section>
    </div>


<div style='clear:both;'/>
</div>  


4. Ajouter le code css suivant avant la balise ]]></b:skin>

Pour changer les couleurs (en gras), voir les codes des couleurs ici.

#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

Enregistrer votre modèle.

5. Se rendre sur "Mise en page" et modifier les widgets de votre bas de page qui a maintenant 4 colonnes.

Une astuce de Blogosys.

@+

JDarkroom : Pour écrire sans distraction

By // 1 commentaire:
Connaissez-vous JDarkRoom ? Si votre réponse est non, alors sachez vite (avant que la fin du monde n'ait lieu) que c'est un logiciel qui vous permet d'écrire sans être distrait par autre chose sur votre écran.

Il est souvent facile de tomber toutes les cinq minutes dans une quelconque distraction alors que l'on s'était fixé l'objectif d'écrire un ou deux articles voir un certain nombre des pages dans un délai déterminé. Ces distractions sont souvent occasionnées par les boutons que l'on voit affiché sur la barre d'outils, les notifications des mails, les onglets de notre navigateur, etc. 

Pour vous éviter une enième raison de vous distraire et donc remettre à plus tard la finition de votre article, JDarkRoom se propose de masquer tout le contenu de l'écran, vous laissant seul face au texte que vous saisissez.

JDarkRomm pour écrire sans distraction


Il est vrai que vous pouvez mettre une musique de fond (grâce à votre lecteur) pour agrément ce moment d'écriture, mais au moins c'est moins distrayant que les autres trucs qui s'affichent habituellement sur votre bureau ou écran.

Comme cet outil n'a aucune barre ou onglet, voici quelques trucs à savoir pour mieux l'utiliser :

- Pour créer un nouveau fichier, faites CTRL+N, puis cliquez sur "Y' (Yes) pour confirmer la création du fichier.
- Pour enregistrer votre travail, faites CTRL+S, puis choisissez le dossier dans lequel sera enregistré votre texte.

Donc, si vous voulez booster votre productivité, je vous conseille vivement d'utiliser JDarkRoom, histoire d'écrire sans distraction.

@+

Vol du contenu de mes blogs : voici pourquoi je ne publie plus un flux complet

By // 16 commentaires:
vol de contenu des mes blogs


J'ai conscience que la décision que j'ai prise de ne plus publier un flux complet a deçue plus d'une personne. Seulement, je crois que même les déçus pourront comprendre que je ne pouvais pas rester sans rien faire face au vol de contenu dont commençent à souffrir mes blogs.

Tout le monde ici sait que toutes les astuces que j'ai publié ne sont pas le fruit de l'immaculé conception, encore moins de la génération spontanée. Mais, je m'efforce autant que possible d'indiquer au lecteur la source de provenance cette astuce (un blog, un modèle, un commentaire, etc.). Je comprend donc aisément que quelqu'un puisse faire écho d'une astuce sur son blog, en me citant aussi comme source, pour continuer la chaîne.

Ce que je ne comprend pas par contre, c'est que quelqu'un s'amuse à copier entièrement le contenu d'un article (images, textes - avec les mêmes fautes ou prouesses orthographiques) et le publie sur son blog. Ceci est déjà arrivé dans les années passées, je l'avoue et les problèmes ont été reglés à l'amiable avec ceux qui républièrent sans autorisation l'intégralité d'un article de Blogger au bout du doigt sur leurs blogs sans que cela puisse conduire à la revision de ma politique sur les flux. 

Mais, depuis que je publie des templates (modèles blogger, téléchargés dans l'ensemble à plus de 7.000  - sept milles- exemplaires), mes blogs traitant de Blogger et qui ont chacun un lien en pied de page de tous ces modèles sont devenus très exposés. La conséquence en est même que certains ont juste ajouté le flux de ces blogs sur  leurs sites où des extraints d'articles sont publiés (voir par exemple Broken controlers qui publie les deux lignes avec liens vers la source) ou encore l'intégralité des articles, comme sur l'image ci-dessous, et c'est ça qui est énervant (ça m'énerve tellement que je ne vais pas en plus mettre un lien vers ce site).



vol du contenu de blogger mastering

Je vous demande donc, très chers lecteurs, de ne pas trop m'en vouloir d'avoir pris une décision que je trouve sensée pour combattre ce genre de pratique.

Quelle première impression donnez-vous avec votre blog ?

By // 22 commentaires:
Saviez-vous que tout l'argumentaire de votre blog réside aussi sur la première impression qu'il donne ?

quelle première impression donnez-vous avec votre blog?


A ce qu'il paraît vous avez un blog. Vous y avez peut être déjà écrit  plein des trucs intéressants, avez mis de belles photos, reçu quelques visites, mais ça s'arrête là.

Les visiteurs ne passent pas plus de deux minutes sur votre blog et bien que vous ayez mis la possibilité de s'abonner à la newsletter, seule une poignée des personnes l'a fait. Vous vous demandez sûrement pourquoi cela se passe ainsi.

Je crois que cela d'avoir un lien avec la première impression que vous donnez à ceux qui débarquent pour la première fois sur votre blog. Et cette première impression est déterminée par la première chose qu'une personne voit en débarquant sur vôtre îlot sur internet.

Savez-vous ce qu'on voit en premier sur votre blog ? C'est l'entête de celui, qu'il soit composé des simples écrits ou d'une bannière (moche ou magnifique), c'est la première chose sur laquelle atterrissent les yeux d'un visiteur. Et c'est donc là qu'il a sa première impression.

Si vous n'arrivez pas à le convaincre dès la porte de votre blog, il y a des grandes chances que vous ne le garderez pas longtemps, même s'il lit quelques deux ou trois trucs intéressants par la suite. Il risque de les prendre comme une exception qui ne fait que confirmer la règle qu'il a établie sur votre blog "Blog pas intéressant" (et cela se fait dans son subconscient).

Vous devez donc veiller à ce qui est écrit à l'entête de votre blog et à l'aspect de votre bannière.

1° Le nom de votre blog doit être évocateur

Le nom de votre blog devrait à lui seul remplir la tête de votre visiteur de pleins d'idées et d'images.

C'est pourquoi avoir un blog qui porte votre nom n'est pas une très bonne idée (à moins que vous ne soyez déjà une star ou en deveniez une très vite). Le visiteur qui débarque pour la première se retrouve face à un nom qui ne lui dit absolument rien, n'évoque en lui aucune idée, ne fait remonter en lui aucune image.

Si par contre c'est quelqu'un qui vous connais qui débarque sur ce blog, le nom de celui-ci va lui évoquer plein des choses parce qu'il va lui adjoindre toutes les images qu'il s'est fait de votre personne.

J'ai toujours dis à Valentine que lorsque qu'une personne vous raconte une histoire, c'est qu'il fait sans souvent s'en rendre compte, c'est de créer des images dans votre tête (et ces images doivent s'accorder avec son récit).

Si votre interlocuteur vous dit par exemple "J'avais vu André entrain de pleurer", et bien, même si André est en face de vous tout souriant, vous allez vite vous représenter dans votre tête un "André entrain de pleurer". Par sa parole, votre interlocuteur a crée une image qui était pourtant contraire à la vision que vous aviez devant vous yeux, n'empêche qu'elle a été créé cette image.

Demandez-vous si l'image créée par le nom de votre blog est contraire à ce que vous présenter par la suite dans son contenu.


2° La description de votre blog doit être prometteuse

La description de votre blog ne doit pas s'arrêter à faire une sorte d'inventaire de tout ce que l'on peut y trouver. Il faut aussi que le visiteur sache en quoi cela lui sera bénéfique.

Prenons juste l'exemple de la description de ce blog (sans en faire l'apologie) : Conseils, astuces et techniques pour profiter au maximum de Blogger.

Le visiteur y est informé sur les choses qu'il peut trouver sur ce blog (conseils, astuces et techniques) mais aussi on lui dit en quoi cela lui sera bénéfique (profiter au maximum de Blogger). Imaginez la tête de celui qui a passé toute la nuit à manipuler sans succès son blog et qui pour la première fois débarque ici tenu par la main de notre tonton Google. La personne se dit direct "tiens, je crois qu'ici je pourrais trouver quelque chose d'intéressant" (surtout qu'il en a eu la promesse).

Donc, si vous voulez faire une bonne première impression à l'entête de votre blog, n'oubliez pas de dire en quoi votre blog sera bénéfique à celui qui s'apprête à le lire.


3° La bannière de votre blog doit être captivante

Juste au cas où vous ajoutez une bannière à votre blog (même si vous mettez plusieurs bannières), elle doit être captivante.

Par captivante je ne veux pas dire extravagante. La bannière de votre blog peut être simple, mais il faut qu'elle sache captiver l'attention. Cela peut se faire en y mettant des images évocatrices du titre, de la description ou même du jingle (ou du petit humour) associé à votre blog. L'idéal serait qu'elle contienne absolument le nom et la description de votre blog.



Prenons l'exemple de la bannière de SeoBook. Elle est simple, mais remplis toutes les fonctions ci-haut évoqué : 

- Elle a un titre évocateur : SeoBook - Livre du seo - elle évoque à votre esprit tout ce que vous avez entendu sur les capacités du seo.
- Elle a une description prometteuse : Learn. Rank. Dominate. (Apprendre, se Positionner, Dominer), le visiteur y apprend ce dont il va bénéficier
- L'image de la bannière est aussi intéressante: Un globe qui brille. Une façon de dire que vous allez briller autour du globe ?

Je ne suis pas le mieux placé pour affirmer que la bannière de ce blog est captivante, mais je sais qu'elle remplit certaines de fonctions ci-haut évoqué:

- Elle contient le titre et la description du blog
- l'image du coin gauche, avec un doigt pointé sur blogger, évoque le nom même du blog (Blogger au bout du doigt)
- l'image du coin droit restera un mystère pour le premier venu jusqu'à ce qu'il découvre ma petite bio (Premier Super Héros venu d'Afrique). Je crois même qu'il risque d'avoir un petit sourire au visage en associant l'image du super héros à ce qu'il aura lu sur le profil (comme ça été le cas pour mnénisique).

nom du blog, description, bannière


Si vous croyez toujours que vous avez le droit de mettre n'importe quelle bannière du moment où votre blog a un bon contenu, lisez ce commentaire de Yony, laissé à l'époque où le blog avait juste 2 ou 3 mois (et affichait fièrement une bannière très moche).

impression, bannière, visiteur


Comme nous venons de le voir, la première argumentation de votre réside à son entête, et qui sait si ce sera la seule chose que le visiteur prendra en compte.

Veillez donc à la première impression que vous donnez à un nouveau venu à partir de l'entête de votre blog

@+

Afficher un extrait de l'article en newsletter grâce à feedburner.

By // 9 commentaires:
Contrairement à ce que j'avais affirmé à Loizo, l'option pour afficher un flux partiel sur Blogger n'en affiche que le titre qui n'est pas accompagné d'une petite partie du texte.

Je crois que l'article "Flux partiel ou flux complet: lequel choisir" devait vous avoir mis la puce à l'oreille sur les raisons qui m'ont poussé à ne plus diffusé un flux complet pour ce blog. Seulement, j'avais bien voulu que le titre des articles soit accompagné du premier paragraphe (celui introductif), afin de mettre le lecteur dans le bain.

Après moult recherches, j'ai découvert qu'il était possible de n'afficher qu'un extrait de l'article en newsletter grâce à feedburner. Pour cela il faut se rendre sur votre compte Feedburner et cliquer sur le nom de votre blog (celui pour lequel vous voulez afficher les résumés, s'il y en a plus d'un comme chez moi).

extrait article, résumé article, feedburner, flux partiel, flux complet


1. Cliquez sur l'onglet "Optmize"
2. Descendez la nouvelle page et cliquez sur le dernier lien "Summary burner"
3. Choisissez le nombre maxium des caractères à afficher sur la newsletter
4. Mettez un texte indiquant aux abonnés que la suite peut être lue sur le blog (en cliquant sur le titre)
5. Cliquez sur "Activate" pour activer cette fonction.

Avec ça, Feedburner vas afficher un extrait de l'article en newsletter, pas seulement le titre.

24 heures en home page sur les digg-like : Bilan

By // 4 commentaires:
24 heures en home page sur les digg-like: bilan


Suite à l'article "Promotion de vos articles sur les digg-like - interview avec michèle", j'avais demandé à Michèle de faire une expérience plus concrète de ce qu'elle avait affirmée en proposant l'article en question sur ses digg-like préféré, ce qu'elle accepta avec joie.

Le résultat est que 4 heures après soumission, l'article se trouvait en home page sur Scoopeo avec 12 votes.
home page, digg-like, scoopeo



Il a terminé la journée avec 32 clic et toujours une très bonne position sur ce digg-like. Sur Wikio et blogasty, l'article s'est aussi bien comporté en arrivant en page d'accueil.

wikio, top, blogger au bout du doigt


Le résultat de cette percée est que le blog a eu plus de 100 visiteurs qu'à l'habitude pendant deux jours de suite (le jour de sa soumission ainsi que le jour qui a suivi) et j'ai aussi constaté que le nombre d'abonnés a augmenté de 11 personnes le lendemain de la soumission (reste à savoir s'ils venaient des moteurs de recherche ou des digg-like).

Ce qui est qu'il me faut aussi souligner, c'est qu'au cours de la même journée Michèle a posté 4 articles sur ces digg-like et tous sont arrivés en page d'accueil. Ceci pour dire que ses conseils sont basés sur l'expérience et que ça marche très bien pour elle.

visiteurs, abonnés, digg-like


Juste pour dire que l'utilisation des digg-like peut apporter quelques visiteurs de plus à votre blog (surtout des nouveaux qui n'en connaissaient pas l'existence) et même quelques abonnés de plus.

@+

Gagner des revenus payables mensuellement avec Google Adsense - Interview avec MarieBo

By // 12 commentaires:
Fatigué de n'avoir que des miettes avec Google Adsense ? Avez-vous envie de gagner des revenus payables mensuellement ? Alors, lisez ce qui suit.

google,adsense,revenus,mensuels


Il est un fait qui semble devenir une certitude: Google développe tous ses services et outils (NexusOne, on cite même Google Chrome OS) pour vous garder le plus longtemps en ligne. La simple raison de cette attitude est que le Net est dominé par les publicités que son service Adsense fournit, service qui lui permet de générer des milliards de dollars de bénéfices chaque année. Ce qui est quand même réconfortant, c'est que n'importe qui possédant un site ou un blog peut avoir part à la manne que Google glane en ligne, en intégrant des pubs Google Adsense sur ses pages.

Si l'insertion des pubs Google Adsense dans un blog peut être bien maîtrisée même par des gosses en CM1, le fait est que la génération de revenus payables mensuellement est devenu le casse-tête chinois auquel est buté la grande majorité des éditeurs Google Adsense. Cette situation a conduit plusieurs à considérer les revenus Google Adsense comme des miettes qu'il ne serait pas du tout fâcheux d'ajouter au total de ses revenus.

Mais, il existe des personnes qui croient que Google Adsense peut constituer une véritable mine d'or au point de devenir la principale source de revenus d'un quidam en séjour sur la planète terre.

Parmi ces personnes on retrouve MarieBo qui, bien qu'elle avoue n'avoir pas encore atteint le nirvana de Google Adsense, fait partie du cercle restreint des personnes qui arrivent à générer des revenus payables mensuellement grâce à ce programme.

C'est donc avec le coeur plein d'attentes que je me suis proposé de l'interviewer sur la question, afin qu'elle aide les lecteurs de Blogger au bout du doigt à dissiper certains mythes sur ce programme et à en connaître les réalités qui seront bénéfiques à leur compte (en terme de revenus bien sûr). Ready ? Let's go!

Rodney : Bonjour MarieBo.

MarieBo : Bonjour, ou bonsoir, Rodney.

N’oublions pas que la République Démocratique du Congo a 6 heures d’avance sur le Québec !

Rodney: Ha oui, c'est vrai ça. En tout cas, merci beaucoup d'avoir accepté d'éclairer la lanterne de mes lecteurs sur les moyens d'avoir des revenus stables et payables mensuellement grâce au programme Google Adsense..

MarieBo : J’apprécie ton invitation et j’espère que ma courte expérience pourra aider tes lecteurs.


Rodney : Ma première question est celle-ci: Depuis quand utilises-tu Google Adsense ?

MarieBo : J'ai mis des annonces Google Adsense sur mes premiers blogs à compter de juin 2008, mais avec de très maigres résultats au début.

J’étais confuse face aux recommandations contradictoires trouvées dans les nombreux ebooks que j’avais achetés.

Rodney : A quand remonte ton premier chèque de Google Adsense et depuis quand reçois-tu mensuellement des paiements grâce à cette plateforme ?

MarieBo : J'ai reçu un premier paiement en mars 2009. En janvier 2009 j'avais accumulé une soixantaine de $$$ et en février 2009 c'était  vraiment parti pour de bon. Google paie le mois suivant.

Par contre, il m'est arrivé une fois d'atteindre seulement 98$ et des poussières à la fin d’un mois, ce qui était assez cocasse … et frustrant !

Rodney : Penses-tu qu'il est possible de générer en un mois, grâce à un seul blog, les 100 dollars exigés comme minimum pour l'émission d'un chèque ? Si oui, quelle serait alors la recette magique pour accomplir cette prouesse ?

MarieBo : Avec UN Blog ? Difficile du côté francophone.

Certains sujets sont plus payants, mais la concurrence est très forte. Je pense entre autres à tout ce qui touche la photographie ou la technologie.  La recette magique c'est vraiment de répondre à un besoin qui rejoint  les préoccupations de milliers de personnes au niveau international et d'utiliser judicieusement les mots-clés.

Rodney : As-tu un seul blog à même de générer le minimum requis avec Adsense ou dois-tu seulement espérer réunir et dépasser ce montant grâce à plusieurs blogs ?

MarieBo : Pour ma part, je n'ai aucun blog qui génère ce montant à lui tout seul. C'est l'ensemble de mes blogs qui rapportent un revenu intéressant. 

Il faut aussi prendre conscience que les revenus varient  selon le moment de l'année. Au printemps, tout le monde veut maigrir, et en hiver, les internautes planifient leurs vacances d’été. Et pendant les vacances d’été, tout ralentit.

Rodney : Quand tu écris tes articles, tiens-tu compte du programme Google Adsense dans la conception du titre de l'article, de son contenu ou dans le choix de ses mots-clés ?

MarieBo : Il faut d'abord se préoccuper d'attirer des visiteurs en utilisant des formulations qu'ils utilisent pour chercher une information sur le Net. Les mot-clés proviennent de ces formulations.

Le mot-clé principal doit apparaître bien sûr dans le titre, et même deux fois si c'est possible.

Autrement, les mots-clés doivent être utilisés dans le premier et dernier paragraphe, et repris de façon naturelle quelques fois dans le texte. Les moteurs de recherche tiennent compte des synonymes également.

Certains articles ne rapportent pas par eux-mêmes, mais ils attirent des visiteurs. Ces visiteurs reviennent parce qu’ils ont découvert votre blog.

Rodney : Utilise-tu des techniques pour n'afficher que les publicités qui paient mieux sur tes blogs ? Si oui, lesquelles ?

MarieBo : Avant chaque article qui aborde un nouveau sujet, je fais une brève recherche sur le Générateur de Mots-clés de Google et j'examine aussi ce que fait la concurrence. Je fais le choix de mes mots-clés en fonction de ce que j'ai observé.

De cette façon, les annonces Google Adsense sont très bien ciblées et sont susceptibles d'intéresser les visiteurs car elles offrent un complément au contenu de mon article.

Surtout, je bloque les annonces qui n'ont aucun rapport avec le blog, ce qui se produit souvent avec les annonces illustrées.

Rodney : Quelles sont les trois formats que tu préfère afficher sur tes blogs et quelles sont d'après toi les meilleurs emplacements pour les mettre ?


MarieBo : Tout d'abord, je ne mets pas nécessairement les 3 annonces autorisées par Google Adsense. Les annonceurs apprécient le grand   rectangle (336 x 280) en haut de l'article. Si mon article est long, j'insère 
aussi une annonce à l'intérieur de l'article. 

Mon deuxième choix est la bannière verticale (160 x 600).

J'ai lu qu'il est bon de varier l'emplacement et même parfois la couleur des annonces. En effet, les visiteurs qui reviennent sont portés à faire abstraction des annonces.

Mes expériences n'ont pas été concluantes à ce sujet parce qu'il y a toujours plusieurs autres facteurs qui entrent en ligne de compte.

Par exemple, quand la bourse fluctue, les annonceurs deviennent frileux. Les revenus baissent aussi parfois selon les événements reliés à l'actualité, la température (pannes d’électricité de janvier 2010 en France) ou aux périodes de vacances.

Rodney : S'il te fallait guider un nouveau venu qui veut générer des revenus payables mensuellement grâce à Google Adsense, quelles sont les recommandations que tu pourrais lui chuchoter à l'oreille ?  

MarieBo : Voici ce qui pourraient être les "10 conseils au blogueur néophyte" pour réussir sur Internet.

1° Ton blog doit répondre à un besoin qui préoccupe tous les  internautes de la francophonie internationale.

2° Choisis un sujet par lequel tu es passionné parce que publier un blog, c'est beaucoup de travail, surtout au début. Mais entre deux passions, choisis la plus payante, si la concurrence n'est pas trop forte.

3° Pour choisir le nom de domaine de ton blog, choisis des mots-clés qui correspondent au vocabulaire utilisé par les internautes qui cherchent des informations sur le sujet de ton blog.

4° Applique des règles élémentaires de référencement naturel.

5° Monétise ton blog avec Adsense et avec Amazon.

6° Prévois d'autres blogs, soit dans la même thématique que le premier (famille de blogs), ou dans un autre domaine ( voir la recommandation no 1).

7° Utilise la plate-forme Blogger parce qu'elle est gratuite et performante. Les visiteurs qui trouvent une réponse à leurs besoins sur ton blog se soucient très peu du fait que Blogger ne te coûte rien. Et si tu te trompes, tu peux commencer un nouveau blog en quelques minutes.

8° Méfie-toi de tous ceux qui veulent te vendre des sites tout faits, des memberships dispendieux ou des ebooks à 95€.  Tu peux trouver toutes les informations dont tu as besoin, gratuitement, sur Internet.

9° Consacre ton temps à rédiger des articles, à chercher des ressources pour répondre aux besoins de tes visiteurs et à faire connaître ton blog. Les pertes de temps sont faciles sur le Net.

10° Dépendant de ton activité professionnelle habituelle, pense à choisir un nom d'auteur pour publier tes blogs.


Rodney : Y a -t-il une question que tu aurais aimé que je te pose et quelle aurait été ta réponse à celle-ci ?

MarieBo : Je suis étonnée que te ne me demandes pas pourquoi je veux faire de l'argent avec Adsense ?

Parce que je prépare un voyage autour du monde et je veux pouvoir compter sur un revenu supplémentaire au moment où j'adopterai  un style de vie nomade.


Rodney : Encore une fois, merci beaucoup pour ta collaboration et plein de succès à toi dans tes entreprises.

MarieBo : Merci pour ton invitation et j'ai trouvé très intéressant de faire ce retour sur mon expérience  d'éditrice de blogs et de  considérer le chemin parcouru.

Rodney : Alors, cher lecteur, qu'as-tu retenu de cette interview ? Des questions à poser ? Des remarques à faire ? N'hésite pas, lance-toi ! 

Au fait, sache aussi que MarieBo peut te donner d'autres orientation, sur bien des sujets, sur son blog MarieBo Solutions.

Déplacer les widgets à partir du code html de votre Blog sur Blogger

By // 9 commentaires:
déplacer,widgets, code html, blogger,


Il arrive parfois que la fonction glisser/déposer disponible pour les widgets sur Blogger (voir "Mise en page") soit hors service. Il arrive aussi que pendant ce moment désagréable vous voulez à tout prix déplacer un widget qui n'a pas sa place à l'endroit où il se trouve. Que faire ? La solution est simple, aller effectuer ce déplacement dans le code html du blog. 

Pour cela, il faut se rendre sur votre compte Blogger, sur "Mise en page" puis sur Modifier le code html. Dans le modèle minima de base, vous trouverez le code suivant pour la sidebar :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>
</b:section>
      </div>

Si je vais déplacer le widget Membres pour qu'il soit à la fin et que ce soit plutôt le widget profil qui s'affiche en premier lieu, il me suffit de couper la ligne de code du widget "Followers" (Membres) pour la place après celle du widget "Profile" (Qui êtes-vous ?). Ce qui donnera ceci :



<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>
</b:section>
      </div>



Ensuite, je prendrais la ligne de code du widget "Profile", pour la placer avant celle du widget "BlogArchive" (Archives du blog). Au final, j'aurais donc le résultat souhaité. 


<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>
</b:section>
      </div>



Il ne restera plus qu'à enregistrer le modèle et aller admirer le résultat.

Comme vous l'avez compris, quand la fonction "glisser/déposer" ne marche plus sur votre blog, ne paniquez surtout pas. Il y a moyen de déplacer les widgets à partir du code html de votre blog et c'est facile. 

@+

Voici pourquoi les gifs animés ne marchent pas sur Blogger

By // 9 commentaires:

L'article les gifs animés sont maintenants animés sur Blogger continue à attirer des personnes désireuses de voir comment faire pour avoir ce résultat dans les articles qu'il publie. Seulement, il a été constaté depuis belle lurette que cette fonction est HS (hors service). Pourquoi ? 

La raison toute simple qui explique ce désagrément est que toutes les images avec une extension gif chargées sur Blogger au travers de l'éditeur de message sont transformées en images avec extension png.

Donc, si votre gif animé se nomme moonwalk.gif, dès que vous l'ajoutez à un billet en l'uploadant à partir de l'éditeur de message Blogger, cette image se nommera moonwalk.png, perdant ainsi toute possibilité de voir Michaël Jackson exécuter un moonwalk (si bien entendu l'image le représentait entrain de le faire).

La solution à ce désagrément serait d'héberger votre gif animé ailleurs et de l'insérer dans votre message grâce au code ci-après:

<img src="http://liendevotreimage.com/image.gif" altr="mots, clés, de votre image" />

Tout ceci pour dire que les gifs animés ne marchent pas sur Blogger parce que ce service n'affectionne pas particulièrement ce format d'image.

@+

Promotion des vos articles sur les Digg-like - Interview avec Michèle

By // 19 commentaires:
promotion de vos articles sur les digg-like
Voir son article en page  d’accueil d'un site comme Digg peut générer 3000 à 30.000 visiteurs pour le blog dont l'article a été référencé. Un site comme Zenhabit qui avait eu jusqu'à 40 articles en page d'accueil de Digg au cours de l'année 2008 n'aurait peut-être pas eu le Karma qu'il a maintenant n'eut-été ce coup de pouce.

S'il est vrai que la francophonie n'a pas des sites pouvant rapporter rapidement le même nombre de visiteurs que Digg, il n'en reste pas moins que les Digg-like francophone peuvent constituer un excellent moyen de promotion de son blog.

Pour avoir une idée plus précise sur ce que sont ces Digg-like et de l'impact qu'ils peuvent avoir sur votre blog quand vous y faites la promotion de vos articles, je me suis proposé d'interviewer quelqu'un qui a l'habitude de voir ses articles en premier page des meilleurs Digg-like de la place.

Cette personne, c'est Michèle du Blog Attention à la terre, un blog sur Blog sur environnement, developpement durable, energies renouvelables,les energies solaires, etc. Je crois fermement que cette dame très sympathique, peut nous donner quelques leçons pour mieux utiliser les Digg-like comme outil de promotion de nos articles. Serrez-vos ceintures, on démarre.

Rodney : Bonjour Michèle.

Michèle : Bonjour Rodney, merci pour cette invitation sympa.

Rodney : Je te remercie infiniment d'avoir accepté de participer à cette interview qui je l'espère sera très bénéfique aux lecteurs de Blogger au bout du doigt. Alors, commençons !

Rodney : Quelle est ta définition d'un Digg-like ?

Michèle : Pour faire court, je dirais qu'il y a deux points de vue:

1) celui de ceux qui postent
2) celui de ceux qui cherchent l'info.

Pour la première catégorie, cela permet de faire connaître son blog et d'augmenter le nombre de visites sur celui-ci.
Pour l'autre, c'est une sorte de vitrine au travers de laquelle un aperçu de ce qui se passe sur la blogosphère et le net en général, est présenté.

Rodney : Pour ce qui est de la francophonie, quels sont les 3 Digg-like que tu recommanderais en premier lieu (disons les 3 que tu préfères) et combien en utilise-tu actuellement ?

Michèle : Je ne peux parler que de mon expérience bien entendu. Pour mon genre de blog, les digg-like les plus porteurs restent (par ordre de visites apportées) Scoopeo, puis Blogasty puis sans doute Bluegger. Pour l'instant, je n'en utilise plus que 3 : Scoopeo, Blogasty et Wikio (à cause du classement mensuel, mais pas tellement porteur en termes de visites).

J'ai oublié de parler d'Eweeb qui n'est pas vraiment un digg comme les autres, mais qui est pour moi plus une plate-forme entre blogueurs avec la possibilité d'ajouter une photo..etc. C'est donc un "Super Digg" bien orchestré par Gaëtan (mais à toi, pas besoin de te le présenter ;o)

Rodney : Combien de temps consacres-tu par jour (ou par semaine) à la promotion de tes articles sur tes Digg-like préférés ?

Michèle : A mon avis, trop de temps ! En moyenne, je pense que l'un dans l'autre (entre le fait de poster et de voter) je dirais que cela peux atteindre 2 à 3h par semaine.

Rodney : Y a-t-il des règles à respecter pour positionner ses articles  en première page des Digg-like ? (donne-nous quelques règles spécifiques à tes trois Digg-like préférés).

Michèle : Après avoir lu sur le sujet,(au sein même des diggs, bien lire le mode d'emploi) et demandé conseil autour de moi, je dirais:

1. Il faut de la patience, mon premier article en home n'est apparu que 1,5 an après mon inscription       
2. Des titres courts, une description courte et concise
3. Voter pour les autres, se créer son réseau, laisser des commentaires, et ainsi augmenter son "Karma" ou son "classement" dans le classement général du digg.
4. Une réputation ne se fait pas en un jour et, si vous postez régulièrement des articles qui ont un fond, qui respectent les règles, il n'y a pas de raison pour que votre réseau ne s'agrandisse pas et qu'à votre tour vous caracoliez à votre en HP !

Rodney : Utilises-tu d'autres techniques pour te retrouver en homepage d'un quelconque Digg-like ?

Michèle : Les bloggers que j'apprécie se mettent tout naturellement dans mon réseau et ce simple partage suffit en général pour augmenter sa pertinence au sein du digg. Mais encore une fois, cela veut dire qu'il faut s'intéresser aussi à d'autres digg qu'aux siens. J'appellerais cela un échange de clics!!

Rodney:  Se retrouver en home page de ces Digg-like affecte-il considérablement le nombre des visites sur ton blog ?

impacts digg-like sur le nombre des visiteurs
Michèle : Je peux te répondre très clairement : OUI pour les visites, NON pour le taux de rebond car je remarque que les jours où je ne poste pas, les visites arrivent via les moteurs de recherche et ces visiteurs restent en général plus longtemps que les "diggers" qui souvent "zappent". Donc, à chacun de juger ce qu'il veut. Personnellement, c'est aussi pour cette raison que j'ai réduit considérablement le nombre des diggs sur lesquels je poste (à un moment il m'arrivait de poster sur 8 diggs....)

Rodney: Se retrouver en home page des Digg-like a-t-il des incidences que tu considère négatives sur certains paramètres en rapport avec la vie de ton blog ?

Michèle : Comme dit ci-dessus, je pense que c'est par rapport au taux de rebond. Ils permettent tout de même de se faire connaître, d'obtenir de nouveaux lecteurs.

Rodney : Quel serait le premier conseil qui tu donnerais spontanément à un bloggeur qui veut se lancer dans la promotion de ses articles sur les Digg-like ?

Michèle : Avoir de la patience, ne pas se décourager, et se faire de bons contacts (mais bien entendu avoir quelque chose à dire dans ses articles !!)

Rodney : Y a-t-il quelque chose que tu aimerais coûte que coûte ajouter ?

Michèle : Oui, je voulais préciser que c'est en 2007 qu'un ami m'a envoyé le lien vers ton blog, ce n'est donc pas grâce à un digg que j'ai eu la chance de te connaître donc, les diggs sont importants, mais pas autant que le "bouche à oreilles" ou la relation personnelle qui peut s'établir entre des bloggers, qui elle, n'a pas besoin d'évaluation ou de vote ou de points !!

Rodney : Encore merci pour ta participation.

Michèle : Merci à toi pour ces bons conseils prodigués au fil des ans, dans des conditions pas toujours faciles, il faut le répéter, ton blog en a donc encore plus de valeur.

Je suis en plus très honorée et très touchée  d'avoir été choisie pour cet interview par Le Premier Super Héros venu d'Afrique à la recherche du code source du monde pour le changer ! A bientôt Rodney, garde-toi bien.

Rodney : Et toi, chers lecteur, qu'as-tu retenu de cette interview ?

P.S. : Avant que tu ne donne ta réponse, je te recommande vivement de souvent passer voir sur Attention à la terre,  un blog où Michèle pourra te donner des bonnes astuces pour ne pas hypothèquer l'avenir écologique de ta descendance. Et Pendant que tu réfléchis sur quoi pondre en commentaire, je te laisse avec cette chanson de Pierre Perret que Michèle aime beaucoup (Attention tout de même ! Cette chanson peut te rendre vert de colère.)




© Adèle


Menu avec liens actifs affichant une couleur de fond différentes

By // 1 commentaire:
La grande difficulté à laquelle je fus buté en adaptant le thèmeVisiting card, c'est que je n'arrivais pas faire en sorte que la couleur fond des liens du menu change selon que l'on se trouve sur une page ou une autre, selon qu'une page est active ou pas. Mes recherches sur les autres templates blogger disponible en ligne furent infrectueuses, car aucun n'arrivait à rendre le menu actif sur pour une page et pas pour les autres.



Si j'étais tombé sur le code que je vais vous présenter, je crois que je me serais un peu plus débattu pour avoir le résultat escompté. Dans l'image ci-haut, je me trouvait à la page d'accueil du blog, et ainsi le fond du bouton accueil sur le menu avec une couleur différente des autres. Dans l'image ci-bas, je me trouve sur une autre page et la couleur de fond du bouton menu de ce lien actif  est celle qui devient différente des autres. 



Le template que j'utilise actuellement sur blogger mastering rend parfaitement l'effet que j'attendais. C'est pourquoi je me suis permis de vous en livrer le secret, car qui sait si quelqu'un ici  a besoin de permettre aux visiteurs de mieux se situer par rapport à la page du lien du menu sur laquelle ils se trouvent.

Voici les étapes à suivre pour disposer de ce menu sur son blog :

1. Se connecter à votre compte Blogger. Aller sur "Mise en page" puis sur "Modifier le code html".
2. Mettre le css suivant juste avant la balise ]]></b:skin>

/*NAVIGATION BAR */

.nav {
    border-top:1px solid #ddd;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi99Btv1cHEsBTbMixXd441Myt0tM5vQZztuA-OtWxi91QbTtkJa_3HRMcbC1b6pJXEVj6fyyvJrOWFw7VFOoRX-YOLYL7ZG5COUXAHtq9KZfZiBJTeRu0sfWYFs24MAaJ9aMeWmOIgbHQ/s1600/nav_bg.png) repeat-x;
    width:980px;
    height:30px;
}

.nav li {
    float:left;
    padding:0 10px;
    line-height:30px;
    height:30px;
    border-right: 1px solid #ddd;
}
.nav li a{
    text-decoration:none;
    text-transform:uppercase;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    letter-spacing:2px;
    font-weight:900;
}
.current-cat{
    background:#fff;
}
.actived a {
    color:#c34b9b !important;
}


3. Ajouter ce script avant la balise </head>

<script type='text/javascript'>
     function currentpage (url,current,name) {
     var name = name ;
     var url = url;
     var current = current;
     if (current == url) {
     document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
     }
     else {
     document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
     }       
     }
</script>

4. Ajouter cette section avant le </div> qui ferme votre <div id="head"> ou votre <div id="header">

     <b:section class='nav fl' id='menubar' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
                         <ul>
                             <b:loop values='data:links' var='link'>
                                <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
                                
                             </b:loop>
                         </ul>                
                 </b:includable>
</b:widget>
</b:section>

Enregistrer votre modèle.

5. Se rendre sur "Mise en page" et cliquer sur le "modifier" pour le widget "LinkList" (Liste des liens) qui s'affiche désormais après le "header" (entête). Ajoutez des liens à votre menu et enregistrez les modifications. 

Maintenant, votre blog aura un système de navigation avec liens affichant une couleur  de fond différente selon que se trouve une page dont le lien se trouve sur la barre de menu. 

@+

Widget accordéon d'articles avec vignettes

By // 3 commentaires:
Aujourd'hui j'aimerais vous présenter un widget en forme d'accordéon présent sur mon blog "Blogger Mastering", et qui me permet d'afficher les Blogger templates que j'ai (et aurais) publié.

widget accordéon d'articles avec vignettes


La spécificité de ce widget est que quand l'on débarque sur la page, seul le dernier article est affiché avec une vignette accompagné d'un petit résumé (le premier paragraphe). Les restes des articles sont réduit à leur simple titre. Pour les afficher, il suffit de cliquer sur la petite flechètte au coin droit du titre du post.  Le lecteur dispose également de la possibilité de referme tout cet accordéon afin d'afficher seulement les titres des articles.

articles d'un libellé, catégorie, affichés en accordéon avec vignettes

Deux conditions sont à remplir pour que ce widget affichant un accordeon d'articles d'une certaine catégorie puisse fonctionner : il faut que vous diffusiez un flux complet de votre blog et comme vous l'aurez déviné, seul un libellé sera pris en compte. Vu que les libellés font office de catégories sur blogger, le libellé qui sera utilisé sera celui d'une catégorie dont vous voulez spécialement faire la publicité.

Voici les étapes à suivre avoir ce widget sur votre blog :

1. Connectez-vous à votre compte Blogger. Allez sur "Mise en page", puis sur "Modifier le code html".
2. Mettez le code css suivant juste avant la balise ]]></b:skin>

.accordion {
float:left;
width: 260px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h4 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin:0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border-top: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h4:hover {
background-color: #e3e2e2;
}
.accordion h4.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;

}


3. Mettez les scripts ci-après juste avant la balise </head>

<script src='http://contact.dinhquanghuy.googlepages.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.accordion h4:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();

$(&quot;.accordion h4&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h4&quot;).removeClass(&quot;active&quot;);
});

});
</script>

Enregistrez votre modèle.

4. Rendez-vous sur "Mise en page" et ajoutez un nouveau widget html dans lequel vous mettrez ce code (remplacez-y les éléments en gras par les informations correctes) :

<script language='javascript'>
                                 imgr = new Array();
                                 imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
                                 showRandomImg = true;
                                 jimgwidth = 220;
                                 jimgheight = 120;
                                 jfntsize = 12;
                                 jacolor = "#E67C15";
                                 jaBold = true;
                                 jtext = "Comments";
                                 jshowPostDate = true;
                                 sumtitle = 25;
                                 jsummaryPost = 200;
                                 summaryFontsize = 12;
                                 summaryColor = "#000";
                                 numposts = 6;
                                 label = "Votre libellé";
                                 home_page = "http://votreblog.blogspot.com/";
                             </script>
<div class='accordion'>
<script src='http://simplexdesign.googlecode.com/files/j-label-fix.js' type='text/javascript'></script>

</div>

Enregistrez votre widget et allez admirer le résultat. Vous verrez désormais un widdget accordéon d'articles avec vignettes sur votre blog. Sympa, non ?

@+
@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT