A LA UNE !

Divers

Creative Commons License
Cette création est mise à disposition sous un contrat Creative Commons.
counter Wikio - Top des blogs - High-tech

mardi, janvier 29, 2013

Gadget articles au hasard avec vignettes


Quand on a un blog avec une centaine d’articles ou plus, il est clair que nombreux sont ceux qui ont tendance à passer sous les radars des visiteurs venus explorer votre blog. Grâce au code de Duy Pham que je vais vous proposer ici, vous aurez la possibilité d’afficher sur votre blog une liste d’articles au hasard, histoire de faire remonter à la surface la partie cachée de l’iceberg.

Gadget articles au hasard avec images miniatures pour Blogger - blogspot
Voici ce qu’il faut faire pour avoir sur votre blog le gadget qui affiche des articles de façon aléatoire :

1. Se connecter à Blogger. Aller sur “Modèle”, puis sur “Modifier le code HTML”

2. Trouver la balise ]]></b:skin> et ajouter la ligne suivante juste avant :

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Enregistrer le modèle.

3. Aller sur “Mise en page” et ajouter un gadget HTML/Javascript et y insérer ce code

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Commentaires';
var rdp_disable='Commentaires fermés';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>

</ul>


Dans le code ci-haut, le 5 fait référence au nombre d’articles à afficher et le 150 au nomnbre des caractères du résumé. Vous pouvez changer ces valeurs. Laisser le "yes" si vous voulez afficher la date de publication de l'article et le nombre des commentaires. Au cas contraire, mettez "no" à la place du "yes".

Bon, maintenant vous savez quoi faire si vous voulez afficher de façon aléatoire une liste d'articles sur votre blog hébergé par Blogger.

Optimiser le chargement des pages avec images sur Blogger

Vous avez un blog avec beaucoup d'images ? Le chargement des pages est lent et vous cherchez comment remédier à ce problème ? Voici pour vous un moyen d’optimiser le chargement des images de votre blog afin de le rendre plus rapide et plus léger.

Optimiser le chargement des pages avec images et photos sur blogger
Source de l'image : Blog Thiêk kê

Le script de  +Hồng Hòa Vi  que je vais vous proposer ici fera que les images de votre blog ne seront plus chargées au même moment, mais au fur et à mesure que le lecteur ira vers le bas de la page.

Voici comment procéder pour optimiser le chargement des photos sur votre blog : 

1. Se connecter à Blogger. Aller sur “Modèle”, puis sur “Modifier le code HTML”

2. Trouver la balise </head>

3. Coller le script suivant juste avant la balise trouvée.



<script src='http://blogthietke.googlecode.com/files/lazypic.js'/>
<script charset='utf-8' type='text/javascript'>
$(function() {    
$(&quot;img&quot;)  
.lazyload({
placeholder: &quot;https://lh3.googleusercontent.com/-Z9XhV1m9Jak/T3AqzaLp1EI/AAAAAAAACyw/Y1dC7eoBPxM/s5/eee.gif&quot;,
effect: &quot;fadeIn&quot;});
});
</script>


Notez que le script en rouge est à omettre s'il se trouve déjà dans votre modèle.

4. Enregistrer le modèle

Maintenant, le chargement des pages de votre blog avec images et autres photos sera plus rapide.

jeudi, janvier 24, 2013

Rendre invisible le gadget Attribution - Fourni par Blogger

Nous avons déjà vu comment cacher le gadget attribution en lui ajoutant un attribut, et aussi comment supprimer ce widget Fourni par Blogger. Mais, étant donné que certains affirment qu'il a tendance à réapparaitre après les manipulations effectuées, voici une astuce qui va rendre invisible le gadget attribution.
rendre invisible le gadget fourni par Blogger (Attribution) sur votre blog

Bien qu'il restera présent dans votre modèle, le widget attribution ne s'affichera plus sur le blog après l'ajout d'un simple code css.

Voici comment procéder :

1. Se connecter à Blogger. Aller sur "Modèle", puis cliquer sur le bouton "Modifier le code HTML"

2. Trouver la balise suivante ]]></b:skin>

3. Mettre le code css suivant juste avant la balise de l'étape 2

#Attribution1 {display: none;}

4. Enregistrer le modèle

Et voilà. C'est aussi simple que ça. Maintenant, le gadget Attribution - Fourni par Blogger -  ne sera plus visible sur votre blog.

@+

dimanche, janvier 20, 2013

Jouer de la musique sur son blog

Après avoir vu comment ajouter de la musique sur son blog avec Mixpod, puis comment mettre un lecteur mp3 Dewplayer sur son blog tout en hébergeant ses fichiers sur Google Sites, nous allons voir ici comment jouer de la musique sur son blog grâce à Tilidom, un site que m’a fait découvrir Akari du blog Tutoriels Iphone.

Tilidom est un site d’hébergement des fichiers qui a la particularité de permettre à ses utilisateurs de faire jouer, sur leurs blogs, les fichiers mp3 stockés dans leurs comptes grâce à Dewplayer.

Voici les étapes à suivre pour jouer de la musique sur son blog grâce à Tilidom :

1. S’inscrire gratuitement sur Tilidom (2 giga de stockage offerts)

2. Se connecter à son compte après inscription et cliquer sur le bouton vert avec un + pour ajouter les fichiers mp3.

 Notez que vous pouvez aussi ajouter les fichiers après avoir ouvert le dossier “Mp3” afin qu’ils y soient directement enregistrés.

3. Sur la page qui va s’ouvrir, vous pouvez cliquer sur le bouton “Ajouter des fichiers” afin de sélectionner vos fichiers mp3 dans votre ordinateur, ou vous pouvez simplement vous rendre dans le dossier de votre ordi où sont stockés les mp3 que vous désirez ajouter, les sélectionner et les glisser sur la page.

