Blogger au bout du doigt

Un blog Blogger au hasard

By Rodney // 9 commentaires:

Vous avez caché la navbar de Blogger avec l'une de deux techniques enseignées sur ce blog ? Vous ne disposez donc plus de la possibilité d'aller vers n'importe quel blog Blogger grâce au lien "Blog suivant" se trouvant sur la barre de navigation offerte par Blogger.

Si vous tenez quand même à avoir cette fonctionnalité, pour faciliter à vos lecteur comme à vous le tourisme sur cette grande mer qu'est Blogger, voici un lien qui va vous sortir d'affaire.

http://www.blogger.com/next-blog?navBar=true

Il suffit de l'insérer dans un widget liste des liens, et il conduira vers un blog blogger au hasard à chaque fois qu'on y cliquera.

Quand les visiteurs peuvent changer la taille du texte de votre blog

By Rodney // 4 commentaires:

Voici un widget qui j'ai vu à l'action sur le blog Online Biz. Il offre aux visiteurs de changer la taille du texte de votre blog. Il suffit de cliquer sur l'image avec le + pour augmenter la taille du texte ou sur l'image avec le - pour réduire la taille du texte.

Un coup d'oeil dans le code source du blog cité m'avait permis de trouver les composantes nécessaires à la marche de cette astuce.

Malheureusement, vu le temps de temps dont je dispose, je n'ai pus faire une version française de ces images. Si quelqu'un pouvait nous en faire, il aura un lien gratis vers son blog dans cet article (avec les remerciements du Jury).

Mise à jour : Dibay nous a aidé à mettre des images en français. Grand merci à lui.

Voici ce qu'il faut faire pour avoir cette petite merveille dans son blog :

1. Se connecter à son compte. Aller sur "Mise en page" puis sur modifier le code html.

2. Trouvez la balise <body> et Remplacez la par <body id='body' onload='replaceText();'>

3. Mettre le code suivant juste après la balise ]] > </b:skin>

<script src='http://javascripthost.com/s1/bin/textsizer.js' type='text/javascript'></script>

2. Mettez le code suivant dans un widget HTML/JASCRIPT

<center><a href="javascript:ts('body',1)"><img src="http://i252.photobucket.com/albums/hh36/wacly/groscaractre.jpg"/></a>
<a href="javascript:ts('body',-1)"><img src="http://i252.photobucket.com/albums/hh36/wacly/petitcaractre.jpg"/></a></center>

Pour la version sans image de ce widget prendre ce code :

<center><a href="javascript:ts('body',1)">Augmenter la taille du texte</a>
<a href="javascript:ts('body',-1)">Diminuer la taille du texte</a></center>

A+ mes amis

Fléchette pour revenir au début de la page

By Rodney // 12 commentaires:

Mes amis, vous avez sûrement remarqué que l'agent 001 de Blogger au bout du doigt (Rodney) ne répond plus depuis un certain temps. Rien de grave de mon côté (même si la guerre chauffe à l'Est), juste entrain de préparer mes examens de fin d'année (qui commencent le 4 novembre : le jour de la victoire d'Obama ? ).

J'ai tout même profité de ce temps de repos pour découvrir plusieurs astuces sur Blogger que je vais vous partager dans les jours qui viennent.

Je puis vous proposer aujourd'hui ce petit widget qui affiche une petite fléchette (pas aussi grosse que celle en illustration) pointée vers le haut et qui permettra à vos lecteurs de revenir en un clin d'oeil au début de la page (surtout si elle est très longue).

Ce widget est à insérer dans un widget HTML/JAVASCRIPT.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Aller au début de la page"><img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif" /></a>

Source : Widget for free

A+ et portez vous bien.

Surtout n'oubliez pas qu'un jour nouveau est un jour merveilleux.

Afficher un breadcrumb de navigation sur toutes vos pages

By Rodney // 5 commentaires:

Un breadcrumb est un système de navigation qui indique au lecteur sur quel page du site il se trouve par rapport au plan global de celui-ci (voir image). Sur Blogger, les libellés nous permettent de catégoriser nos articles, ce qui permet d’avoir une hiérarchie du blog par rapport à l’accueil, en plus des pages d’archives.

