jeudi 29 octobre 2009

Ouvrir tous ses liens dans une nouvelle fenêtre

La volonté de chaque blogueur est de capter l'attention de ses lecteurs le plus longtemps possible et d'éviter qu'ils s'échappent notamment à l'occasion de l'ouverture d'un lien vers un autre site.
Pour ce faire, la commande target="_blank" est très pratique et permet d'ouvrir une nouvelle fenêtre à chaque clic. La lecture faite, votre visiteur n'a pas perdu votre blog et peut donc continuer son parcours.
Nous pouvons généraliser cette option à tout le site. Chaque clic qu'il soit vers un lien, un libellé ou un article s'ouvrira dans une nouvelle fenêtre. Il n'y aura plus de préoccupations de votre part.

Procédure

Pour ce faire, vous allez dans le menu Mise en page puis Modifier le code Html. (NB)

Vous recherchez dans le modèle la balise <head> et vous coller juste après ce code :
<base target='_blank'/>

Dorénavant, tous les liens s'ouvriront dans une nouvelle fenêtre.

A+

NB : A la suite d'une évolution chez Blogger, le menu Mise en page est devenu Présentation.

mercredi 28 octobre 2009

Insérer des liens : Vous aimerez peut être

L'attention de votre lecteur s'est portée vers un article que vous avez publié. Vous souhaitez sûrement le retenir plus longtemps et notamment lui montrer d'autres réalisations.
Un utilitaire peut vous aider dans cette opération : Linkwithin.
Ce petit programme permet d'insérer à la fin de chacun de vos articles une sélection de 3 (à 5) vignettes et titres d'autres articles.
Pour insérer tout cela, c'est très simple.

Procédure

Vous devez vous connecter au site Linkwithin.
Vous saisissez les données mail, adresse du blog, sélectionnez plateforme Blogger et indiquez le nombre de liens que vous voulez intégrer. Puis vous cliquez sur le bouton Get Widget.

Une nouvelle fenêtre s'ouvre.
Vous cliquez sur le bouton Install Widget.

Vous revenez automatiquement dans l'interface Blogger avec l'écran suivant.
Vous sélectionnez le blog sur lequel vous voulez implanter le gadget et vous cliquez sur le bouton Ajouter un gadget.

Vous êtes basculé dans les Eléments de la page du menu Mise en page.
Votre gadget s'est positionné dans une colonne.
Pour une meilleure efficacité, il est recommandé de déplacer ce gadget en dessous du bloc de message.

Ensuite Enregistrer vos modifications.

Et voici le résultat.
A la fin de chaque message, une vignette et un titre de message permettra à votre lecteur d'être renvoyé vers la lecture d'un autre article s'il le désire.

A+

samedi 24 octobre 2009

Résumer un article et lien Plus d'infos