ajouter des fichiers mp3 sur tilidom


4. Quand vous aurez fini la sélection des fichiers, cliquez sur “Commencer le téléch.” afin d’importer vos fichiers. Vous verrez la progression du téléchargement qui va s’afficher pour chaque fichier et une barre de progression pour tous les fichiers.

5. Une fois le téléchargement terminé, vous pouvez retourner à la page d’accueil de votre compte. Là, cliquez sur le 4ème bouton, en forme de globe, pour publier vos fichiers mp3 sur un lecteur de musique.

publier la musique sur son blog
6. Sur la page “My publications” cliquez sur “Publish music”.

 7. Sélectionner les fichiers mp3 à publier sur votre lecteur puis cliquez sur “Next”.

sélectionner la musique à jouer


8. Sur la nouvelle page vous verrez s’afficher votre lecteur (avec la musique qui va commencer à jouer). Vous pourrez changer l’ordre des chansons (Change order), choisir un lecteur plus petit (Choose a mini skin) ou changer l’apparence de votre lecteur (Change skin).

jouer de la musique sur son blog


Vous devez aussi donner un nom à votre lecteur, et cocher sur la case pour “Auto play” pour que la musique se lance à l’affichage de la page (moi je ne vous conseille pas de le faire).

Il vous faudra enfin cliquer sur la case pour “I’m not violating any copy right by publishing this files” afin de signifier que vous ne violez aucun droit d’auteur en publiant ces musiques sur votre blog.

9. Cliquez sur “Publish files!” afin de récupérer le code de votre lecteur mp3 sur la page qui va s’afficher.

 Pour être sur de copier tout le code, cliquez sur “Copy to clipboard”.

10. Vous pouvez maintenant coller le code html de votre lecteur dans un gadget HTML/Javascript ou dans un article afin d’afficher ledit lecteur mp3 sur votre blog.

Alors, ça vous tente de jouer de la musique sur votre blog ?

Bouton pour imprimer ou télécharger les articles du blog en PDF


En juillet 2007, nous avions vu qu’il était possible d’ajouter l’option “imprimer” pour les articles de votre blog afin de permettre à vos lecteurs de garder une copie papier de votre blog. Nous allons ici vous présenter le gadget de Print Friendly qui ajoute un bouton pour imprimer ou télécharger les articles du blog en PDF

Bouton pour imprimer ou télécharger les articles du blog en PDF


Grâce au bouton de Print Friendly, seuls les contenus de vos articles seront imprimés, pas les autres parties du blog. Vous pouvez voir un exemple de ce que ça va donner sur votre blog en faisant un test sur la page d'accueil de Print Friendly. Mettez l'url de votre blog là où il est écrit "enter a url" puis cliquez sur "print preview".

Pour Blogger au bout du doigt, ça donne cette belle page :

exemple article du blog à imprimer grâce à Print Friendly


Voici ce qu’il faut faire pour donner à vos lecteurs la possibilité d’imprimer ou de télécharger vos articles en PDF.

1. Aller sur cette page de Print Friendly

2. Pour l’étape 1 “Choose site type”, cocher sur la case pour “Blogger/blogspot”

3. Pour l’étape 2 “Choose button”, choisir le type de bouton à afficher sur le blog

4. Toujours à l’étape, pour “Features”, choisir les fonctions (Allow = Permettre, Not allow = Ne pas permettre, Enable = Activer, Disable = Désactiver)

Page header (Entête de la page)
Click-to-delete (Cliquer pour effacer)
Email
PDF
Print (Imprimer)
Custom css url (mettre l'url de code css à utiliser à la place de celui de Print Friendly)
HTTPS (Connexion sécurisée)

5. Pour l’étape 3 “Copy the code”, sélectionner et copier le code généré.

Voici en exemple le code généré après le choix du deuxième bouton de la deuxième colonne

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-print-icon.gif" width="16" height="15" alt="Print Friendly Version of this page" />Print <img style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-pdf-icon.gif" width="12" height="12" alt="Get a PDF version of this webpage" />PDF</a>

On peut franciser le code de la manière suivante : 

a. Remplacer le “Print Friendly Version of this page” par “Imprimer cette page”

b. Remplacer “Print” par “Imprimer”

c. Remplacer “Get a PDF version of this webpage” par “Télécharger une version PDF de cet article”

6. Se connecter à Blogger, aller sur “Modèle” puis cliquer sur “Modifier le code HTML”. Là, cocher sur “Développer des modèles de gadget”

7. Trouver l’une des lignes de codes suivante : 

<data:post.body/> (Cette ligne est celle qui affiche le corps de votre article)

<div class='post-footer'> (Après cette ligne se trouvent les codes pour ce qui doit apparaître au bas de l’article)

8. Coller le code de Print Friendly juste après l’une des lignes de codes de l’étape 7.

9. Enregistrer le modèle. 

Avec ces manœuvres simples, vous aurez ajouté un bouton pour imprimer et télécharger les articles de votre blog au format PDF

@+

vendredi, janvier 18, 2013

Titres d’articles pour "message plus ancien" et "message plus récent"


Ceux qui suivent le blog depuis longtemps savent que nous avions déjà partagé une astuce pour afficher les vrais titres d'articles à la place de "message plus ancien" et "message plus récent" .

afficher les titres articles à la place de message plus anciens récents sur blogger blogspot

Je voudrais ici vous partager une autre astuce, qui permettra aussi d’avoir les titres d’articles à la place de "message plus ancien" et "message plus récent".

Voici les étapes à suivre afin de réaliser cette prouesse :

1) Se connecter à Blogger et se rendre sur “Modele” pour le blog où effectuer la modification

