Modifier, remplir un widget hors ligne

Il m'est déjà arrivé de vouloir modifier le contenu d'un widget mais de ne pas parvenir à le faire parce qu'en cliquant sur le bouton enregistrer, je ne recevais aucune réponse, aucune réaction. Je crois que je ne suis pas le seul à avoir eu un tel problème. C'est pourquoi je propose ici une solution pour palier à ce désagrément.  L'astuce, c'est de remplir le widget plus manuellement en mode html. La même technique peut être utilisée pour modifier (ou ajouter) un widget hors ligne sur une page précédemment ajoutée, ou encore ajouter un nouveau widget sans aller sur la page "Mise en page", mais en allant sur la page "Modifier le code html". Malheureusement, cette astuce ne concerne que quelques types de widgets, dont le widget html, liste des liens, le widget texte et le widget flux.

Voici le code nécessaire pour la modification et l'emplacement où insérer les nouvelles donnes du widget.

1. WIDGET HTML

<b:widget id='HTML22' locked='false' title='TITRE DU WIDGET' type='HTML'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    CONTENU DU WIDGET

  </div>

  <b:include name='quickedit'/>

</b:includable>

</b:widget>

2. WIDGET LISTE DES LIENS

<b:widget id='LinkList32' locked='false' title='LISTE DES LIENS' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

 <div class='widget-content'>

   <ul>

    <b:loop values='data:links' var='link'>

       <li><a href=''>Nom du lien 1</a></li>

         <li><a href=''>Nom du lien 2</a></li>

         <li><a href=''>Nom du lien 3</a></li>

    </b:loop>

   </ul>

   <b:include name='quickedit'/>

 </div>

</b:includable>

</b:widget>

3. WIDGET TEXTE

<b:widget id='Text22' locked='false' title='TITRE DU WIDGET' type='Text'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    CONTENU DU WIDGET

  </div>

  <b:include name='quickedit'/>

</b:includable>

</b:widget>

4. WIDGET FLUX

<b:widget id='Feed11' locked='false' title='Recent Posts' type='Feed'>

<b:includable id='main'>

    <h2><data:title/></h2>

    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>

      <span style='filter: alpha(25); opacity: 0.25;'>

        <a href='URL DU FLUX'><data:loadingMsg/></a>

      </span>

    </div>

    <b:include name='quickedit'/>

  </b:includable>

</b:widget>

Lire la suite

Ecrire pour ce blog

Voici une occasion en or pour faire connaître votre blog aux nombreux abonnés de Blogger au bout du doigt, ses milliers de followers sur Twitter ainsi qu’à ses centaines des visiteurs journaliers.

En visitant les blogs de mes lecteurs, je suis parfois tombé sur des modifications intéressantes opérées sur leurs modèles et dont je ne connaissais pas la recette. Comme cela me prendrai les temps que je dois consacrer à ma petite vie, ma famille, mes études, ma chérie, de vouloir étudier toutes ces astuces, je vous propose à vous joyeux utilisateurs de Blogger et lecteurs de Blogger au bout du doigt, d’aider la communauté à avancer en postant sur ce blog des articles relatifs à :

- des astuces pour améliorer l’habillage, l’affichage, la visibilité d’un blog hébergé sur Blogger,

- des widgets qui peuvent améliorer l’expérience des visiteurs sur nos blogs,

- des conseils pour rendre son blog plus intéressant et plus populaire,

- des nouveautés sur l’amélioration de la plateforme Blogger,

- bref tout ce qui peut être intéressant pour améliorer tant le contenu du blog que son positionnement sur la blogosphère et sur le web.

Voici ce qu’il vous faut faire pour écrire pour ce blog :

- Rédigez votre article dans l’éditeur de message de Blogger, insérez-y les images grâce aux outils Blogger, les liens et surtout justifiez vos textes (sauf peut-être les codes html) ;

- Cliquez sur le bouton Modifier le html (juste à coté d’Editer, au dessus de la case où vous écrivez vos messages) et copiez tout le contenu html qui s’y trouvera ;