La possibilité de n'afficher qu'une partie d'un article est une option qui manquait aux rédacteurs de longs messages.
Blogger vient d'ajouter cette fonctionnalité que l'on appelle plus communément par le "Lire la suite" (ou le "Plus d'infos" selon l'indication du texte du lien qui renvoie vers la suite (justement) de la lecture du message ainsi tronqué).

Cette option n'est pas sans difficulté à manier. En effet, selon les cas, il n'est pas rare de constater que son usage se traduit par un dérèglement général du blog qui voit la colonne de droite se retrouver tout en bas de la page d'accueil. Cela fait un peu désordre !

On ne le répétera jamais assez : avant de faire des manipulations sur le code du template (ou même sans raison d'ailleurs !) il faut penser à faire tant des sauvegardes du blog qu'une copie du code.

Ces préalables bien posés, nous allons voir maintenant comment procéder.

Procédure

Il faut écrire son article tout d'abord. Si vous avez l'habitude de mettre en forme votre texte (Justifier par exemple), je vous conseille de ne pas le faire de suite.

Une fois donc ce texte brut achevé, vous allez positionner votre curseur à l'endroit où vous comptez insérer le saut de page. Il est préférable de choisir comme emplacement le début d'un nouveau paragraphe.
Le curseur placé au bon endroit, vous allez cliquer maintenant sur l'icône Insérer un saut.
Aussitôt vous verrez une ligne de pointillés qui matérialise le saut de page à l'endroit de votre coupure (et par l'introduction d'un marqueur <-- more --> si vous consultez le code HTML).
Il ne vous reste plus qu'à aller en Mise en page / Eléments de la page puis à cliquer sur le lien Modifier dans le bloc Messages du blog. (NB)
S'ouvre cette fenêtre qui va vous permettre de personnaliser le message indiquant à vos lecteurs que l'article est tronqué dans cette présentation, mais que s'ils veulent lire la suite ils vont devoir cliquer sur un lien.
Par défaut le message proposé est "Plus d'infos >>". Ce n'est pas très explicite à mon goût, c'est pourquoi j'ai préféré le changer par "Pour lire la suite, cliquez ici >>". A vous de voir ce qui vous correspond le mieux.

Voilà, c'est presque terminé. Il ne vous reste plus qu'à Enregistrer vos modifications.

Comme je le disais un peu plus haut, si vous être adepte de la présentation de texte en justifié, c'est maintenant que je vous conseille de le faire. Vous prendrez toutefois la précaution de ne pas inclure la ligne de pointillés dans cette mise en page (arrêtez-vous avant et recommencez après).

Il ne vous reste plus qu'à aller voir le résultat.
Malgré les consignes que je vous ai données, il est malgré tout possible que cela ne marche pas.

Si...

En fonction du type d'erreurs, il y a certains correctifs à apporter (voir cette info publiée par Blogger).
La plus commune se traduit par un renvoi de votre colonne de droite tout en bas du template.
Ne pas paniquer, ce n'est pas grave.
Pour faire simple, on va expliquer que le marqueur de la coupure <-- more --> ne doit pas se trouver entre deux balises <div> et </div>

Si c'est ce que vous constatez en examinant le code HTML, il vous suffira de déplacer le <-- more --> en dehors de ces balises.

Si vous êtes amenés à pratiquer régulièrement le "Lire la suite", vous verrez que vous en maîtriserez très rapidement l'usage.

A+

NB : depuis une récente mise à jour, le lien Mise en page est devenu Présentation.

mardi 20 octobre 2009

Ajouter une image dans l'en-tête du blog

Mise à jour 2012

Rapidement le besoin se fait sentir de trouver une une du blog beaucoup plus personnalisée. Pourquoi ne pas mettre une image de votre choix ?
Comment faire ? C'est très simple.

Procédure

Utiliser le menu Mise en page [1].

Ensuite une fois le squelette affiché, cliquer sur le Modifier [2] de la zone d'en-tête.

Une fenêtre supplémentaire s'ouvre.
Vous sélectionnez l'endroit où est stockée l'image [3] puis vous en indiquez le chemin.
Ensuite, une fois ce choix opéré, vous cliquez sur Enregistrer [4] pour valider les modifications.

Vous revenez dans le menu Mise en page et là vous cliquez sur le bouton Enregistrer [5].
Voilà c'est fait et vous pouvez aller voir le résultat.

A+

lundi 19 octobre 2009

Insérer une vidéo personnelle

Publier des vidéos vous a déjà été présenté. Que ce soit sur Youtube ou Dailymotion.
Ici, ce que nous allons voir, c'est la publication de vos vidéos, lorsqu'elles ne sont pas hébergées sur ces plateformes.
Actuellement, le nouvel éditeur de Blogger ne permet pas de le faire. Il faut donc revenir à l'ancienne version. (NB1)

Procédure

Cliquer sur le menu Paramètres / Général
Puis descendre au niveau de Paramètres globaux.
A ce niveau là, il faut cocher la case Ancien éditeur.
et cliquer sur le bouton Enregistrer les paramètres.

De retour, nous allons écrire notre article par le menu Publication d'un message et Nouveau message.
Cliquer sur l'icône Publier vidéo.
Une nouvelle fenêtre s'affiche par dessus celle-çi qui reste en surbrillance.
Les formats acceptés pour le transfert vidéo sont l'AVI, le MPEG, Real et Windows Media.
Cliquer sur le bouton Parcourir... pour aller chercher la vidéo où vous l'avez stockée.
Saisir ensuite son titre.
Cocher la case pour signifier que vous acceptez les conditions générales d'utilisation.
Et cliquer sur le bouton Transférer une vidéo.

Le code de la vidéo vient se positionner dans le corps du message.
Il ne vous reste qu'à mettre du texte éventuellement.
Et à Publier le message.

NB1 :
Il existe une autre façon de publier des vidéos personnelles. Cela se fait naturellement en ayant choisi d'éditer son blog avec Blogger in Draft.
On revient, de cette façon, vers un éditeur plus intuitif et complet.

NB2 : Cette dernière présentation est maintenant celle à disposition, de série, pour le téléchargement des vidéos personnelles.

Dernière mise à jour : Le service de publication des vidéos de Blogger (Google Vidéo) est arrêté depuis le 29 avril 2011.
Les vidéos personnelles doivent donc être hébergées sur Youtube ou Dailymotion et le code obtenu peut ensuite être publié dans le corps de message du blog.

NB sur la MAJ : Contrairement aux annonces précédentes faites par Google sur la fermeture de son service d'hébergement de vidéos, celui-çi marche encore... 

A+

jeudi 15 octobre 2009

Utiliser un annuaire des blogs de Blogger

Une manière de visiter les sites qui ont les mêmes centres d'intérêts que les siens est tout d'abord de renseigner toutes les différentes rubriques de son profil (Tableau de bord / Modifier le profil).

Ensuite, aller dans Afficher le profil. Des liens se sont créés sur chacun des mots que l'on a renseigné. Il suffit de cliquer dessus et on est dirigé vers les blogs qui ont mis les mêmes mots clés.

A chacun d'être perspicace pour bien cibler ce que l'on recherche et ce que l'on veut afficher.

Blogger possède également son propre moteur de recherche de Blogs (version Bêta) :


A+

mercredi 14 octobre 2009

Modifier les liens de navigation en bas de page par Pages précédentes et Pages suivantes

Votre blog avance. Petit à petit vous faites des modifications.
Maintenant vous voulez changer les liens de bas de page pour la navigation. Dehors : "Messages plus récents" et "Messages plus anciens", vous voudriez quelquechose à la place qui soit du genre "Pages précédentes" et "Pages suivantes".

Procédure

Il vous faut aller dans le menu Mise en page puis Modifier le code HTML.
Ensuite descendre au niveau de Modifier le modèle et cocher la case Développer des modèles de gadgets.


Cherchez dans votre modèle le code suivant :
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
et le remplacer par :
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Pages précédentes...'>Pages précédentes...</a>
</span>
puis cherchez celui-çi :
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
et le remplacer par :
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Pages suivantes...'>Pages suivantes...</a>
</span>
Vous pouvez bien entendu modifier le texte proposé (Pages) par celui qui vous convient le mieux.

A+

mardi 13 octobre 2009

Publier des images cote à cote

Lorsque l'on a plusieurs photos à présenter dans un article, souvent on a envie de varier la mise en page. Pourquoi ne pas publier des images côte à côte ?
Pour ce faire, il suffit de copier le code suivant (pour 2 colonnes et 3 lignes).

<table><tbody>
<tr><td>photo 1-1
</td><td>photo 1-2
</td></tr>
<tr><td>photo 2-1
</td><td>photo 2-2
</td></tr>
<tr><td>photo 3-1
</td><td>photo 3-2
</td></tr>
</tbody></table>

Ensuite, il ne restera plus qu'à intégrer les images dans les cellules des tableaux (à la place des photo 1-2, photo 2-2 etc selon l'endroit où on veut les positionner).
Par rapport à l'exemple proposé, si vous avez besoin de moins de lignes (ou de plus), supprimez des lignes ou rajoutez en autant que nécessaire.

A+

lundi 12 octobre 2009

Publier un nuage de libellés personnalisé

Le nuage de libellés (ou tag cloud) est une présentation qui a souvent retenu l'attention des bloggeurs. Elle permet de rompre le côté passe-partout d'une liste.
La mise en valeur des libellés les plus utilisés est très intéressante et il est même possible de jouer sur un dégradé de couleurs qui peut se marier avec harmonie à la palette graphique de son blog.
Dernièrement, Blogger a intégré un nouveau module permettant de créer un nuage de libellés. Je vous ai déjà présenté cette fonctionnalité. Nous n'y reviendrons pas.
Cette modalité est pratique pour quelqu'un qui est pressé, mais cela ne remplace pas les astuces précédentes qui remplissent des usages beaucoup plus complets et sont plus personnalisables.
C'est pourquoi, je continue à utiliser les anciens scripts sur mes blogs, et c'est cette méthode que je vais vous présenter ici.
Simplement, je dois vous signaler qu'elle est beaucoup plus longue, et qu'il faut être rigoureux et attentif pour la mettre en place. Mais j'y suis arrivé, alors pourquoi pas vous ?

Préalables

Il faut d'abord s'assurer qu'un gadget Libellés a déjà été activé sur le blog. Allez le contrôler en visualisation du blog.
Si ce n'est le cas, il faut l'insérer. Voir le mode opératoire ici.
Autre point très important, lorsque l'on fait une intervention sur le code de son blog, il est très conseillé de faire une sauvegarde préalable. Voir le mode opératoire ici.

Procédure

Aller dans Mise en page puis Modifier le code HTML.
Au niveau de Modifier le modèle, cocher la case Développer des modèles de gadgets.
Etape 1 :

Parcourir votre code et coller entre les balises <head> et </head> le code suivant :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}#labelCloud .label-cloud li:before{content:"" !important}

