Sommaire - (Blogger) Suggestions de publication et de navigation

Voici des idées de personnalisation : liste d'articles, nuage de tags, menus, etc ...

1. (Blogger) Afficher la liste des articles les plus commentés
2. (Blogger) Afficher la top liste des commentateurs
3. (Blogger) Afficher la liste des articles les plus consultés
4. (Blogger) Afficher une liste aléatoire d'articles
5. (Blogger) Afficher vos articles sous forme de résumés 
6. (Blogger) Afficher un slide des derniers articles parus  
7. (Blogger) Afficher un slide vertical des derniers articles parus

1. (Blogger) Installer un favicon 
2. (Blogger) Activer l'anti-clic droit

Orientation

1. (Blogger) Créer un fil d'Ariane
2. (Blogger) Afficher un nuage de tags 
3. (Blogger) Ouvrir les liens externes dans un autre onglet
4. (Blogger) Ajouter une barre de navigation multi-onglets
5. (Blogger) Créer un menu horizontal à onglets
6. (Blogger) Afficher un menu coulissant

Référencement

1. (Blogger) Modifier la disposition du titre des articles
2. (Blogger) Ajouter des meta tags
3. (Blogger) Créer un sitemap

(Blogger) Afficher un slide vertical des derniers articles parus

J'avais déjà testé un slide des derniers articles réalisé avec Widget Box, mais je le trouvais trop lent à charger.
J'ai trouvé mon bonheur chez Abu-farhan, un site anglophone.
Le voici :

Pour le réaliser, vous allez dans Présentation > Eléments de la page.

Vous cliquez sur Ajouter un gadget et choisissez HTML/Javascript. Vous y collez ce pavé :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}
#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}
#spylist li {width:268px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;background:#fff;border:1px solid #ddd;}
#spylist li a {text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0px 0px;padding:0px 0px 2px 0px;}
#spylist li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}
.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;text-align:right}
.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}
-->
</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGwafqD_29WuNvgHQ2xCR2ka7mc2eriiwgRSGj_siCUTMdoi14xqEgq77clCNP9VlGbMW90crcS7ASA5gQNeBxW7PNxfYgjnKv1PGe0mOCgyTdfqtGUJfQXtLULJZ-qycie0by6a9Qn0/s1600/blogger.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvMeY34eQmVcOBXdkUIg4q5gP2WgCUX9gkOJgvgurZRiMXO6GGhGpqywuNMeqqZESy3y1pwvkCYBUfzz8lUVTow6iFkwdNArMt437vzKRCMHJjF1Rre-fyFk8gJJ3l9UdZHtW0TZ3y3k/s1600/f.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWQ4Em6xpNl0eoLvB9tikb5uaJdQ-gK4RFR9BUSqIW3F_KMJkLjW7bVypDZbNujBYF4_Pw8oivxy7xpV14nps1f2LNq2gnUCX8lJL_QhlqN_z3-mIyxG4PN-0AOHoqvmuzfF9YszswvQ/s1600/google.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlp8t2CFgqUenqhWEs1ZGgm-MACYhk2OIr6rdWknPWjKFfEna7mbEaHNXx5f7WgHKzoCqB1SZp_HSIA461WN6wlt3Viq88RaxI6q4Qr8pRE5S7qxAJIbS7k0FD6si-1SvxVBWcz114Kk/s1600/rss.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczscJe7r_cf5zqwsBHgXQaZCOLwFOZLyRdLapetA2NN0cdrTaDUNzfxQSJgp89vRw-oE34tJ9fpkSYypVrEaIF9zoe8DWFjrVdjVx5jipgSEoV02yvgJpBb1vELJBHLfiTyC__H0mCR8/s1600/digg.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://les-nouvelles-ficelles-d-annak.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript">
</script></div>

Maintenant, vous personnalisez votre slide :