2) Après avoir gardé une copie du modèle, cliquez sur “Modifier le code HTML”

3) Trouvez la balise </head> (Vous pouvez utiliser CTRL+F pour trouver rapidement)

4) Collez le script suivant juste avant la balise trouvée et enregistrez votre modèle.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Vous pouvez zapper cette étape si vous avez déjà le code jquery.min.js installé dans votre modèle.

5) Rendez-vous sur “Mise en page” et cliquez sur “Ajouter un gadget”

9) Choisissez “HTML/Javascript” et collez le code suivant puis enregistrez votre gadget.

<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>


Maintenant, vous verrez s’afficher les titres des articles à la place de “Message ancien” ou “Message récent”.

Voir aussi :


Déplacer messages anciens/messages récents 




Les titres des articles au lieu de “Plus d'infos” ou “Lire la suite”



jeudi, janvier 17, 2013

Gadget abonnés Google+ pour Blogger


Vous avez un compte sur Google+ et vous aimeriez accroître le nombre de vos abonnés ? Voici pour vous le nouveau gadget “Abonnés Google+” que nous propose Blogger.

A l’inverse du gadget fans sur Facebook qui affiche les abonnés à la page Facebook de votre blog, le gadget "Abonnés Google+” affiche les abonnées à votre profil Google+, les personnes qui vous ont ajouté à leurs cercles. C’est donc un moyen pour accroitre la popularité de son profil sur Google+, en incitant les visiteurs de votre blog à vous ajouter à leurs cercles.

Gadget abonnés followers Google+


Pour avoir ce gadget, il vous faut :

1. Vous connecter à votre compte Blogger et aller sur “Mise en page” pour le blog où vous allez ajouter le gadget

2. Cliquer sur “Ajouter un gadget” et sélectionner “Abonnés Google+” dans le pop-up qui va s’ouvrir.

ajouter gadget abonnés google+ sur blogger


3. Donnez un nom à votre gadget ou laisser le “Google+ followers” puis enregistrez les modifications.

Il ne vous restera plus qu’à glisser le gadget pour le mettre à un autre emplacement, si vous ne voulez pas qu’il figure en première place de l’endroit où vous l’avez inséré.

Que pensez-vous de ce gadget Abonnés sur Google+ ? ça vous tente ? 

Ecrire un message au dessus du cadre commentaires

L'espace des commentaires permet à vos lecteurs d'y laisser des avis, de poser des questions, de faire des remarques. Parfois, on note quelques violations des règles de bienséance, de courtoisie et savoir vivre parmi les commentaires.

L’un des moyens pour diminuer considérablement le nombre des dérapages dans l’espace de commentaires est de laisser un message, juste au dessus du formulaire pour commenter. Dans ce message vous soulignerez à vos lecteurs les règles à respecter, ou du moins à ne pas violer, lors de la rédaction d’un commentaire.

message formulaire de commentaire

Pour avoir une notice qui s’affiche au-dessus du formulaire de commentaire, voici ce que vous devez faire :

1. Vous connecter à Blogger et aller sur “Paramètres”.

2. Cliquer sur “Publications et commentaires” (voir la barre à gauche)

3. Ecrivez votre notice dans le cadre réservé pour le “Message du formulaire de commentaire”

Ecrire un message au dessus du cadre de commentaire


4. Cliquez sur le bouton “Enregistrer les paramètres”

Vous aurez maintenant un message qui va s'afficher au dessus du cadre du formulaire de commentaire de votre blog.

mercredi, janvier 16, 2013

Mettre un lecteur mp3 sur votre blog


Nous avions déjà vu ici qu’il était possible d’ajouter un lecteur mp3 à son blog grâce aux service de Mixpod. Malheureusement, d’après ce que j’ai pu lire des commentaires laissés à l’article qui traitait de la question, Mixpod a fermé ses portes. Il nous faut trouver une alternative.

comment ajouter un lecteur mp3 sur un blog


Nous allons donc voir ici comment mettre un lecteur mp3 sur votre blog grâce Dewplayer, un lecteur mp3 fourni par Alsacréation. Ce qui est intéressant avec ce lecteur, c’est qu’il vous offre la possibilité de le configurer afin que la musique puisse se lancer à l’affichage de la page ou seulement lorsque le visiteur du blog désirera l’écouter.

Voici les étapes à suivre afin d’ajouter un lecteur mp3 sur votre blog 

1. Télécharger le fichier suivant : Dewplayer

2.  Décompressez le fichier et choisissez le fichier .swf que vous allez héberger sur Google sites ou un autre service d’hébergement des fichiers (dans votre dossier public de Dropbox par exemple). 

Dans cet article nous allons prendre exemple sur le lecteur multi, qui permet de jouer plusieurs chansons sur son  lecteur. Choisissez donc le fichier dewplayer-multi.swf et uploadez-le.

3. Prenez le temps d’héberger vos fichiers mp3 sur Google sites (cliquez sur le lien pour voir comment faire).

4. Rendez-vous sur cette page afin de générer le code html de votre lecteur mp3. 

A l’endroit réservé pour l’url de vos mp3, veuillez mettre les liens des mp3 que vous voulez en les séparant par le caractère

Exemple : https://sites.google.com/site/rodneysankinka2/monson1.mp3|https://sites.google.com/site/rodneysankinka2/monson2.mp3

5. Quand vous aurez fini de cocher sur les autres paramètres qui vous conviennent, copiez le code qui apparait en bas, dans le bloc jaune.

