Blogger au bout du doigt

Gadget libellés avec descriptions pour chacun d’eux

By Rodney // 5 commentaires:

Les visiteurs cliquent sur les liens qui fournissent assez d’information sur les choses qu’ils vont y découvrir. Le problème avec le gadget libellés fournit par Blogger, c’est qu’il n’affiche que les libellés sélectionnés, sans fournir des informations sur ce que les visiteurs sont censés trouvés sur lesdites pages.

Voici pour vous une astuce trouvée chez Blogger Pluggins et qui permet d’afficher les descriptions pour les libellés dans le gadget conçus pour ceux-ci. Il fonctionnera correctement pour ceux qui affichent la liste des libellés et non pour ceux qui affichent un nuage des libellés comme moi.

1. Modification du gadget

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
<!-- Début des  descriptions des libellés -->
<b:if cond='data:label.name == "nomdulibellé"'>
<span class="labeldesc"> – Description du libellé ici</span>
</b:if>
<b:if cond='data:label.name == "nomdulibellé"'>
<span class="labeldesc"> - Description du libellé ici</span>
</b:if>
<b:if cond='data:label.name == "nomdulibellé"'>
<span class="labeldesc"> - Description du libellé ici</span>
</b:if>
<!-- Fin des descriptions des libellés –>

</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Dans le code ci-dessus, il vous suffira de remplacez nomdulibellé par le nom du libellé pour lequel vous allez ajouter une description à l’endroit indiqué (à la place de “Description du libellé”).

Si vous avez plus de 3 libellés pour lequel vous voulez afficher une description, il vous suffira d’ajouter ce bout de code

<b:if cond='data:label.name == "nomdulibellé"'> <span class="labeldesc"> - Description du libellé ici</span> </b:if>

juste avant la ligne suivante et effectuer les modifications nécessaires.

 <!-- Fin des descriptions des libellés –>

2. Connectez vous à votre compte blogger, cliquez sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”.

2. Trouvez la ligne suivante

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Prenez le code de l’étape 1 que vous avez modifié et mettez-le à la place de celui ci-dessus. Cliquez sur “Enregistrer” et allez admirer le résultat.

Vous devriez dorénavant avoir un gadget libellés avec description pour chacun d’eux (ou au moins pour ceux dont vous aurez ajouté une description).

Remplacez “message plus ancien/récent” par les titres des articles

By Rodney // 11 commentaires:

L’un des défauts que l’on remarque chez Blogger est le fait que le lecteur qui lit un article n’est pas informé sur le titre de l’article précédent ou suivant celui qu’il lit. Pourtant, il y a des grandes chances qu’un lecteur puisse demeurer encore un peu sur votre blog s’il est tenté de lire le message plus ancien ou plus récent, attiré par le titre de celui-ci. Voici donc pour vous une astuce de MS-Potilas qui a concocté quelques bouts de code à ajouter dans votre modèle afin d’avoir les titres des articles affichés à la place de “message plus ancien” et “message plus récent”.

1. Se connecter à son compte blogger, cliquer sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”.

2. Trouvez la balise suivante ]]></b:skin> et mettez le code css ci-dessous juste avant :

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

3. Trouvez la balise </head> et ajoutez le script suivant juste avant ladite balise

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

4. Trouver la balise </body> et mettre le code suivant juste avant :

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

<script type='text/javascript'>

// Post titles to Older Post and Newer Post links (without stats skew)

// by MS-potilas 2012.

//<![CDATA[

var urlToNavTitle = {};

function getTitlesForNav(json) {

for(var i=0 ; i < json.feed.entry.length ; i++) {

    var entry = json.feed.entry[i];

    var href = "";

    for (var k=0; k<entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        href = entry.link[k].href;

        break;

      }

    }

    if(href!="") urlToNavTitle[href]=entry.title.$t;

}

}

document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');

function urlToPseudoTitle(href) {

var title=href.match(/\/([^\/_]+)(_.*)?\.html/);

if(title) {

    title=title[1].replace(/-/g," ");

    title=title[0].toUpperCase() + title.slice(1);

    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")

}

return title;

}