• Vous remplacez http://les-nouvelles-ficelles-d-annak.blogspot.com/ par l'adresse de votre blog.
  

Si vous voulez allez plus loin, la partie CSS se modifie ainsi :

• la hauteur du slide : 

#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}

• la largeur du slide :  

#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}

• la largeur des liens du slide qui doit être relative à celle du slide : 

#spylist li {width:268px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;background:#fff;border:1px solid #ddd;}

• la date : 

.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;text-align:right} 

• les commentaires :

.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}

Le code en javascript peut aussi se modifier :

•  Les adresses des vignettes

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGwafqD_29WuNvgHQ2xCR2ka7mc2eriiwgRSGj_siCUTMdoi14xqEgq77clCNP9VlGbMW90crcS7ASA5gQNeBxW7PNxfYgjnKv1PGe0mOCgyTdfqtGUJfQXtLULJZ-qycie0by6a9Qn0/s1600/blogger.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvMeY34eQmVcOBXdkUIg4q5gP2WgCUX9gkOJgvgurZRiMXO6GGhGpqywuNMeqqZESy3y1pwvkCYBUfzz8lUVTow6iFkwdNArMt437vzKRCMHJjF1Rre-fyFk8gJJ3l9UdZHtW0TZ3y3k/s1600/f.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWQ4Em6xpNl0eoLvB9tikb5uaJdQ-gK4RFR9BUSqIW3F_KMJkLjW7bVypDZbNujBYF4_Pw8oivxy7xpV14nps1f2LNq2gnUCX8lJL_QhlqN_z3-mIyxG4PN-0AOHoqvmuzfF9YszswvQ/s1600/google.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlp8t2CFgqUenqhWEs1ZGgm-MACYhk2OIr6rdWknPWjKFfEna7mbEaHNXx5f7WgHKzoCqB1SZp_HSIA461WN6wlt3Viq88RaxI6q4Qr8pRE5S7qxAJIbS7k0FD6si-1SvxVBWcz114Kk/s1600/rss.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczscJe7r_cf5zqwsBHgXQaZCOLwFOZLyRdLapetA2NN0cdrTaDUNzfxQSJgp89vRw-oE34tJ9fpkSYypVrEaIF9zoe8DWFjrVdjVx5jipgSEoV02yvgJpBb1vELJBHLfiTyC__H0mCR8/s1600/digg.png";

Un point important à connaître, si votre flux RSS est partiel (à vérifier dans Paramètres > Flux d'actualisation), les vignettes de vos articles n'apparaîtront pas, ce sont alors les vignettes ci-dessus qui les remplaceront.

• les marges

cellspacing = 6;

•  Les bordures

borderColor = "#232c35";

•  Les background

bgTD = "#000000";

•  Les dimensions des vignettes

thumbwidth = 70;
thumbheight = 70;

• La taille de la police

fntsize = 12;

• La couleur des liens

acolor = "#666";

• Les liens en gras 

aBold = true;

• Montrer la date

showPostDate = true;

• Le sommaire

summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

• Le nombre de résumés qui défileront

numposts = 20;

• Le nombre de résumés visibles dans le slide

limitspy=4

• La vitesse du slide

intervalspy=4000

(Blogger) Afficher un menu coulissant

Voici un menu coulissant aux bords arrondis. Son installation nécessite la possibilité de mettre du javascript sur le blog, ce qui est le cas des blogs Blogger. Il n'est pas très difficile à installer et assez joli.

Ayant plusieurs programmes en javascript sur la page, j'ai dû mettre le menu sur un page différente pour qu'il fonctionne parfaitement : Le menu coulissant.

Voici les codes à copier et à coller en HTML, à la suite :

Le code javascript

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png)"});
    });
    //slides the element with class "menu_body" when mouse is over the paragraph
    $("#secondpane p.menu_head").mouseover(function()
    {
         $(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png)"});
    });
});
</script>

Le CSS