Je vous conseille de ne pas activer la lecture automatique, beaucoup trouve cela vraiment embêtant.

6. Dans le code généré, prenez soin de remplacer dewplayer-multi.swf par l’url où se trouve le fichier dewplayer-multi.swf que vous avez héberger à la deuxième étape.

Au final vous aurez un code un peu semblable à celui-ci

<object type="application/x-shockwave-flash" data="https://sites.google.com/site/rodneysankinka2/dewplayer-multi.swf" width="240" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /><param name="movie" value="https://sites.google.com/site/rodneysankinka2/dewplayer-multi.swf" /> <param name="flashvars" value="mp3=https://sites.google.com/site/rodneysankinka2/monson1.mp3|https://sites.google.com/site/rodneysankinka2/monson2.mp3&amp;showtime=1&amp;randomplay=1" /> </object>

7. Rendez-vous sur Blogger, puis sur “Mise en page” et là, cliquez sur “Ajouter un gadget” et choisissez “HTML/Javascript” afin de coller le code que vous avez généré et ainsi afficher un lecteur mp3 sur votre blog.

Vous pouvez aussi coller ledit code dans un article, si c’est seulement pour un article que vous voulez afficher le lecteur mp3. Dans ce cas, prenez soin de passer en mode “HTML” dans l’éditeur des messages avant de coller votre code ou encore sur l’onglet option (à droite), cochez sur “Interpréter le code html saisi”.

Pensez-vous que ça vous tente de mettre un lecteur sur votre blog

Comment héberger vos fichiers sur Google sites


Il existe plusieurs solutions pour héberger ses fichiers en ligne. Mais, beaucoup de ces solutions ne vous permettent pas ensuite d'utiliser le lien direct du fichier hébergé pour l'ajouter par exemple à un lecteur mp3 qui jouera la musique sur votre blog. 

Si je vais vous apprendre comment héberger vos fichiers sur Google sites, c'est notamment parce que je compte vous montrer comment ajouter un lecteur mp3 à votre blog dans un prochain article.

Voici comment procéder pour héberger des fichiers sur Google sites.

1. Rendez-vous sur Google sites et créez-y un site, si vous n'en avez pas déjà un.
2. Rendez-vous sur le site que vous venez de créer (ou que vous avez déjà) et cliquez sur le bouton "plus" (en haut à droite)
3. Cliquer sur "Gérer le site".

Gérer le site sur Google sites


4. Sur la colonne gauche de la nouvelle page, cliquez sur "Pièces jointes".

Afficher pièces jointes sur Google sites


5. Pour uploader vos fichiers, il vous suffira de cliquer sur le bouton "Importer", de choisir dans votre ordinateur le fichier à importer, puis de laisser le temps à google sites de l'importer.

Importer fichiers sur Google sites


6. Votre fichier ayant été importé, vous pouvez en récuperer le lien direct en faisant un clic droit sur l'url "Afficher" qui se trouve juste en dessous du nom de votre fichier. Faites donc un clic droit puis cliquez sur "Copier l'adresse du lien".

Vous aurez quelque chose comme cette url :

https://sites.google.com/site/rodneysankinka2/user_red.png?attredirects=0

Effacez la partie ?attredirects=0 afin qu'aucune redirection ne soit faite et conservez l'url dans un fichier texte pour une future utilisation.

Voilà, maintenant vous aussi vous savez comment héberger vos fichiers sur Google sites.

@+

lundi, janvier 14, 2013

Comment changer de modèle - template - sur Blogger en 2013


Blogger a beaucoup fait évoluer les fonctionnalités présentes dans sa plateforme depuis les mois précédents. Parmi les modifications enregistrées, il y a notamment la méthode pour changer les templates des blogs.

Voici comment changer le modèle de votre blog sur Blogger en 2013.

1. Connectez-vous à votre Tableau de Bord sur Blogger puis allez sur “Modèle” pour le blog dont vous voulez changer le modèle.
Tableau de bord Blogger modèle


2. Cliquer sur le bouton “Sauvegarder/Restaurer” qui se trouve en haut, à droite.

sauvergarder/restaurer modèle blogger


3. Cliquez sur le bouton pour choisir le fichier afin de sélectionner le fichier .xml de votre modèle dans votre ordinateur

choisir fichier xml modele blogger et transférer


4. Une fois sélectionné, cliquez sur “Transférer” afin d’installer le nouveau template à la place de l’ancien.

Si tout va bien, que votre modèle n’a aucune erreur, il sera installé en une minute. Il vous faudra ensuite allez voir si tous les gadgets sont à leur place, s’il n’y en pas qui sont allé s’incruster là où il ne  faut pas.

Comme vous pouvez le constater, la méthode pour changer de modèle sur Blogger en 2013 est vraiment très simple.

dimanche, janvier 13, 2013

Gadget pour afficher les articles en cours de lecture


Il existe plusieurs moyens qui permettent de garder pendant un bon moment les visiteurs sur votre blog, surtout ceux qui viennent des moteurs de recherches. Nous avons par exemple l’affichage, en fin d’articles, d’une liste d’autres articles de la même catégorie qui peuvent les intéresser ou encore l’affichage d’un gadget avec les messages les plus consultés

Je vais ici vous proposer un autre gadget qui, si possible, incitera vos visiteurs à lire plus d’un article sur votre blog. Crée par Durai Shankar, ce gadget affichera les articles en cours de lecture sur votre blog ou les derniers qui ont été lus. Il a la particularité de mettre à jour automatiquement les images et les articles qui y sont affichés afin de présenter les articles qui sont en cours de lecture sur le blog.

Gadget pour afficher les articles en cours de lecture