- Envoyez votre article en format html tel que copié dans l’éditeur de message à l’adresse suivante : rodney_sankinka.publications@blogger.com

Ne commettez pas l’erreur que j’ai souvent commise, vérifier l’orthographe et la grammaire de votre texte.

Pour afficher des codes dans vos messages, remplacez les chevrons par le signe & directement suivi de lt; (pour le chevron d’ouverture) et & directement suivi de gt; pour le chevron de fermeture (voir image). Pour ne pas faire cela manuellement, allez sur Word, sur Edition, Remplacer, mettez les signes à remplacer et les signes remplaçants puis cliquez sur « remplacer tout ».

Pour faire une capture d’écran, cliquez sur le bouton « Imp ecra Syst » de votre clavier lorsque la page dont vous voulez copier le contenu est affichée, puis ouvrez Paint ou un autre éditeur des photos afin de sélectionner la partie de l’image à afficher.

Votre article devra commencer par la phrase suivante (remplacez les mots entre parenthèses et en gras) :

Ceci est un article de votre nom ou pseudonyme, du blog (nom de votre blog avec lien vers celui-ci), suivi de sa description en une phrase courte. Le point de vue exprimé ici peut ne pas être celui du propriétaire de ce blog.

Votre article devra se terminer par la phrase suivante :