Hoctro avait conçu un breadcrumb pour Blogger qui avait l’handicap de ne s’afficher que sur les pages d’articles. Amanda de Blogger Buster à elle récemment conçu un breadcrumb à même de s’afficher même sur la page d’accueil et sur les pages d’archives. C’est ce dernier que j’aimerais vous partager. Vous pouvez déjà le voir à l’œuvre sur ce site.

Pour l’avoir sur votre blog, il vous faut :

1. Vous connecter à votre compte, sur “ Mise en page ” pour le blog dans lequel l’insérer puis sur “ Modifier le code Html ” et cochez sur modifier le code html

2. Trouvez le code suivant :

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

3. Remplacez-le par celui-ci :

<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Bienvenu sur <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Vous êtes ici : <a expr:href='data:blog.homepageUrl' rel='tag'>Accueil</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Vous êtes ici : <a expr:href='data:blog.homepageUrl'>Accueil</a> » Archives pour <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>

Si vous aviez utilisé l’astuce pour effacer le message de la page libellé, vous ne trouverez pas le code de l’étape 2 sur votre blog.

Il vous faut plutôt mettre le code de l’étape 3 avant celui-ci :

souvent avant :

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>

A+

Photo de l'auteur à côté du titre de l'article sur un blog tenu en équipe

By Rodney // 11 commentaires:

Vous êtes une équipe à tenir un blog ? N’aimeriez vous pas afficher un petit avatar (ou une petite photo) de chaque auteur à côté du titre de l’article que celui-ci a écrit, histoire que le lecteur soit vite informé de qui est l’article au lieu de chercher avec minutie où se trouve l’identité de l’auteur sur la page ?

Si cela vous intéresse, cet article est pour vous.

Vous pouvez voir un exemple du résultat à obtenir sur cette page.

Pour accomplir cette petite prouesse :

1) Connectez vous sur votre compte.
2) Aller sur « mise en page », « modifier le code html », puis cochez sur « développer des modèles de gadget »
3) trouvez le code suivant :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

4) Juste après le code en rouge, mettez celui-ci:

<b:if cond='data:post.author == "Nom de l’auteur 1"'>
<span class="author"><img src="URL DE L’IMAGE"/></span>
</b:if>

<b:if cond='data:post.author == " Nom de l’auteur 2"'>
<span class="author"><img src=" URL DE L’IMAGE "/></span>
</b:if>

Si vous avez plus de deux auteurs, vous pouvez ajouter d’autre balises conditionnelles.

Le nom de l’auteur doit être exactement le même que celui affiché sur le profil Blogger (veiller sur les majuscules et minuscules).

L’idéal pour la taille des images, seraient qu’elles varient entre 30x30 ou 50x50 pixels.

5) Juste avant ]]</b:skin> ajouter cette ligne :

.author img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}

L’image sera affiché à gauche du titre de l’article. Si vous voulez l’avoir à droit, mettez right à la place de left dans ligne ci-haut.

Régalez-vous !

Source : Cet Article

Changer l’apparence de la boîte de souscription à la newsletter de Feedburner

By Rodney // 4 commentaires:

Kameyoko avait avec insistance demandé comment avoir une boîte de souscription à la Newsletter offerte par Feedburner différente de celle proposée.

Après quelques recherches, je puis aujourd’hui lui offrir la solution pour assouvir son besoin (et celui de ceux que ça va intéresser), solution inspirée de ce blog.

Voici à quoi ressemble le code pour la boîte de souscription à Feedburner

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=Your feed ID here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=Your feed ID here" name="url"/><input type="hidden" value="blog name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

1) Changer la couleur de fond :

Pour cela, ajouter background: #00BB11; juste après text-align:center; (N.B. : Vous pouvez remplacer le code couleur 00BB11 par celui de votre couleur préférée. Voir pour les autres codes ici)

Le code devrait alors ressembler à quelque chose comme ceci :