$(window).load(function() {

window.setTimeout(function() {

var href = $("a.blog-pager-newer-link").attr("href");

if(href) {

    var title=urlToNavTitle[href];

    if(!title) title=urlToPseudoTitle(href);

    if(title) $("a.blog-pager-newer-link").html("<< Article suivant :<br />" + title);

}

href = $("a.blog-pager-older-link").attr("href");

if(href) {

    var title=urlToNavTitle[href];

    if(!title) title=urlToPseudoTitle(href);

    if(title) $("a.blog-pager-older-link").html("Article précédent: >><br />" + title);

}

}, 500);

});

//]]>

</script>

</b:if>

Enregistrez le modèle et allez admirer le résultat, sur une page d’article.

5. Ajoutez le code css suivant sur le lien pour “Accueil” n’est pas centré entre le titre de l’article précédent ainsi que celui de l’article suivant. Trouvez la balise ]]></b:skin> et ajoutez ce code juste avant :

.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}

Et voilà, maintenant, le vilain titre de “message plus ancien” et “message plus récent” seront remplacés par les titres des articles sur votre blog.

S’il vous vient l’envie de placer ces liens sur les articles précédents et les articles suivants au-dessus des articles, comme c’est le cas sur d’autres plateformes des blogs, allez lire l’article “Déplacer messages anciens/messages récents”.

Installer la barre sociale Mashable sur votre blog

By Rodney // 7 commentaires:

Après l’article de 2010 où nous avions vu comment afficher les boutons des réseaux sociaux comme sur Mashable, nous allons ici voir comment ajouter un gadget de partage sur réseaux sociaux comme sur Mashable. Vous pouvez voir ce gadget en fonctionnement sur la barre latérale de ce blog, juste après la présentation de l’auteur.

Ce gadget très largement inspiré de celui présent sur Mashable avait d’abord été mis à disponibilité des bloggeurs de la plateforme Wordpress par Inspiredmagz qui l’avait nommé Mashable social bar (Barre sociale Mashable), il avait ensuite été adapté pour Blogger par Mohammed Mustafa. Je vous en livre la version francisée et un tout petit peu améliorée.

Voici pour vous le code à insérer dans un Gadget Html/Javascript afin d’avoir cette fameuse Barre sociale Mashable sur votre blog.

.google+ {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}

.fb-likebox {
    background: #fff;
    padding: 10px 10px 0 10px;
    border: 1px solid #D8E6EB;
    margin-top: -2px;
        height:80px;
}
.googleplus {
    background: #F5FCFE;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #D8E6EB;
    border-left: 1px solid #D8E6EB;
    border-image: initial;
    font-size: .90em;
    font-family: "Arial","Helvetica",sans-serif;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;}
.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    display:inline-block;
    margin: 9px 70px;}
.g-plusone {    float: left;}
.twitter {
    background: #EEF9FD;
    padding: 10px;
    border: 1px solid #C7DBE2;
    border-top: 0;}
#mashable {
    background: #EBEBEB;
    border: 1px solid #CCC;
    border-top: 1px solid white;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration:none;}
#email-news-subscribe .email-box{
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-right: 1px solid #C7DBE2;
    border-left: 1px solid #C7DBE2;
    border-image: initial;
   height:35px;}
#email-news-subscribe .email-box input.email{
    background:#FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:7px 14px;
    margin-left:3px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
    background: #ff9b00;
    background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline:0;-moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
    background-color: #D8E6EB;
    box-shadow: 0 1px 1px #FFFFFF inset;
    padding: 0px;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight:bold;
    overflow: hidden;
    border: 1px solid #B6D0DA;
       height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
    float: left;
    color:#1E598E;
    overflow: hidden;
    height:20px;
    padding:5px;
    width: 270px;}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;}