<style type="text/css">
.menu_list {width: 260px;}
.menu_head {padding: 5px 10px;cursor: pointer;position: relative;    margin:1px;font-weight:bold;color:black;background: #C4C4AD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png) center right no-repeat;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
-goog-ms-border-bottom-left-radius: 10px;
-goog-ms-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;}
.menu_body {display:none;}
.menu_body a{ display:block;color:#767468;background-color:#FAF8F1;
  padding-left:30px; text-decoration:none;}
.menu_body a:hover{ color: #000000; text-decoration:underline;}
</style>

Le menu

<div style="float:left" >
  <div id="firstpane" class="menu_list">
        <p class="menu_head">TITRE 1</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>
        <p class="menu_head">TITRE 2</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>
          </div>
</div>

Passons à la personnalisation du contenu du menu.

Les titres

<p class="menu_head">TITRE 1</p>
<p class="menu_head">TITRE 2</p>

et les liens

<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>

Si vous désirez ajouter un étage, vous rajoutez le groupe suivant :

 <p class="menu_head">TITRE</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>

Et maintenant, personnalisons le CSS :

La largeur du menu

.menu_list {width: 260px;}

La couleur de la police de l'entête

color:black;

La couleur du fond de l'entête 

#C4C4AD

La couleur des liens 

color:#767468;

La couleur du fond des liens 

background-color:#FAF8F1;

La couleur des liens au survol 

color: #000000;

(Blogger) Activer l'anti-clic droit

L'anti-clic droit ne stoppera pas les internautes aguerris, d'autres solutions existent, mais ralentira la copie de vos images et textes.

Vous allez dans Présentation > Modifier le code HTML.
Vous recherchez - Edition > Rechercher dans le menu de votre navigateur - la ligne

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ce qui est important est en bleu, le reste peut différer.

Et vous la remplacez par

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Vous constaterez ensuite qu'il est impossible de surligner un passage de votre blog avec la souris et de faire apparaître le menu de votre clic droit.

(Blogger) Afficher un slide des derniers articles parus

J'avais envie d'un slide, un diaporama, en tête de colonne avec les derniers articles qui défilent. Mais je ne trouvais que des modèles compliqués à mettre en oeuvre et où il fallait actualiser manuellement les liens et images des articles. Quand je voulais une mise à jour automatique !

En allant sur WidgetBox (inscription gratuite), j'ai créé un slide de la largeur des articles (600px) et d'une hauteur de 200px, à partir de l'adresse du blog :

• Make a widget > Blog Feed > basic
• saisissez l'adresse de votre blog
• cliquez sur Make widget

 J'ai épuré au maximum le design pour obtenir :

Le zigouigoui Get Widget ne me convenait pas. Pour l'enlever, il faut choisir la version payante.

J'ai donc plutôt choisi

• de copier le code embed, même si une fonction facilitant l'insertion sur Blogger est proposée.
• de coller ce code, tel quel, dans une page du bloc note et de sauvegarder sous 

nom du fichier : featured.html
type : tous les fichiers

Ensuite, j'ai hébergé ce fichier chez ArchiveHost (gratuit) et obtenu une adresse.

http://sd-1.archive-host.com/membres/up/1161825247/Featured.html

J'ai créé un iframe

<iframe frameborder="no" height="200" name="featured" scrolling="no" src="http://sd-1.archive-host.com/membres/up/1161825247/Featured.html" width="600"></iframe>

En rouge : l'adresse de la page html hébergée.
En bleu : la hauteur de cet iframe qui est la même que celle du widget. Le zigouigoui est hors dimensions fixées pour le widget.
En vert : la largeur de l'iframe qui est la même que celle du widget.

Je colle ce code en HTML et  j'obtiens :



A voir : Un slide vertical

(Blogger) Créer un sitemap

Un sitemap est un plan de site, il a pour but de communiquer à Google la liste des articles présents sur votre blog et ainsi permettre une meilleure indexation.

Il existe 2 méthodes :

• La première commune à tous les blogs utilise le flux RSS de votre blog pour informer Google des nouvelles parutions (voir s'inscrire à Google SiteMaps). 

L'inconvénient est que les anciens articles ne sont pas signalés à Google. Pour ce faire, nous allons utiliser

• Une seconde méthode propre à Blogger :

Allez dans Outils pour les webmasters >  cliquez sur le nom de votre blog > Configuration du site > Sitemaps > cliquez sur Envoyer un sitemap

Maintenant, vous complétez la case blanche à droite de l'adresse de votre blog pour

les 100 premiers articles avec

atom.xml?redirect=false&start-index=1&max-results=100

Les 100 suivants avec

atom.xml?redirect=false&start-index=101&max-results=100

Et ainsi de suite, selon le nombre d'articles présents sur votre blog :

Dans les jours qui suivent, vous devriez trouver davantage de vos articles référéncés par Google.

(Blogger) Ajouter des meta tags

Les meta tags sont destinés à informer les moteurs de recherche sur les particularités de votre blog : langage, description, mots clés ...
Si vous avez déjà regardé la source de votre blog (Affichage > code source de la page), vous avez dû constater l'absence des meta tags description et mots clés.
Ils sont pourtant utiles pour le référencement de votre blog.

Pour les rajouter, allez dans Présentation > Modifier le code HTML.

Cherchez la ligne

<head>

et collez à la suite, en personnalisant

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Description du blog' name='Description'/>
</b:if>
<meta content='Mots clés séparés par une virgule' name='Keywords'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'> signifie que cette ligne doit seulement apparaître en page d'accueil

Ainsi :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Aide et Astuces pour créer et personnaliser un blog' name='Description'/>
</b:if> 
<meta content='OverBlog,Blogger,Aide,Astuces' name='Keywords'/>

Et dès le passage de Google :

(Blogger) Ouvrir les liens externes dans un autre onglet

Un des handicaps de la barre d'outils de Blogger est qu'elle ne possède pas la fonction "ouverture des liens dans une autre fenêtre".

Bien sûr, au cas par cas, il suffit d'aller en HTML et de rajouter target="_blank" pour chaque lien

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank">>Les nouvelles ficelles d'Anna K</a>

Pour généraliser cette fonction à tous les liens du blog, il suffit :

• d'aller dans le CSS : Présentation > Modifier le code HTML
• de cocher Développer des modèles de gadgets
• de rechercher la ligne

<div class='post-header'>

• de rajouter à la suite

<base target='_blank'/> 

(Blogger) Modifier la disposition du titre des articles

Actuellement, si vous regardez la barre noire tout en haut de votre navigateur, vous constatez que le titre de votre blog apparaît avant le titre de votre article.

Ce qui signifie que la mise en valeur est faite sur le nom de votre blog, et non pas sur celui de l'article. Ce qui explique les résultats sur Google :

Pour un meilleur référencement, l'inverse est préférable : le titre de l'article avant le titre du blog.

Pour modifier cela :

• rendez vous dans votre CSS : Présentation > Modifier le code HTML
• Recherchez la ligne

<title><data:blog.pageTitle/></title>

• Remplacez la par

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

et vérifiez sur votre blog.

 
Google devrait effectuer les modifications dans les quelques jours.

(Blogger) Créer un fil d'Ariane

Le fil d'Ariane représente l'arborescence du blog. Il se place en haut de la colonne article et décrit le chemin qui mène à cet article : Accueil > libellés de l'article > nom de l'article.

J'ai trouvé la solution chez AideBlog et j'ai ensuite personnalisé les codes.

Ceux-ci s'installent dans le CSS : allez dans Présentation > Modifier le code HTML

1/ Recherchez ]]></b:skin>, en faisant Edition > Rechercher et collez juste avant :