Etape 2 :

Parcourer toujours votre code et coller entre les balises ]]></b:skin> et </head> le code suivant :

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Etape 3 :

Enfin entre les balises <body> et </body> vous devez trouvez un code commençant par :
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
et finissant à :
</b:widget>

Remplacez la totalité par l'ensemble du code suivant :

<b:widget id='Label1' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values="data:labels" var="label">
var theName = "<data:label.name/>";;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Voilà, vous avez (presque) terminé.
Si vous préférez contrôler le résultat de votre code, cliquez sur le bouton Aperçu ; si vous êtes confiant dans le résultat cliquez sur Enregistrer le modèle.
Allez visualiser le résultat en page d'accueil du blog.
Votre nuage est standard, je suis sûr que vous allez vous dire : c'est sympa mais j'aurais bien aimé mettre mes propres couleurs, ou tailles, par exemple.

Personnaliser son nuage

Retourner dans votre code et notamment à l'endroit où vous avez intégré les éléments de l'étape 2.
Les éléments suivants peuvent être adaptés :

var cloudMin = 1;
1 = tous les libellés ; 10 = 10 libellés

var maxFontSize = 20;
taille de la police la plus grande

var maxColor = [0,0,255];
couleur de la police la plus grande

var minFontSize = 10;
 taille de la police la plus petite