#other-social-bar .other-follow ul li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijx31Z6N3RR1D16C6yUfR9DrrjWQyp62FrMN3hTvToW9zYhfBE3q02jBNYSXzY_wK7fy8sOL_nuQJDUN6G_NscoeVJhYwjZ0WajDXOKLNtrhyphenhyphenVJF7O_c-6_8YAjef8NVPr3faUfoOSdX4/s400/rss-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;
        margin-left:5px;}

#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}

#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}

#other-social-bar .other-follow li.my-linkedin {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPorG8iys1HgLVJ89LzR8EZ7htJhdaKlvGfMwkZGGjR_qQS9Yl3bn3lFEBfEBxY_v7HRT90WO9t2nvsmUVdf2RcrShIzC1HRUu4jJaMvupoO96MQ8Eglb2UjKYAUNPomhAAbhhkj4xVEo/s400/linkedin-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLqsEafDW7kSL-u3kxEncVUl2-O4tXnLh5kEIR5_fU10J6XfYrXXfjMEVVxfM_qptPlM4U1jQ-lq7EfaUQnXWgBbGkRp0IrIFXZefXFJLTYB9XxpODB0_vGF4lolTcM9Nmv2HU3ImnGfc/s400/gplus-16x16.png) no-repeat transparent;
    line-height: 1;
    width: 60px;
    padding: 0px 3px 1px 20px;
    margin-bottom:0px;}

</style>

<!--[if IE]>

<![endif]-->

<div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget –>

<div class="fb-likebox">  <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/monblogsurfacebook&send=false&layout=standard& width=200px&show_faces=true&action=like&colorscheme=light&

font&height=100px&appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus">  <span>Recommendez-nous sur Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter">  <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&

align=&button=blue&id=twitter_tweet_button_0&

lang=en&link_color=&screen_name=identifiant-twitter&show_count=&

show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">  <div class="email-box">

</div> </div> <div id="other-social-bar">  <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href=http://feeds.feedburner.com/identifiantfeedburner target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LIEN PROFIL LINKEDIN" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=http://plus.google.com/44448117245314564536 target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://blogger-au-bout-du-doigt.blogspot.com/2012/02/installer-la-barre-sociale-mashable-sur.html" target="_blank" >Obtenir ce gadget»</a></span></div></div>

</div>

Maintenant voyons les modifications que vous devez apporter à ce code afin de l’adapter à votre blog :

1. Remplacez 300px par le nombre des pixels qui conviendra pour votre colonne latérale.

2. Remplacez 104555312505541309981 par l’identifiant de la page Google+ de votre blog. Si vous n’en avez pas encore une, vous pouvez la créer en cliquant ici.

3. Remplacez http://facebook.com/monblogsurfacebook par l’url de la page Facebook de votre blog.

4. Remplacez identifiant-twitter par votre nom d’utilisateur sur Twitter.

5. Remplacez identifiantfeedburner par l’identifiant Feeburner de votre blog. La dernière partie du lien, qui intervient après http://feeds.feedburner.com/ (pour Blogger au bout du doigt c’est BloggerAuBoutDuDoigt)

6. Remplacez http://feeds.feedburner.com/identifiantfeedburner par l’url Feedburner complet de votre blog

7. Remplacez xxx par l’url de votre profil Linkedin (Si vous en avez un). Si vous n’avez aucun profil dans ce service et que vous ne comptez pas en avoir d’ici là, vous pouvez effacer la partie suivante dans le code ci-haut :

<li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LIEN PROFIL LINKEDIN" target="_blank">linkedin</a> </li>

8. Remplacez http://plus.google.com/44448117245314564536 par l’url de votre profil Google+ ou encore par celle de la page Google+ de votre blog.

9. Cliquez sur le bouton “Enregistrer” et c’est fait!

Surtout n’oubliez pas d’ajouter la page de Google+ de Blogger au bout du doigt dans vos cercles et de voter pour lui en cliquant sur le +1.

Redirection vers des urls spécifiques à des pays sur blogger

By Rodney // 5 commentaires:

Après Twitter qui s'était donné le droit de censurer des contenus diffusés sur son site pour des pays spécifiques (ceux où ces contenus violent les lois locales) tout en les laissant en ligne pour les autres pays, c'est autour de Blogger de suivre le pas.

C'est ce qui a été annoncé par Blogger et est amplement expliqué sur la page "Pourquoi mon blog est redirigé vers une url spécifique à un pays donné ?". On lit sur la dite page: "Au cours des prochaines semaines, vous constaterez peut-être que l'URL d'un blog que vous consultez a été redirigée vers un domaine national de premier niveau (ccTLD, country-code top level domain). Par exemple, si vous vous trouvez en France et que vous consultez [nom du blog].blogspot.com, il se peut que vous soyez redirigé vers l'adresse [nom du blog].blogspot.fr. Lorsqu'il apparaît, le ccTLD correspond au pays où se trouve le lecteur au moment où il consulte le blog."

C'est la suppression universelle des articles qui ne violent que des lois locales qui aurait motivé cette décision si on en croit la déclaration suivante :

"En migrant vers des domaines locaux, nous pourrons continuer à promouvoir la liberté d'expression et la publication responsable tout en répondant de manière plus flexible aux demandes de suppression de contenu recevables conformément aux législations locales. Grâce à la mise en œuvre des ccTLD, il est possible de gérer les suppressions de contenu au cas par cas, en fonction du pays, de sorte à limiter au mieux le nombre de lecteurs affectés. En effet, tout contenu supprimé en vertu d'une loi nationale spécifique ne le sera que sur le ccTLD concerné."

Le propriétaire des blogs ne devraient remarquer aucun changement, puisque leurs articles incriminés resteront bien en place sur leurs blogs et dans leurs tableaux de bord, tout en n'étant pas visible dans certains pays.

Si vous voulez contourner cette censure, il vous suffira d'ajouter ncr à l'url du blog afin de le voir dans sa version non censurée (par exemple : http://blogger-au-bout-du-doigt.blogspot.com/ncr ).

Que pensez-vous de cette décision ?

Installer un compte à rebours sur votre blog

By Rodney // 4 commentaires:

Vous avez un événement prévu pour une date précise sur votre blog ? Un jour-j où vous allez dévoiler quelque chose de nouveau ? Voici pour vous un gadget compte à rebours que vous pouvez installer sur votre blog, histoire que les visiteurs puissent être à jour du temps qui reste.

Trouvé chez Blogger plugins où il fut donné comme compte à rebours pour noël, ce gadget peut être utilisé pour n’importe quel autre événement si on y apporte les modifications que je vais vous indiquer.

  
<div id="bp_count_down_div"></div>

Voici les modifications à faire sur ce code qui est à mettre dans un gadget html/javascript (ou dans un article, mais en mode html) :

- Changer la date butoire, December 25, 2011 00:00:00 (qui est celle de noël) par la date de votre événement en prenant soin de respecter le format et surtout la langue dans laquelle le mois sera écrit (en anglais). Donc, vous mettez le mois et le jour, suivi de l’année et de l’heure précise.

- Changer le message qui apparaitra à la date butoire, Je vous souhaite un joyeux noël par un message personnalisé.

- Changer la dernière partie de la phrase “Secondes avant Noël” par l’intitulé de l’événement que vous avez prévu.

Avec ce code je pu installer le compte à rebours suivant qui va jusqu’au 22 décembre 2012, date de la fin du commerce autour de la fin du monde 2012 (puisqu’ils disent que la fin c’est le 21 décembre).

324 Jours 21 Heures 57 Minutes 30 Secondes avant la fin du commerce sur le fin du monde 2012

Dès aujourd’hui, vous pouvez donc vous aussi installer un compte à rebours sur votre blog, pour n’importe quel événement.

Gadget libellés avec descriptions pour chacun d’eux

Remplacez “message plus ancien/récent” par les titres des articles

Installer la barre sociale Mashable sur votre blog

Redirection vers des urls spécifiques à des pays sur blogger

Installer un compte à rebours sur votre blog

SEO & REFERENCEMENT