<form style="border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;"

2) Ajouter une image de fond

Pour cela, ajouter background: url(http://urldevotreimage); juste après text-align:center;

Remplacer l’urldevotreimage par l’url de votre image.

Le code devrait avoir maintenant avoir cette apparence :

<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://urldevotreimage);"

3) Changer la longueur de la case de texte (celle où on écrit l’email)

Il suffit pour cela de reduire ou d’augmenter le chiffre de width:140px . Mettre un autre chiffre à la place de 140.

Dans cet exemple, on a mis 250 à la place de 140

<input type="text" style="width:250px" name="email"/>

4) Ajouter un texte par défaut dans la case de texte (celle où on écrit l’émail)

Pour accomplir cette petite prouesse, enlever la partie suivante :

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

Remplacez le par :

Vous pouvez mettre un autre texte, à la place de « Mettre votre adresse e-mail ici »

5) Changer la largeur de la case de texte :

Il suffit pour cela d’ajouter height:22px; juste après style="width:255px; et mettre le chiffre de votre choix à la place du 22.

Nous aurons alors quelque chose du genre : style="width:255px;height:22px;.....................

6) Changer la couleur et la taille du texte

Pour changer la couleur et la taille du texte, mettre la ligne suivante font-size:15px;color:#AA33FF juste après le style="width:255px; en oubliant pas de mettre la taille désirée à la place de 15 et la couleur désirée à la place de AA33FF (Voir pour les autres codes ici)

Le code devrai alors ressembler à ceci dans la partie modifiée :

style="width:255px;height:22px;font-size:15px;color:#000000.....

7) Changer le style du bouton « Suscribe » (s’abonner)

Pour cela, il faut mettre un bout de code dans le html de votre blog.

1. Allez sur modifier le code html
2. Chercher ]]></b:skin>
3. Mettre le code ci-dessous juste avant ]]></b:skin>

.boutton { background-color: #cc0000; font-size: 80%;font-family:Tahoma; font-weight: bold;color:#ffffff; }

4. Enregistrer le modèle
5. Faire une petite modification dans le code feedburner:

Remplacer ce bout de code

<input type="submit" value="Subscribe" />

Par

<input type="submit" value="Subscribe" class="boutton"/>

Vous pouvez changer la taille, l’apparence et la couleur du bouton dans

8) Enlever le texte 'Delivered by Feedburner' :

Très simple. Effacer cette ligne

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

Bon voilà, avec ça vous pouvez avoir un votre boîte d’abonnement à la newsletter qui s’intègre complétement à votre blog.

Moi, je suis allé un peu plus loin et ajoutant un gros bouton de souscription juste à côté de la boîte.

Pour cela, il m’a suffit d’utiliser le code pour mettre un article sur deux colonnes. J’ai mis le code pour la boîte dans la colonne droite et le code pour le bouton dans la colonne gauche.

Voici le code pour le bouton RSS :

A+

Jouer à cache-cache avec la navbar blogger

By Rodney // 19 commentaires:

Salut,

C'est encore Mister Air. Je suis tombé sur un blog sous Blogger (Beaucoup d'images sur pas grand chose) qui a la particularité d'avoir une navbar ne s'affichant que lorsque le pointeur passe devant.

J'ai demandé au blogmaster le code, qu'il s'est empressé de me donner, et je pense que cette astuce peut intéresser les lecteurs de ce blog.

Contrairement à un hack publié sur ce blog au mois de juin 2007(Cacher la barre de navigation sur Blogger), il suffit juste de copier une portion de CSS à la fin de celui de son blog et le tour et joué!!

Voici le code:

/* Navbar
------------------------------

----------------- */
#navbar { height:3px; z-index:4; }
#navbar:hover { height:28px; }
#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) }
#navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100) }

Vous pouvez voir ce que cela donne sur mon blog test.

A+ :)

Mister aiR,

blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!

Des infobules pour images dans votre sidebar

By Rodney // 6 commentaires:

Salut à tous.

Je fais ici une petite incursion rapide sur le blog de Rodney (qui est un peu débordé ces jours-ci) pour vous proposer un tuto sur les infobulles.