Pour avoir ce gadget sur votre blog, il vous suffit de vous connecter à Blogger, d’aller sur “Mise en page”, puis de cliquer “Ajouter un gadget” et de choisir “HTML/Javascript”. Enfin, Collez le code que je vais vous donner dans la grande case (la deuxième) et donnez un titre à votre gadget dans la petite case (la première). Vous pouvez nommer ce gadget “Récemment lus”, “En cours de lecture”, etc. 

Avant de vous donner le code, juste vous signaler que vous pouvez changer le nombre d’articles à afficher sur le gadget en changeant le chiffre à la fin de la ligne suivante dans le code. 

var Max_Post_Display=5;

Bon, voici pour vous le code pour avoir le gadget qui affiche les articles en cours de lecture sur votre blog.

<style type="text/css"><!--
.recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;}
.recent_post_content img {width:48px;height:48px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}
.recent_post_content_item table, .recent_post_content_item tr, .recent_post_content_item td {vertical-align: middle;}
.recent_post_content_item table {margin-bottom:2px;margin-top:3px;}
.recent_post_content_item:hover {filter: alpha(opacity=100);opacity: 1;}
.recent_post_title a{font-size:12px;text-decoration:none;font-weight:bold;color:inherit}
.recent_post_title a:hover{text-decoration:underline}
.recent_post_content_item .recent_post_info {filter: alpha(opacity=60);opacity: 0.6;font-size: 11px;}
--></style>
<script type="text/JavaScript">
<!--
//Setting_begin
var No_Thumb_Url='http://www.ezeego1.co.in/ezeego1.cms/static/images/noimage.jpg';
var Max_Post_Display=5;
var Sum_Len='0';
//Setting_end
//Define your language
var Lang_By = 'Par ';
var Lang_comment = ' commentaire';
var Lang_comments = ' commentaires';
//For valid feed, not touch
var _0xc4c0=["\x75\x20\x46\x28\x4E\x2C\x48\x2C\x6F\x2C\x65\x2C\x4F\x29\x7B\x37\x20\x4A\x3D\x27\x27\x3B\x35\x28\x48\x21\x3D\x27\x27\x29\x4A\x3D\x27\x2F\x2D\x2F\x27\x2B\x48\x3B\x37\x20\x51\x3D\x27\x27\x3B\x35\x28\x6F\x21\x3D\x27\x27\x29\x51\x3D\x27\x6F\x2D\x31\x71\x3D\x27\x2B\x6F\x2B\x27\x26\x27\x3B\x37\x20\x4D\x3D\x27\x27\x3B\x35\x28\x65\x21\x3D\x27\x27\x29\x4D\x3D\x27\x65\x2D\x31\x74\x3D\x27\x2B\x65\x2B\x27\x26\x27\x3B\x31\x38\x2E\x31\x39\x28\x27\x3C\x55\x20\x4E\x3D\x22\x31\x70\x2F\x31\x6F\x22\x20\x50\x3D\x22\x2E\x2E\x2F\x2E\x2E\x2F\x31\x6E\x2F\x27\x2B\x4E\x2B\x27\x2F\x36\x27\x2B\x4A\x2B\x27\x3F\x27\x2B\x51\x2B\x4D\x2B\x27\x31\x72\x3D\x64\x2D\x63\x2D\x55\x26\x4F\x3D\x27\x2B\x4F\x2B\x27\x22\x3E\x3C\x5C\x2F\x55\x3E\x27\x29\x7D\x75\x20\x4B\x28\x64\x29\x7B\x37\x20\x31\x31\x3D\x2F\x3C\x5C\x53\x5B\x5E\x3E\x5D\x2A\x3E\x2F\x67\x3B\x32\x2E\x73\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x76\x2E\x24\x74\x29\x3B\x32\x2E\x6F\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x73\x2E\x24\x74\x29\x3B\x32\x2E\x44\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x75\x2E\x24\x74\x29\x3B\x32\x2E\x45\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x6B\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x62\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x36\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x79\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x71\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x42\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x72\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x76\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x38\x3D\x32\x2E\x73\x2D\x32\x2E\x6F\x2B\x31\x3B\x35\x28\x32\x2E\x38\x3E\x32\x2E\x44\x29\x32\x2E\x38\x3D\x32\x2E\x44\x3B\x54\x28\x37\x20\x69\x3D\x30\x3B\x69\x3C\x32\x2E\x38\x3B\x69\x2B\x2B\x29\x7B\x32\x2E\x79\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x71\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x42\x5B\x69\x5D\x3D\x27\x27\x3B\x35\x28\x31\x32\x20\x31\x35\x21\x3D\x27\x31\x69\x27\x29\x32\x2E\x42\x5B\x69\x5D\x3D\x31\x35\x3B\x32\x2E\x45\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x6B\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x62\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x36\x5B\x69\x5D\x3D\x30\x3B\x32\x2E\x72\x5B\x69\x5D\x3D\x27\x27\x3B\x35\x28\x31\x32\x20\x31\x34\x21\x3D\x27\x31\x69\x27\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x31\x34\x3B\x32\x2E\x76\x5B\x69\x5D\x3D\x27\x27\x3B\x37\x20\x34\x3D\x64\x2E\x43\x2E\x34\x5B\x69\x5D\x3B\x35\x28\x27\x31\x33\x27\x63\x20\x34\x29\x32\x2E\x45\x5B\x69\x5D\x3D\x34\x2E\x31\x33\x2E\x24\x74\x3B\x35\x28\x27\x6B\x27\x63\x20\x34\x29\x32\x2E\x6B\x5B\x69\x5D\x3D\x34\x2E\x6B\x2E\x24\x74\x3B\x35\x28\x27\x62\x27\x63\x20\x34\x29\x7B\x54\x28\x37\x20\x6A\x3D\x30\x3B\x6A\x3C\x34\x2E\x62\x2E\x47\x3B\x6A\x2B\x2B\x29\x7B\x35\x28\x34\x2E\x62\x5B\x6A\x5D\x2E\x31\x46\x3D\x3D\x27\x31\x4C\x27\x29\x7B\x32\x2E\x62\x5B\x69\x5D\x3D\x34\x2E\x62\x5B\x6A\x5D\x2E\x52\x3B\x31\x4E\x7D\x7D\x35\x28\x6A\x3D\x3D\x34\x2E\x62\x2E\x47\x29\x32\x2E\x62\x5B\x69\x5D\x3D\x27\x23\x27\x7D\x35\x28\x27\x36\x27\x63\x20\x34\x29\x32\x2E\x36\x5B\x69\x5D\x3D\x34\x2E\x36\x2E\x24\x74\x3B\x32\x2E\x36\x5B\x69\x5D\x3D\x32\x2E\x36\x5B\x69\x5D\x2E\x31\x49\x28\x31\x31\x2C\x27\x27\x29\x3B\x35\x28\x32\x2E\x36\x5B\x69\x5D\x2E\x47\x3E\x5A\x29\x7B\x32\x2E\x36\x5B\x69\x5D\x3D\x32\x2E\x36\x5B\x69\x5D\x2E\x31\x48\x28\x30\x2C\x5A\x29\x2B\x27\x2E\x2E\x2E\x27\x7D\x35\x28\x27\x6D\x27\x63\x20\x34\x29\x7B\x35\x28\x27\x56\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x7B\x32\x2E\x79\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x56\x2E\x24\x74\x7D\x35\x28\x27\x71\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x32\x2E\x71\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x71\x2E\x24\x74\x3B\x35\x28\x27\x57\x24\x59\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x7B\x32\x2E\x42\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x57\x24\x59\x2E\x50\x7D\x7D\x35\x28\x27\x58\x24\x31\x37\x27\x63\x20\x34\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x34\x2E\x58\x24\x31\x37\x2E\x31\x4A\x3B\x35\x28\x27\x31\x6B\x24\x73\x27\x63\x20\x34\x29\x32\x2E\x76\x5B\x69\x5D\x3D\x34\x2E\x31\x6B\x24\x73\x2E\x24\x74\x7D\x4C\x20\x32\x7D\x75\x20\x31\x63\x28\x38\x2C\x65\x29\x7B\x35\x28\x38\x3D\x3D\x65\x29\x7B\x4C\x20\x38\x7D\x37\x20\x78\x3D\x30\x3B\x37\x20\x6E\x3D\x30\x3B\x35\x28\x65\x3E\x38\x29\x7B\x6E\x3D\x65\x2D\x38\x3B\x78\x3D\x38\x7D\x31\x6D\x7B\x6E\x3D\x38\x2D\x65\x3B\x78\x3D\x65\x7D\x6E\x3D\x31\x67\x2E\x31\x4B\x28\x31\x67\x2E\x31\x77\x28\x29\x2A\x6E\x29\x3B\x4C\x28\x6E\x2B\x78\x29\x7D\x46\x28\x27\x31\x68\x27\x2C\x27\x27\x2C\x27\x27\x2C\x27\x30\x27\x2C\x27\x31\x65\x27\x29\x3B\x75\x20\x31\x65\x28\x64\x29\x7B\x31\x66\x3D\x4B\x28\x64\x29\x3B\x31\x64\x3D\x31\x66\x2E\x73\x3B\x70\x3D\x31\x64\x2D\x31\x6C\x3B\x35\x28\x70\x3C\x31\x29\x70\x3D\x31\x3B\x70\x3D\x31\x63\x28\x31\x2C\x70\x29\x3B\x46\x28\x27\x31\x68\x27\x2C\x27\x27\x2C\x27\x27\x2B\x70\x2B\x27\x27\x2C\x27\x27\x2B\x31\x6C\x2B\x27\x27\x2C\x27\x31\x6A\x27\x29\x7D\x75\x20\x31\x6A\x28\x64\x29\x7B\x37\x20\x39\x3D\x4B\x28\x64\x29\x3B\x37\x20\x33\x3D\x22\x22\x3B\x54\x28\x37\x20\x69\x3D\x30\x3B\x69\x3C\x39\x2E\x38\x3B\x69\x2B\x2B\x29\x7B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x4D\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x30\x20\x31\x61\x3D\x22\x30\x25\x22\x20\x31\x47\x3D\x22\x30\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x62\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x52\x3D\x22\x27\x2B\x39\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x20\x6B\x3D\x22\x27\x2B\x39\x2E\x36\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x7A\x20\x50\x3D\x22\x27\x2B\x39\x2E\x72\x5B\x69\x5D\x2B\x27\x22\x20\x31\x61\x3D\x22\x31\x36\x22\x20\x31\x79\x3D\x22\x31\x36\x22\x2F\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x78\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x52\x3D\x22\x27\x2B\x39\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x20\x6B\x3D\x22\x27\x2B\x39\x2E\x36\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x39\x2E\x6B\x5B\x69\x5D\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x41\x22\x3E\x27\x3B\x33\x2B\x3D\x28\x31\x42\x2B\x39\x2E\x79\x5B\x69\x5D\x2B\x27\x20\x2D\x20\x27\x2B\x39\x2E\x76\x5B\x69\x5D\x29\x3B\x35\x28\x41\x28\x39\x2E\x76\x5B\x69\x5D\x29\x3E\x31\x29\x7B\x33\x2B\x3D\x31\x45\x7D\x31\x6D\x7B\x33\x2B\x3D\x31\x44\x7D\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x62\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x30\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x7D\x33\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x43\x22\x3E\x27\x2B\x33\x2B\x27\x3C\x2F\x6C\x3E\x27\x3B\x31\x38\x2E\x31\x39\x28\x33\x29\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x74\x68\x69\x73\x7C\x73\x74\x72\x5F\x6F\x75\x74\x7C\x65\x6E\x74\x72\x79\x7C\x69\x66\x7C\x73\x75\x6D\x6D\x61\x72\x79\x7C\x76\x61\x72\x7C\x6D\x69\x6E\x7C\x52\x70\x6F\x73\x74\x7C\x7C\x6C\x69\x6E\x6B\x7C\x69\x6E\x7C\x6A\x73\x6F\x6E\x7C\x6D\x61\x78\x7C\x6E\x65\x77\x7C\x7C\x4F\x62\x6A\x65\x63\x74\x7C\x7C\x7C\x74\x69\x74\x6C\x65\x7C\x64\x69\x76\x7C\x61\x75\x74\x68\x6F\x72\x7C\x64\x69\x66\x66\x7C\x73\x74\x61\x72\x74\x7C\x6D\x69\x6E\x5F\x69\x6E\x64\x65\x78\x7C\x75\x72\x69\x7C\x74\x68\x75\x6D\x62\x7C\x74\x6F\x74\x61\x6C\x7C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x63\x6D\x7C\x74\x64\x7C\x72\x6D\x69\x6E\x7C\x61\x75\x6E\x61\x6D\x65\x7C\x63\x6C\x61\x73\x73\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x61\x76\x61\x74\x61\x72\x7C\x66\x65\x65\x64\x7C\x69\x74\x65\x6D\x7C\x70\x75\x62\x7C\x46\x65\x65\x64\x5F\x43\x61\x6C\x6C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x6C\x61\x62\x65\x6C\x7C\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x7C\x64\x69\x72\x7C\x46\x65\x65\x64\x5F\x50\x61\x72\x73\x65\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6D\x61\x78\x5F\x72\x65\x73\x75\x6C\x74\x7C\x74\x79\x70\x65\x7C\x63\x61\x6C\x6C\x62\x61\x63\x6B\x7C\x73\x72\x63\x7C\x73\x74\x61\x72\x74\x5F\x69\x6E\x64\x65\x78\x7C\x68\x72\x65\x66\x7C\x7C\x66\x6F\x72\x7C\x73\x63\x72\x69\x70\x74\x7C\x6E\x61\x6D\x65\x7C\x67\x64\x7C\x6D\x65\x64\x69\x61\x7C\x69\x6D\x61\x67\x65\x7C\x53\x75\x6D\x5F\x4C\x65\x6E\x7C\x74\x61\x62\x6C\x65\x7C\x72\x65\x7C\x74\x79\x70\x65\x6F\x66\x7C\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x7C\x4E\x6F\x5F\x54\x68\x75\x6D\x62\x5F\x55\x72\x6C\x7C\x4E\x6F\x5F\x41\x76\x61\x74\x61\x72\x5F\x55\x72\x6C\x7C\x33\x32\x70\x78\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x77\x72\x69\x74\x65\x7C\x77\x69\x64\x74\x68\x7C\x74\x72\x7C\x52\x61\x6E\x64\x6F\x6D\x7C\x54\x6F\x74\x61\x6C\x5F\x50\x6F\x73\x74\x7C\x47\x65\x74\x5F\x54\x6F\x74\x61\x6C\x5F\x50\x6F\x73\x74\x7C\x6A\x50\x6F\x73\x74\x7C\x4D\x61\x74\x68\x7C\x70\x6F\x73\x74\x73\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x52\x61\x6E\x64\x6F\x6D\x5F\x50\x6F\x73\x74\x5F\x53\x68\x6F\x77\x7C\x74\x68\x72\x7C\x4D\x61\x78\x5F\x50\x6F\x73\x74\x5F\x44\x69\x73\x70\x6C\x61\x79\x7C\x65\x6C\x73\x65\x7C\x66\x65\x65\x64\x73\x7C\x4A\x61\x76\x61\x53\x63\x72\x69\x70\x74\x7C\x74\x65\x78\x74\x7C\x69\x6E\x64\x65\x78\x7C\x61\x6C\x74\x7C\x73\x74\x61\x72\x74\x49\x6E\x64\x65\x78\x7C\x72\x65\x73\x75\x6C\x74\x73\x7C\x69\x74\x65\x6D\x73\x50\x65\x72\x50\x61\x67\x65\x7C\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73\x7C\x72\x61\x6E\x64\x6F\x6D\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x68\x65\x69\x67\x68\x74\x7C\x69\x6D\x67\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x69\x6E\x66\x6F\x7C\x4C\x61\x6E\x67\x5F\x42\x79\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x72\x65\x6C\x7C\x62\x6F\x72\x64\x65\x72\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x75\x72\x6C\x7C\x66\x6C\x6F\x6F\x72\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x5F\x69\x74\x65\x6D\x7C\x62\x72\x65\x61\x6B","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x5cedx1,_0x5cedx2,_0x5cedx3,_0x5cedx4,_0x5cedx5,_0x5cedx6){_0x5cedx5=function (_0x5cedx3){return (_0x5cedx3<_0x5cedx2?_0xc4c0[4]:_0x5cedx5(parseInt(_0x5cedx3/_0x5cedx2)))+((_0x5cedx3=_0x5cedx3%_0x5cedx2)>35?String[_0xc4c0[5]](_0x5cedx3+29):_0x5cedx3.toString(36));} ;if(!_0xc4c0[4][_0xc4c0[6]](/^/,String)){while(_0x5cedx3--){_0x5cedx6[_0x5cedx5(_0x5cedx3)]=_0x5cedx4[_0x5cedx3]||_0x5cedx5(_0x5cedx3);} ;_0x5cedx4=[function (_0x5cedx5){return _0x5cedx6[_0x5cedx5];} ];_0x5cedx5=function (){return _0xc4c0[7];} ;_0x5cedx3=1;} ;while(_0x5cedx3--){if(_0x5cedx4[_0x5cedx3]){_0x5cedx1=_0x5cedx1[_0xc4c0[6]]( new RegExp(_0xc4c0[8]+_0x5cedx5(_0x5cedx3)+_0xc4c0[8],_0xc4c0[9]),_0x5cedx4[_0x5cedx3]);} ;} ;return _0x5cedx1;} (_0xc4c0[0],62,112,_0xc4c0[3][_0xc4c0[2]](_0xc4c0[1]),0,{}));
-->
</script><script type="text/JavaScript" src="../../feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=Get_Total_Post"></script><script type="text/JavaScript" src="../../feeds/posts/summary?start-index=50&amp;max-results=1&amp;alt=json-in-script&amp;callback=Random_Post_Show"></script>

Que pensez-vous de ce gadget ? Allez-vous aussi afficher les articles en cours de lecture sur votre blog ?

samedi, janvier 12, 2013

Gadget messages les plus consultés multicolore avec numéros

Besoin d’avoir un gadget «messages les plus consultés»  stylé ? Je crois avoir quelque chose pour vous. Le gadget pour «messages les plus consultés»  que je vais vous proposer ici a la particularité d’afficher une couleur différente pour les articles listés, avec en plus de cela un numéro à côté de chacun d’eux.

Gadget messages les plus consultés multicolore avec numéros


Voici la démarche à suivre pour avoir un gadget «messages les plus consultés» multicolore et numéroté.

Avant de vous lancer dans l’opération que nous allons détailler ici bas, je vous conseille de commencer par ajouter un gadget «messages les plus consultés» dans votre blog, si ce n’est pas encore fait.

1. Rendez-vous sur votre Tableau de bord Blogger >> Modifier le code HTML >> Copiez l’intégralité du code affiché et gardez en une copie dans un fichier txt (à utiliser juste au cas où il y a un problème).

2. Trouvez la partie suivante (faites CTRL+F et collez le texte ci-dessous afin de le trouver) 

/* Variable definitions 
   ==================== 

3. Copiez le code suivant et collez-le juste après la bout que vous venez de trouver.


<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>


4. Trouvez le bout code suivant :

]]></b:skin> 

5. Collez ces lignes css juste avant le code ci-haut :

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} 
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} 
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} 
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none} 


6. Trouvez le code suivant, puis effacez-le.

<b:widget id='PopularPosts1' locked='false' title='Messages les plus consultés' type='PopularPosts'/> 

7. Collez le code ci-dessous à l’endroit où était le gadget «messages les plus consultés» que vous venez d’effacer à l'étape précédente.

<b:widget id='PopularPosts1' locked='false' title='Messages les plus consultés' type='PopularPosts'> 
<b:includable id='main'> 
   <b:if cond='data:title'> 
    <h2><data:title/></h2> 
   </b:if> 
   <div class='widget-content popular-posts'> 
    <ul> 
     <b:loop values='data:posts' var='post'> 
      <li> 
       <b:if cond='data:showThumbnails == &quot;false&quot;'> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
        <b:else/> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
        </b:if> 
       <b:else/> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        <b:else/> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        </b:if> 
       </b:if> 
      </li> 
     </b:loop> 
    </ul> 
   </div> 
  </b:includable> 
</b:widget> 

8. Enregistrez votre modèle. 

Et voilà ! Vous avez un nouveau gadget «messages les plus consultés» multicolore avec des numéros affichés pour chaque article listé.

Paramétrage du gadget

- Allez sur Mise en page >> Cliquez sur “modifier” pour le gadget «messages les plus consultés» et choisissez l’affichage de 5 articles puis enregistrez les modifications.

- Vous pouvez facilement changer les couleurs du gadget en allant sur Modèle, >> Présentation >> Avancé et là, changez les couleurs pour background1, background2, background3 ainsi de suite jusqu'à background7..

Source

@+


jeudi, septembre 06, 2012

Blogger 101

lundi, mai 07, 2012

Badge d'abonnement à votre chaîne Youtube

Vous avez posté un certains nombre des vidéos sur Youtube ? Vous voulez faire la promotion de votre chaîne Youtube sur votre Blog ? Voici pour vous un petit code pour avoir un badge d'abonnement à votre chaîne Youtube sur blog.





<iframe class="youtube-framesrc="http://www.youtube.com/subscribe_widget?p=nomdutilisateurscrolling="noframeBorder="0">
</iframe>

Ce code est à mettre dans un gadget HTML/Javascript en ayant soin de remplacer nomdutilisateur par votre nom d'utilisateur. Il affichera le nom de votre chaîne Youtube, le nombre des vidéos postées ainsi que le nombre d'abonnés. En plus de cela, il y a un bouton d'abonnement qui permettra à vos lecteurs de pouvoir s'abonner à votre chaîne.



Grâce à cet petit badge vous pouvez donc faire la publicité de votre chaîne Youtube sur votre blog et attirer des nouveaux abonnés.

 
Copyright © 2013 Blogger au bout du doigt
Powered byBlogger