.breadcrumbs{padding:5px;margin:0;margin-bottom:10px;font-size:85%;line-height:1.4em;background-color:#f5f5fdc;}

Il s'agit de la mise en forme de la ligne. Vous pouvez personnaliser :

la police : couleur, font, taille ...
le fond : background
les bordures : border
etc

2/ Ensuite, vous installez le code en lui-même. Recherchez <div class='post hentry'> et collez juste après :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Accueil</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if> 

J'ai supprimé la mention Browser et francisé Home/Accueil

(Blogger) Afficher vos articles sous forme de résumés

Lorsqu'un article est long, il peut être intéressant de le scinder, de rajouter un lien Lire la suite sur lequel le visiteur cliquera pour lire l'article en entier.

Il existe 2 possibilités :

Au cas par cas

Lors de la rédaction de votre article, au moment de faire cette coupure, vous cliquez sur la feuille déchirée. Puis vous continuez d'écrire.

Ensuite, pour personnaliser Lire la suite, vous allez dans Présentation > vous cliquez sur Modifier dans le pavé Messages du blog et dans la fenêtre qui s'ouvre, vous modifiez le texte du lien de la page de messages

Pour tous les articles du blog

Le Blogger donne une solution très facile et très rapide à mettre en oeuvre

A voir :

1. Ouvrir et fermer un texte
2. Ouvrir et fermer un texte - Lire la suite - Javascript
3. Ouvrir un texte - Lire la suite - CSS et HTML

(Blogger) Afficher la liste des articles les plus consultés

Un widget Blogger vous permet d'afficher la liste des messages les plus consultés avec une petite image.

Allez dans Présentation > Eléments de la page > cliquez sur Ajouter un gadget et sélectionnez

et vous obtenez

Messages les plus consultés

• 

  Concevoir sa bannière d'entête avec des générateur...

  Voici une liste de sites où vous pourrez réaliser votre bannière grâce à un générateur et gratuitement. CREABAN Allez sur CREABAN Compléte...
• Mettre en ligne de la musique avec une playlist - ...

  DEEZER Allez sur Deezer Inscrivez-vous. Nous allons créer une play-liste, c'est-à-dire un lecteur de plusieurs chansons. Cliquez dans le...
• Créer sa signature manuscrite

  Pour personnaliser vos articles, il peut être sympa de les signer "manuellement". Si vous n'avez pas de scanner, le générateur de OnlinePer...
• Sommaire - (OverBlog) Modifications de design

  Les articles suivants expliquent comment modifier le design dans chaque partie du blog. Si vous désirez vraiment personnaliser votre blog, c...
• 

  Dans les filets de Paypal

  Paypal est un service de paiement en ligne qui, en tant que tel, n'hésite pas à utiliser les méthodes des banques traditionnelles. L'ouvert...
• Plan de site

  Pour circuler sur ce blog, vous avez 3 possibilités : 1/ grâce au NUAGE DE TAGS (mots-clé). Vous cliquez sur celui qui vous intéresse et le...
• Agrandir une photo d'un clic de souris dans une li...

  La lightbox est la plus connue des techniques pour mettre une photo en valeur sur fond sombre. Elle a un rendu très très plaisant. Testez en...
• 

  Transformer ses photos en polaroïd

  Vous pouvez agrémenter votre blog en donnant un format polaroid à une de vos photos. Connectez-vous à POLAROIDONIZER. Cet outil est très f...
• Dérouler le background avec Peel

  J'ai placé le fichier dans cet article, c'est donc le fond de cet article qui se déroule. Regardez à droite : Lorsque le fond se déroule, il...
• 

  Comparatif Overblog/Blogger

  Voici le comparatif des fonctionnalités des blogs OverBlog et Blogger gratuits. Cet article sera complété au fur et à mesure,  : Foncti...

(Blogger) Afficher la top liste des commentateurs

Un code trouvé chez BloggerStop

Il suffit de le copier, de modifier :

YOUR_BLOG_ADDRESS_WITHOUT_HTTP:// :par l'adresse de votre blog sans http://
BLOG_AUTHOR_NAME vous saisissez votre pseudo si vous ne voulez pas être décompté
num=10 le nombre de commentateurs affichés

Ensuite, vous collez ce code dans un module (Présentation > Eléments de la page > vous cliquez sur Ajoutez un gadget > vous choisissez HTML/Javascript).

Et vous obtenez :

(Blogger) Afficher une liste aléatoire d'articles

Une fonction bien utile pour mettre en valeur des articles plus anciens.

Vous allez sur Blogger Help.

Vous copiez le code.

Vous modifiez :

numofpost=6 le nombre d'articles voulus
wordnumber=5 la longueur du résumé

Ensuite:

• Soit vous collez ce contenu dans un widget (module) : Présentation > Ajouter un widget > choisir HTML/Javascript
• Soit vous le collez dans un article (Publication d'un message > Nouveau message > Modifier le code HTML)

et vous obtenez :

(Blogger) Afficher la liste des articles les plus commentés

Blogger ne prévoit pas cette fonction. Mais j'ai trouvé la solution chez Blogger Help. Elle peut être mise en oeuvre en 10 secondes.

Il suffit :

• de cliquer sur Click here to get the code dans Step 1.
• d'ouvrir le fichier avec le Bloc-Note
• de copier le contenu

Ensuite:

• Soit vous collez ce contenu dans un widget (module) : Présentation > Ajouter un widget > choisir HTML/Javascript
• Soit vous le collez dans un article (Publication d'un message > Nouveau message > Modifier le code HTML)

Vous personnalisez le début du script :

aBold = true signifie que les liens seront en gras. Sinon false
numposts=200 nombres d'articles listés
maxshowresult=20 nombre d'articles à afficher
home_page = "http://les-nouvelles-ficelles-d-annak.blogspot.com/" l'adresse de votre blog

Un exemple :

(Blogger) Créer un menu horizontal à onglets

Sur Blogger, la conception d'un tel menu est très facile :

Dans Présentation > Eléments de la page, dans une colonne vous cliquez sur Ajouter un gadget et choisissez Liste des liens :

Vous complétez en ajoutant les liens qui mènent à l'Accueil de votre blog, aux tags importants ...
Avec les petites flèches à côté de Modifier-Supprimer, vous les classez.
Vous enregistrez et, ensuite, vous positionnez ce widget (module) tout en bas de l'entête : les liens se mettront sur une ligne horizontale.

Ensuite, si vous désirez que votre menu ait le même design que celui en photo ci-dessus, vous allez dans Présentation > Modifier l'HTML et vous rajoutez après la partie concernant l'entête

/* Header ----------------------------------------------- */

ce bloc

/* --Menu Horizontal-- */
.tabs-inner {margin: .5em 20px 0;padding: 0;}
.tabs-inner .section {margin: 0;}
.tabs-inner .widget ul {padding: 0;background: transparent none repeat scroll bottom; -moz-border-radius: 0;-webkit-border-radius: 0;-goog-ms-border-radius: 0;border-radius: 0;}
.tabs-inner .widget li {border: none;}
.tabs-inner .widget li a {display: inline-block;padding: .5em 1em;margin-right: .25em;color: #ffffff; font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;-moz-border-radius: 10px 10px 0 0;-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;-goog-ms-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;border-right: 1px solid transparent;}
.tabs-inner .widget li:first-child a {padding-left: 1.25em;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomleft: 0;-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 0;-goog-ms-border-top-left-radius: 10px;-goog-ms-border-bottom-left-radius: 0;border-top-left-radius: 10px;border-bottom-left-radius: 0;}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {position: relative;z-index: 1;
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;color: #336699;-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);-goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);}
.tabs-inner .widget li span {color:white!important;font-size:150%;margin-left:10px;margin-right:10px;}

(Blogger) Afficher un nuage de tags

Un tag est un mot-clé.

• plusieurs articles peuvent avoir un même mot-clé en commun et ainsi être regroupés par thème.
• un article peut avoir plusieurs mots-clés et ainsi apparaître dans plusieurs sommaires.

A la fin de la rédaction de vos articles (Publication d'un message > Nouveau message), vous complétez la zone libellés sous l'article :

Pour vérifier vos tags précédents, cliquez sur Tout afficher. Il vaut mieux mettre 2 articles avec le tag "maison" qu'un article avec "maison" et l'autre avec "maisons".

Lorsque l'article est publié, vous allez dans Présentation > Eléments de la page, vous cliquez sur Ajouter un gadget dans une colonne de modules. Vous choisissez Libellés et vous complétez :

Titre : vous n'êtes pas obligé d'en mettre un
Afficher : il est préférable de sélectionner vos libellés afin de mettre les plus importants. Un nuage de tags ne doit pas faire 10 km de long.
Afficher : sélectionnez Nuage

Et vous obtiendrez un nuage de tags sur ce modèle :

agrandir annuaire avatar background bannière calendrier carroussel clic droit clignotement compteur conversion curseur diaporama dictionnaire digglike défilement déplacer déroulement encadrement excel favicon fichier flash fondu enchaîné formulaire Google graphique générateur horloge iframe imprimer infobulle liens lightbox lire la suite map menu musique open office partenariat paypal pdf photo police pop up post-it pps protection puzzle pétition quizz radio rollover RSS slideshow sondage souris tableau tagcloud textarea traduction télévision vague vidéo word Yahoo zip zoom

Chaque tag est un lien qui mène vers tous les articles possédant ce tag

(Blogger) Ajouter une barre de navigation multi-onglets

Pour alléger ma colonne de modules, je cherchais un tableau à onglets. J'ai trouvé mon bonheur chez Dacoolhunter.

Le gadget est tout simple à installer.

Le code Javascript s'installe dans le CSS (Présentation > Modifier le code HTML) et vous le collez avant </head> - que vous trouverez rapidement en faisant Edition > Recherche.

La partie HTML s'installe dans un module (Présentation > Eléments de la page > vous cliquez sur Ajoutez un gadget > vous choisissez HTML/Javascript).
Vous la personnalisez

<div class="tabber">
<div class="tabbertab">
<h2>Titre de l'onglet</h2>
<p>Contenu de l'onglet</p>
</div>
</div>

Et voici un exemple simplifié (laissez-lui le temps de charger):

Bienvenue

Pensez à mettre à jour vos liens et vos favoris

Tags

Sélectionnez le thème qui vous intéresse

Commentaires

Vos questions et réactions

Installer un favicon

FAVICON est la contraction de ICONE et FAVORI.

C'est une image de petite taille (16*16px) qui se met devant l'adresse de votre blog dans la barre de votre navigateur et qui symbolise votre blog. Il peut donc être l'avatar de votre blog.

Lorsque vos visiteurs ajoutent votre blog à leurs favoris, celui-ci apparaît précédé de votre favicon.

Il se voit sous Fire Fox et IE7.

Cette image a une extension en .ico

Pour trouver un favicon, rendez-vous chez FAVICON ou chez CHAMI
Pour transformer une image en .ico, allez sur TOOLSDYNAMIC DRIVE
Pour l'héberger, allez chez Archive-Host

Pour l'installer :

Sur OverBlog, il suffit de coller en HTML de votre entête :

<link href="L'adresse URL de votre image" rel="shortcut icon" />

Actuellement, OB empêche le favicon personnalisé et préfère imposer le sien.

Sur Blogger, allez dans Présentation > Modifier le code HTML et recherchez la ligne

</head>

Collez immédiatement à la suite

<link href="L'adresse URL de votre image" rel="shortcut icon" />