Nativement, tout navigateur affiche des infobulles lors du passage du pointeur sur un lien. Généralement, en bon bloger qui se respecte, on fignole ces dit lien en indiquant le texte devant y figurer grâce aux balises "alt" et "title".

Le tuto du jour vous propose d'aller plus loin en créant un style propre d'infobulle avec un contenu enrichi, et personnalisable en tout les sens pour mieux rester dans le style de votre blog.

Tout d'abord il faut se connecter à son tableau de bord, onglet "mise en page", puis "modifier le code HTML".

Ensuite, placez le code CSS suivant juste avant la balise ]]></b:skin> :

/* Tooltip
----------------------------------------------- */

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font: $postTitleFont;
    font-size:85%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    color: #cccccc;
    border: 3px solid #000000;
    background: #000000; transparent

moz-opacity:0.90;
opacity: 0.90;
filter:alpha(opacity=90);

width:170px;
}
a.tooltip:hover em span {
position: absolute;
   top: -7px;
    left: -2px;
    height: 9px;
    width: 180px;
    background: transparent url(url de Votre image);
    margin:0;
    padding: 0;
    border: 0;
}

Remplacez le "url votre image" par une image de votre choix ou laissez le champ vide.

Cette image sert selon les cas à créer un effet vignette de BD ou tout autre effet de style.

Il suffit de jouer avec les marges pour l'ajuster.

En bleu, c'est le code pour ajuster la transparence de la bulle; le 90 signifie 90% d'opacité,

Mais réglez-le à votre guise. Attention toutefois à ajuster les 3 valeurs pour que tout s'affiche correctement sous divers navigateurs!

Enregistrez votre modèle et passons à la seconde étape.

Deuxième étape:

Aller dans l'onglet "Éléments de page" et sélectionnez "ajouter un gadget", puis "HTML/JavaScript".

Insérez le code suivant:

<a href="URL du lien" class="tooltip"><img alt="Nom du lien" src="URL de l'image du lien"/><em>

<span></span>Texte</em></a>

Placez vos éléments au bon endroit, pensez à régler la taille de votre image, enregistrez.

Cette infobulle permet d'afficher un court texte pour présenter son lien.

On peut aussi afficher une image à la place du texte grâce à cet autre code:

Voilà, maintenant vous savez comment créer des infobulles personnalisées et avec un contenu enrichi.

Si vous avez des questions ou un problème, n'hésitez-pas, laissez un commentaire!

Mister aiR,

blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!

Un compteur des liens bookmarkés dans delicious sur votre blog

By Rodney // Aucun commentaire:

Delicious (aussi connu sous son ancien nom, del.icio.us) est un site web social permettant de sauvegarder et de partager ses marque-pages Internet et de les classer selon le principe de folksonomie par des mots clés (ou tags).

En plus, les liens les plus sauvegardés sur Delicious se retrouvent en page d'accueil et peuvent donc faire bénéficier au site en question plein de visiteurs (un peu comme sur un Digglike, sauf qu'ici on ne vote pas, on sauvegarde). D'où l'importance de proposer à vos lecteurs de sauvegarder les articles de votre blog sur Delicious.

Antonnio Lupetti nous propose une astuce très simple pour avoir un bouton de sauvegarder sur del.icio.us associé à un compteur (qui affiche le nombre de sauvegarder déjà effectué) sur un blog blogger.

Pour l'avoir sur votre blog, il vous faut :

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

2. Mettre ce code avant la balise ]]></b:skin>

.delsquare{
font-family:Arial;
background:#0033CC;
padding:2px 4px;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}

3. Pour avoir un compteur des bookmark de l'url principale de votre blog (et proposer aux visiteurs de le sauvegarder), il vous faut :

a. Vous connecter à votre compte Delicious

b. Cliquer sur le lien "look up a url"

c. Mettre l'url de votre blog et cliquer sur la flèche

d. Sur la page qui s'affichera, vous aurez le nombre des fois et d'utilisateurs qui ont sauvegardé l'url de votre blog sur delicious et le nombre des notes écrites à son sujet.