Vous pouvez retrouver votre nom ou pseudonyme sur son blog (nom de votre blog avec lien vers celui-ci) où il se fera un plaisir de vous répondre à vos questions et vous faire découvrir son univers pas comme les autres. Pour s’abonner à son blog, cliquez sur le lien suivant (mettre le lien vers le flux de votre blog, si vous n’avez pas un compte Feedburner, utilisez le lien suivant : http://nomdevotreblog.blospot.com/)

Notez bien :

- Votre article ne devra pas être une copie conforme d’un autre article sur le net ou même de votre blog.

- Vous devez citer vos sources (avec un lien vers ceux-ci) au cas où l’astuce n’est pas le fruit de la génération spontanée.

Tous les articles proposés et publiés deviennent la propriété de Blogger au bout du doigt, mais leurs auteurs dégagent le responsable de ce blog de toutes responsabilités pénales par rapport aux contenus de leurs articles.

Et pour finir, sachez que je me réserve le droit de ne pas publier certains articles, notamment :

- S’ils sont une répétition d’un article déjà publié ici (je vous conseille de jeter un coup d’œil à la table des matières afin de proposer un article)

- Si le blog de leur auteur contient de propos haineux, racistes, à caractère outrageusement sexuel, etc. (là, on peut négocier s’il y a moyen de renvoyer à un autre blog du même auteur) ;

- Si mon petit doigt me conseil avec insistance de ne pas publier l’article (là je vous demanderais très gentiment de m’excuser).

Sachez aussi que cela peut prendre quelques jours avant de voir votre article sur le blog. Pendant ce temps, surtout ne déprimez pas.

Lire la suite

Fracture numérique oblige

Au fil des jours, le nombre des commentaires non répondus et non publiés s’élèvent sur Blogger au bout du doigt et cet article est pour faire comprendre à ceux qui ont personnellement été déçu par cet état des choses que j’ai été plus déçu qu’eux et désirerais fortement que cette situation change (espérons que le ciel m’écoute).

Pour commencer, il faut savoir que le premier handicap que j’ai connu pour la non publication des commentaires fut causé par les navigateurs que j’installé sur mon laptop depuis le mois de février passé. Très souvent, que ce soit sur Firefox, Internet explorer 7 ou Opera, même quand j’écrivais une réponse à un commentaire et le publié, j’avais bel et bien une nouvelle page qui s’affichait mais le commentaire lui n’était jamais publié. J’ai résolu le problème il y a un mois et demi et ai pu installer Google Chrome par la même occasion, ce qui me permettra si j’en ai les possibilités de pouvoir diminuer le rythme d’accumulation des commentaires non publiés et non répondu sur le blog.

La deuxième raison qui est la base de cette accumulation, c’est le fait que je modère les commentaires, sinon, vous ne pourrez pas imaginer le nombre des commentaires spams qui seraient affichés à la fin de chaque article. Les commentaires qui contiennent des liens inutiles, sans rapport avec l’article ou le commentaire lui-même ne sont jamais publiés. Et puis, quand je vois un commentaire qui mérite une réponse sérieuse, parfois je ne le publie pas directement (vu que je travaille souvent en courant derrière le chrono du cyber café) dans l’espoir de pouvoir y répondre dans des conditions plus favorable.

La troisième et dernière raison, qui n’est pas la moindre, est  le manque d’une connexion internet permanente depuis plus de 6 mois. Ceci a eu aussi pour conséquence la diminution de mon rythme de publication (de 20 articles le mois à moins de 5). Je vais vous expliquer pourquoi ça risque de ne pas trop évoluer dans les jours qui viennent. Ça sera un peu long, mais me permettra de ne plus avoir mes cheveux grillés par des foudres de colères en provenance des lecteurs dont les commentaires n’ont pas trouvé solution ou réponse utile (même inutile).

Les années passées, 2006 jusqu’à début 2009, j’arrivais à me procurer tant bien que mal une connexion semi-privé sur le site de l’Université de Kinshasa, où j’étudie et où était installé la petite bureautique familiale où je passais le clair de mon temps quand je n’étais pas au cours. Le provider de l’Université de Kinshasa (back bone) doit être celui qui offre la connexion la moins cher du Congo, 30 $ le mois seulement. Il avait connu une restructuration et donc était H.S. quelques mois et les mois qui suivirent toutes les bureautiques a été fermées sur décision du doyen de la faculté d’Economie. Je retrouverai donc sans possibilité de bénéficier des services pourtant abordable du back bone. Je me décide donc de me casser la tête pour avoir une connexion à domicile.

Mon envie d’avoir une connexion a domicile s’est butée à plusieurs difficultés. D’abord, étant un étudiant sans emploi, j’aurais bien voulu ne dépenser que du fric gagné sur le net pour les factures mensuelles de connexion. Le rythme d’acquisition des marchés pour modification des modèles ne me permet pas de pouvoir épargner les quelques euros gagnés. Mes paiements Google étant bloqués jusqu’à x temps, je ne pouvais compter que sur ceux d’ebuzzing, même si leur délais  de 45 jours  après totalisation des 100 euros sur son compte n’est pas ce qu’il y a de plaisant. Pour ajouter une source d’approvisionnement de plus, j’avais installé le bouton « faire un don », ce qui m’avait permis de récolter xx $ en ligne et un don via western union.

Il y a un mois, ayant empoché ces dons ainsi que mes quelques euros de chez ebuzzing, je suis allé en quête d’un abonnement pour avoir une connexion à domicile chez les compagnies de téléphonie mobile installées à Kinshasa. Le premier provider chez qui je me rends, Vodacom Congo, exige pour cela l’achat d’une antenne à 700 $ et chaque mois le paiement anticipatif d’un montant environnant le nombre de gigabits que vous allez utiliser (900 $ pour 10 giga le mois). Le deuxième provider, Standar Telecom, vend un modem à 300 $ et selon les renseignements d’un monsieur qui l’utilise, il paie un forfait de 145 $ dollars le mois. Le troisième provider, Zain Congo vend son modem à 185 $ et je n’ai pas pu obtenir la tarification mensuelle. L’un de dernier qui s’est lancé sur le marché de l’Internet est Tigo, son modem n’est pas cher, 70 $, mais à lire les banderoles qui sont affichées ici et là, ils offrent exceptionnellement 500 mégabits à 50 $ (à ce prix là, vous dépensez 1000 $ pour 10 gigabits). Un utilisateur d’Ares, d’Emule, de download manager, fan de rapidshare, megaupload et autres,  se ruinerait avec des tels tarifs. Récemment, ma Valentine est tombée sur un autre provider, Cielux. Les frais d’installation et de mise en route pour le premier mois s’élèvent à moins de 277 $ et la facture par mois est d’environ 145 $.

Face à cette réalité, je me suis dit que dans le tiers monde, la connexion c’est pour les nantis. Voilà pourquoi les bloggeurs du tiers monde sont les clients fidèles des cybers café (chez moi c’est environ 1 $ l’heure) et que  le nantis en devenir que je suis a dû vous choquer en ne publiant pas ou en ne répondant pas à votre commentaire. Mille excuses pour cela.

@+

Lire la suite

Héberger vos fichiers JavaScripts sur Blogger

Depuis la fermeture de Googlepage creator aux nouvelles inscriptions, nombreux sont les bloggeurs qui ont des difficultés pour héberger les scripts qu’ils ramassent ça et là sur le net. Les lieux d’hébergement des scripts originaux ayant des limitations de bande passante et à cause du fait que ces scripts sont utilisés par des milliers des personnes, le résultat attendu de l’utilisation du script fait parfois défaut.

Kranthi a trouvé le moyen d’héberger gratuitement ses scripts sur Blogger et bénéficier ainsi d’une bande passante infinie.

L’astuce c’est de mettre le contenu du fichier javascript (js) entre les balises suivantes et de placer le tout juste avant la balise <title><data:blog.pageTitle></title> de votre blog (voir en image).

<script type='text/javascript'>

//<![CDATA[

Mettre le code javascript ici

//]]>

</script>

Cette opération peut être répétée autant de fois que possible avec différents scripts.

Pour récupérer le contenu d’un script, il vous suffit de télécharger les fichiers ayant l’extension .js et contenu dans des liens du modèle de votre blog, plus précisément dans les balises script.

Exemple : <script src="http://hebergeur.com/fichier/autoreadmore.js" type="text/javascript"></script>

Le téléchargement se fait en mettant le lien du fichier js sur la barre d’adresse et en cliquant sur « enter ». Il vous sera proposé d’enregistre le fichier .js dans votre ordi.

Après téléchargement, ouvrez le fichier téléchargé avec wordpad (pas notepad) et copier le contenu que vous mettrez dans l’emplacement indiqué ci-haut puis enregistrez votre modèle.

Notez qu’après avoir fini l’opération, il vous faut effacer toute la ligne de code script dans laquelle était contenue le lien avec emplacement du fichier .js (voir Exemple).

Ainsi, le bon affichage de votre modèle dépendra de moins en moins des sites tiers.

@+

Lire la suite

Comprendre le css de votre blog 1

La possibilité offerte par Blogger de manipuler les css des modèles fournit par la plateforme et les tiers met ses utilisateurs devant un dilemme car la majorité d’entre eux n'y connaissent rien en html, css, javascript et autres bizarreries informatiques qui font trembler d’effroi rien qu’à l’idée d’avoir à s’y mêler. L’auteur de cet article peut vous garantir que lui aussi n’y connait rien en ces choses, au sens formel du terme, car n’ayant suivi aucune formation et n’étant détenteur d’aucun diplôme dans les connaissances nécessaires au développement d’un site Internet ou d’un blog. Mais, la manipulation des modèles et des codes des widgets proposés ici et là lui ont permis de comprendre un tant soi peu à ne pas être complètement perdu dans la jungle des codes html et css (il lui reste le javascript).

J’aimerais donc ici aider mes congénères bloggeurs qui aimeraient comprendre ce trop plein d’écrits bizarres pourtant essentiels à la bonne présentation de leurs blogs. Nous avions déjà vu comment était structuré un modèle Blogger dans la série comprendre un modèle blogger.

Seulement, toutes les notions que nous avons apprises ne serviraient à rien sans la présence des codes css car, c’est dans ceux-ci que se trouvent les attributs nécessaires pour le positionnement, les couleurs de fond de chaque partie du blog ainsi ceux des liens et des textes, la taille des polices, la taille des bordures, etc. Il est donc essentiel d’être en mesure de comprendre ce qui est écrit dans le css de votre blog afin de ne pas avoir à maudire votre ordinateur, le créateur des modèles, de blogger et peut être aussi l’auteur de blogger au bout du doigt quand vous vous retrouvez bloquer devant un gros problème sur votre blog.

Pour commencer, il faut savoir que CSS est l’abréviation de cascade style sheet, appelé en français « feuille de style » et est le nom utilisé pour nommer la partie contenant les attributs pour le style (la mise en forme) de votre site ou blog.

Le css d’un modèle Blogger peut être divisé en trois parties :

1. Les informations générales sur les balises html : Polices et tailles des textes contenus dans la page, couleurs des liens, taille des titres (h1, h2, h3, h4, etc.)
2. La structure de la page (Page structure) : contenant les informations sur la largeur que doit occuper les éléments de la page, la largeur, la hauteur et la couleur de l’entête, de barres latérales (sidebars), du contenu ainsi que du pied de page, la taille de la police de textes contenus dans chacune des parties précitées et les autres informations nécessaires à une bonne présentation de ceux-ci, notamment l’espace qui les sépare.
3. Les classes communes (Custom classes) : contient les propriétés des éléments qui peuvent se retrouver dans plus d’une partie de votre blog.

Mais, il faut noter que dans la majorité des sections contenues dans chacune des parties sont morcelés et précédé chacune par une balise de commentaire indiquant de quelle partie il s’agit. Ces commentaires sont du genre :

/* Profile

------------------------------------------------ */

Contenu css

/* Comments

------------------------------------------------ */

Contenu css

Voici en 35 lignes un exemple simplifié de que vous trouverez pour un modèle 3 colonnes, avec un entête et une barre de menu.

/* ------------------------------

HTML Redefine Tags

------------------------------ */

body{font-family:Arial, Helvetica, sans-serif; fontsize:

12px; margin:20px; padding:0;}

input, form, textarea

h1, h2, h3, h4, h5, h6{margin:0; padding:0;}

h1{font-size:40px;}

h2{font-size:20px; color:#999999;}

h3{font-size:13px; border-bottom:solid 1px #DEDEDE;

padding:4px 0; margin-bottom:10px;}

a:link, a:visited{text-decoration: none; color:#0033CC;}

a:hover{text-decoration:none;}

/* ------------------------------

STRUCTURE DE LA PAGE

------------------------------ */

/* #wrapper has an absolute width (780 pixel) */

#wrapper{width:780px; margin:0 auto;}

#header{width:780px; margin:0 auto;}

#menubar{width:auto; display:block; height:28px;}

#menubar a{heigth:28px; line-height:28px; padding:0

8px; display:inline;}

#main{width:auto; display:block; padding:10px 0; border-color: #CBCBCB; }

#content{width:460px; margin-right:20px;

float:left; border-color: #CBCBCB; background-color: #ECEBEB;}

#sidebar_left{width:160px; margin-right:20px;

float:left; border-color: #CBCBCB;}

#sidebar_right{width:120px; float:left;border-color: #CBCBCB;}

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0;

font-size:11px; background-color: #456069; color: #FFFFFF;}

/* ------------------------------

CUSTOM CLASSES

------------------------------ */

/* Add here your custom classes ... */

Vous remarquerez qu’après le nom d’une partie, une parenthèse est ouverte et c’est dans celle-ci que se trouvent les attributs particuliers à la partie nommée. La petite légende suivante vous permettra de comprendre plus ou moins ce qui est écrit ci-haut :

1. Première partie

body : c’est le corps de votre page, l’ensemble de la page qui s’affiche sur le navigateur.

h1, h2, h3, h4 : Les différents niveaux des titres qui seront contenus dans votre blog.

Sur blogger, le titre du Blog est contenu dans la balise h1, les titres des articles et des widgets de la sidebar sont contenus dans des balises h2, et les autres titres dans les balises h3 et suivantes. Vous constaterez qu’il attribué une taille (font-size) différente à chacune des balises.

a:link, a:visited, a:hover : Contiennent les informations sur les caractéristiques de liens qui se trouveront sur la page, que ce soient le lien visité (a :visited) ou les liens au-dessus desquelles se trouve le curseur (a :hover).

2. Deuxième partie

Wrapper : Elle peut aussi être nommée « wrap », « page », « container » et c’est la partie qu’occupera tout le contenu de votre blog sur la page. Ainsi, si votre wrapper est 780pixels, tandis que la page s’affiche sur un écran de 1000 pixels, comprenez qu’il y aura des espaces vides à gauche comme à droite du contenu de votre blog.

header : c’est l’entête de votre blog. C’est là que se trouve le titre de votre blog ainsi que sa bannière. Leurs propriétés sont définies dans cette balise.

menubar : Cette existe seulement dans certains modèles. Elle contient les attributs de la barre de menu horizontale au cas où elle existe. Elle peut aussi être nommée « navigation », « nav », « nav-wrapper ».

main : contient la partie composé du bloc des messages et des barres latérales. Dans les modèles proposés par Blogger, cette partie est celle contenant les messages du blog. Elle est aussi nommée main-wrapper.

Content : C’est le bloc de message. Il ainsi nommé dans la majorité des modèles proposés par des tiers, mais dans les modèles proposés par blogger, il est une sous section de la balise « main » et est nommé « .post ».

Sidebar : C’est ainsi qu’est nommé la barre latérale d’un blog, celle dans laquelle on met les widgets et autres codes html proposés par des sites tiers. Dans un modèle contenant deux sidebars, l’une est nommée sidebar_right – barre latérale droite – et sidebar_left – barre latérame gauche -, mais la nomination peut varier d’un concepteur à un autre. On peut facilement les identifier.

footer : C’est le pied de page de votre blog.

Il y aussi les balises #comments pour les commentaires, ainsi que d’autres balises que vos recherches pourront découvrir.

Il faut noter que d’habitude, ces éléments sont disposés d’une manière « géographique », c'est-à-dire que le premier élément affiché sur la page est celui pour lequel on note en premier les propriétés css, suivi du second, du troisième et ainsi de suite.

3. Troisième partie

Elle contient des sous éléments, le genre lien contenu dans les widgets,

A la différence des éléments dont la nomination commence par un « # », la nomination des sous éléments commence par un « . »

Exemple éléments :

#comments

#sidebar

Exemple sous éléments :

.feed-links

.widget

Prochainement, nous verrons comment lire aisément les propriétés attribués à chaque élément, ce qui permettra non seulement de les comprendre mais aussi de pouvoir les modifier à souhait, ainsi vous n’allez pas mouru quand vos lirez ces foutu css (mouru n’est pas une faute, juste écrit en souvenir de shreck où on dit à l’âne « t’es pas mouru l’âne, t’es pas mouru).

Lire la suite

Nouveau design pour Blogger au bout du doigt

Juste pour annoncer à ceux qui sont passé sur le blog depuis mathusalem que celui-ci vient de se doter d'une nouvelle robe.

Un peu de fraîcheur au modèle de ce blog était nécessaire. J'ai opté pour un 5 colonnes à l'accueil et 4 colonnes dans les pages normales (articles, libellés, archives). Ce modèle est une fusion des modèles Trunout et Schemermag dont je vous avait parlé il y a quelques mois sur ce blog.

J'en ai profit pour mettre à jour ma photo de profil et certains autres petits détails que vous remarquerez pour ceux qui sont attentifs.

J'espère qu'il vous plaira, bien qu'il reste encore quelques petits ajustements à faire.

Lire la suite

Widget articles similaires avec images 2

Après la publication de l’article montrant la possibilité d’ajouter un widget d’articles similaires avec image grâce à Linkwithin, certains m’ont affirmé que le widget ne marchait pas quand on affiche des résumés d’articles à la page d’accueil.

Pour pallier à cette situation, je vous propose ici un autre widget ayant la même fonction et conçu par Blogger plugin. Prêt pour amener votre blog vers des nouvelles dimensions ? Allons-y.

1. Connectez-vous à votre compte Blogger, allez sur “Mise en page” puis sur « modifier le code html ».

2. Là, juste avant la balise </head>, mettre :

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

3. Trouvez la ligne de code suivante :

<div class='post-footer-line post-footer-line-1'>

Si vous ne la trouvez pas, essayez celle-ci :

<p class='post-footer-line post-footer-line-1'>

Immédiatement après l’une de deux lignes de code ci-haut, placez le code suivant :

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Peut être que Vous aimerez aussi :";

removeRelatedDuplicates_thumbs(); 

printRelatedLabels_thumbs();

</script>

<a href='http://blogger-au-bout-du-doigt.blogspot.com/2009/09/widget-articles-similaires-avec-images.html'>Obtenir ce widget</a>

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

</b:if>

<!-- Related Posts with Thumbnails Code End-->

4. Pour augmenter ou diminuer le nombre d’articles similaires à afficher, changez le chiffre 5 de la ligne suivante :

var maxresults=5;

5. Pour changer le titre du widget (Peut être que Vous aimerez aussi :), voyez la ligne suivante :

var relatedpoststitle=" Peut être que Vous aimerez aussi :";

Enregistrez votre modèle, la suite au prochain numéro.

@+

Lire la suite

Empêcher le vol du contenu de votre blog par copie de celui-ci

La marraine de ce blog, Mariebo, avait eu des difficultés avec l’un de ses blogs dont au moins 5 articles avaient étaient intégralement copiés et publiés sur un autre blog sans mention de la source. Devant ce problème et une recherche intensive de sa part, elle a pu dénicher un bon code qui empêche les lecteurs et visiteurs d’un blog de copier son contenu et elle explique en détail ses déboires dans cet article.

Quoi qu'il en soit, pour vous sachez que le script est à mettre avant la balise </head> de votre blog, allant sur la
page « Modifier le code html » après être allé sur Mise en page. Régalez-vous et à
bientôt.

<!-- Disable Copy and Paste-->

<script language='JavaScript1.2'>

function disableselect(e){

return false

}

function reEnable(){

return true

}

document.onselectstart=new Function ("return false")

if (window.sidebar){

document.onmousedown=disableselect

document.onclick=reEnable

}

</script>

<script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script>

Lire la suite

Articles similaires avec images illustratives grâce à Linkwithin

Sur insistance de Soufiane, Michèle et MisterAir, je suis dans l'obligation de vous parler de Linkwithin, ce service qu'ils ont aimé parce qu'il propose un service très intéressant qui permettra à ceux qui l'utilisent d'accroître le nombre des pages vues par visiteurs sur leurs blogs.

Nous avions déjà vu qu'il y un widget pour les articles similaires sur Blogger. Seulement, Linkwithin offre un widget permettant d'afficher 3 à 5 articles similaires à la fin de vos articles avec une petite image illustrative de chacun d'eux, histoire de mieux attirer les lecteurs sur ces derniers.

Pour l'installer sur votre blog, il vous suffit de vous rendre sur cette page et de remplir le formulaire y présent selon ce qui est affiché en image et cliquez sur Get widget. Notez tout de même que si votre blog a un fond noir et des écrits clairs (blanc, jaune), il vous faudra aussi cocher sur la case pour "My blog has light text on a dark background".

Vous serez conduit sur une nouvelle page, où il vous faut cliquer sur "Install widget" (juste le petit bouton figurant sur la première ligne). Sur la page où vous serez conduit, vérifier bien que le blog sélectionné est celui pour lequel vous voulez installer le widget puis cliquer sur "Ajouter un gadget". votre widget sera automatiquement ajouté.

Pour déplacer le widget afin qu'il apparaisse au bas de vos articles, vous avez deux options:

1. Soit vous glissez le widget "Linkwithin" comme proposé sur le site

2. Soit vous vous rendez dans le modèle html de votre blog est trouvez le widget "LinKwithin" qui ressemblera à quelque chose comme ceci :

<b:widget id='HTML15' locked='false' title='LinkWithin' type='HTML'/>

Coupez cette ligne de code et placez-la juste après celle-ci :

<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>

ce qui donnera :

<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>

<b:widget id='HTML15' locked='false' title='LinkWithin' type='HTML'/>

Enregistrez votre modèle et allez admirer le résultat.

@+

Lire la suite