var minColor = [0,0,0];
couleur de la police la plus petite

var lcShowCount = false;
si true, le nombre de messages par libellés sera indiqué

Voilà !
Je vous l'avais dit : c'est long.

A+

vendredi 9 octobre 2009

Sauvegarder le modèle de son blog

Mise à jour 2011

Blogger fournit un modèle (template) pour le blog que vous avez choisi. Mais ce cadre est adaptable selon les goûts de chacun. Des scripts sont proposés un peu partout afin d'améliorer le canevas initial.
Avant de se lancer dans la modification du code, il est impératif de sauvegarder le modèle que vous utilisiez. En effet, vous êtes sûr, au moins, que celui-çi marchait alors que rien n'est garanti du premier coup lorsque l'on fait des adaptations.

Procédure

Les menus à activer sont les suivants : Modèle puis Sauvegarde/Restauration.

Ensuite au niveau de la fenêtre qui vient en surimpression : Sauvegarde/Restauration, il faut cliquer sur le lien Télécharger le modèle complet.

Une fenêtre supplémentaire s'ouvre. Il vous faut cliquer sur le bouton Enregistrer.

Puis, spécifiez sur quel support vous destinez la sauvegarde.
Voilà, vous avez votre copie de secours. Vous êtes à l'abri d'une mauvaise manipulation.

PS : ne pas confondre la sauvegarde du modèle, qui ne concerne que le squelette de votre blog, de la sauvegarde du blog, qui, elle, concerne l'ensemble du corps du blog (squelette et intégralité des articles).

A+

LinkWithin

Related Posts with Thumbnails