Ici, voyez sur la barre d'adresse, et prenez le nombre qui vient après delicious.com/url/

Ce nombre est l'identifiant du blog sur delicious et permettra de récupérer les données pour celui-ci dans le code que nous allons utiliser

e. Mettez le code suivant dans un widget "Html/Javascript" en prenant soin de remplacer votre identifiant par le nombre récupéré à l'étape précédente, http//urldevotreblog.com par l'url principal de votre blog, Nom de votre Blog | Petite description par les données y afférant :

<div class='save-delicious'>
<a href='http://del.icio.us/post?url=http://urldevotreblog.com&title=Nom de votre Blog | Petite description' style='text-transform:none; border:none; text-decoration:underline' target='_blank'>
<img src="http://tinyurl.com/2b5be8" align="absmiddle"/> Sauvegarder ce blog sur Delicious</a> comme les autres<b class='delsquare' id='Votre-identifiant'>0</b> heureux lecteurs
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById("Votre-identifiant").innerHTML = urlinfo.total_posts;
}

</script>
<script src='http://badges.del.icio.us/feeds/json/url/data?url=http://urldevotreblog&callback=displayURL'></script>
</div>

4. Pour avoir un compteur des bookmark de chaque article de votre blog (et proposer aux visiteurs de le sauvegarder), il vous faut :

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

b. Trouvez la ligne de code suivante :

Si vous voulez que le lien apparaîsse après le titre de l'article, mettre le code de l'étape c, juste avant celui-ci. Au cas où vous voulez que le lien apparaisse à la fin de l'article, mettre le code de l'éape c juste après.

c. Voici le code à ajouter :

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title" + data:post.title' target='_blank'> <img src="http://tinyurl.com/2b5be8" align="absmiddle"/>Ajouter à del.icio.us</a>
sauvegardé par <span class='delsquare' expr:id='"a"+data:post.id'>0</span> utilisateurs

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src = '"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>

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

A+

Erreur : Les ID de gadget doivent être uniques

By Rodney // 6 commentaires:

Il vous arrivera de croire que Blogger refuse d'intégrer une astuce dans votre code html en vous donnant un message d'erreur du genre :
'Plusieurs gadgets ont pour ID : Image15. Les ID de gadget doivent être uniques.'

Je puis vous assurer que le problème ne se trouve pas avec l'astuce que vous tentez d'ajouter, mais avec les widgets existant avant.

Je m'explique : Nos blogs utilisent des Widgets (autrement appelé Gadget). Blogger ajoute un numéro à chacun d'eux pour enregistrer les données qui leur sont propre. Grâce à ce numéro, ses programmes peuvent identifier chaque widget et rendre le contenu de chacun de ceux-ci sur le blog.

Ainsi, si vous recevez un message du genre : Plusieurs gadgets ont pour ID : LinkList2. Les ID de gadget doivent être uniques.

Cela veut dire que vous avez plus d'une liste de liens sur votre blog. Or l'identifiant pour un widget liste de liens est LinkList. Quand il y en a plusieurs, Blogger ajoute un numéro à chacun pour qu'il enregistre les donnés propres à chaque widget. Ainsi, on a LinkList1, Linklist2, etc. Si vous reçevez un message d'erreur du genre celui qui est ci-haut, vous copiez l'identifiant (ID) donné, vous faites CTRL+F afin que l'ordi vous trouve les widgets portant l'identifiant en question.

Dès que vous avez trouvé, vous changez juste le chiffre en un qui est supérieur, mettons 12 au lieu de 2 (25 au lieu de 15, 38 au lieu de 28). Vous enregistrez votre modèle et le problème sera reglé.

Nous vous en faites pas si vous mettez un nombre très supérieur à celui indiqué par l'erreur, Blogger se chargera de le ramener à celui le plus proche du widget du même type ayant le plus grand numéro.

J'espère qu'avec ça, ce problème ne vous rendra plus la vie dure.

SEO & REFERENCEMENT