« Nouveau thème : Urban Borough | Accueil | Nouveaux designs : Echo Park intègre la série Scene »

29/09/2011

Astuce : créer un pied de blog enrichi

Pour faire suite à la mise à disposition du nouveau thème "Urban Borough" sur TypePad, nous vous proposons ci-dessous un petit tutoriel simple pour la création d'un pied de blog "riche", c'est à dire figurant plus que les liens proposés dans son mode basique.
Dans l'esprit, cela s'apparente à ce que vous pouvez faire avec l'utilisation du widget de type "inclure votre propre HTML", mais nous allons ici essayer de vous rendre plus simple la génération de la partie HTML/CSS que cela nécessite pour le résultat que vous pouvez voir ci-dessous :

Capture d’écran 2011-09-29 à 14.21.11
Côté technique, c'est assez simple, nous allons utiliser l'éditeur WYSIWIG de TypePad pour générer le contenu du pied de blog.
Ceci nous permettra de générer la partie "contenu" en HTML.
Nous vous fournirons ensuite le CSS nécessaire à la mise en forme.
Partant de ces 2 éléments, vous aurez ensuite tout le loisir de modifier ce pied de blog au gré de vos envies.

Rédaction du pied de blog dans TypePad


Créez une nouvelle note ou nouvelle page dans TypePad, que vous sauvegarderez en brouillon, veillez à lui donner un titre qui vous permettra de le retrouver facilement au besoin.
Pour notre exemple, nous avons créé 4 "modules" : A propos de nous, Nos recommandations, Retrouvez-nous aussi ici et Mes notes préférées.
Pour chacun de ces modules nous avons saisi le contenu via l'interface de publication.
Le titre du module est de type "En-tête 3" dans le champ déroulant mise en forme.
Pour les contenus autres que ceux du module "A propos de nous", une fois ceux-ci rédigés nous leur avons appliqué le format de liste non ordonnée à partir de la barre d'outils.
Au final notre contenu rédigé dans TypePad ressemble à ceci :
Capture d’écran 2011-09-29 à 14.39.59

Nous allons ensuite faire quelques modifications dans le code HTML, pour cela, nous cliquons sur l'onglet "HTML" de notre note. Ne soyez pas effrayé par le contenu affiché, ce n'est que votre texte avec quelques balises HTML de mise en forme.
Chaque module doit avoir la forme suivante (le contenu peut varier fonction de votre inspiration) :
Module "à propos"
<h3>Titre du module</h3>
<p>Contenu du module</p>

Module "nos recommandations"
<h3>Titre du module</h3>
<ul>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
</ul>

Module "retrouvez-nous aussi ici"
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>

Module "mes notes préférées"
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>


Nous allons "enfermer" manuellement chacun de ces modules dans une balise HTML supplémentaire, de sorte à pouvoir appliquer à chacune un style différent.
Editez le code HTML de façon à transformer chaque module de la façon suivante :
Module "à propos"
<div class="
footer-list-item footer-about">
<h3>Titre du module</h3>
<p>Contenu du module</p>
</div>

Module "nos recommandations"
<div class="
footer-list-item footer-links">
<h3>Titre du module</h3>
<ul>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
</ul>
</div>

Module "retrouvez-nous aussi ici"
<div class="
footer-list-item footer-social">
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>
</div>

Module "mes notes préférées"
<div class="
footer-list-item footer-posts">
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>
</div>


Pour finir sur la partie HTML, nous allons "enfermer" l'ensemble de ces modules dans une autre balise supplémentaire, le code HTML final aura la forme suivante :
<div class="footer-list pkg">
<div class="
footer-list-item footer-about">
<h3>Titre du module</h3>
<p>Contenu du module</p>
</div>
<div class="
footer-list-item footer-links">
<h3>Titre du module</h3>
<ul>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
<li><a> titre du lien</a></li>
</ul>
</div>
<div class="
footer-list-item footer-social">
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>
</div>
<div class="
footer-list-item footer-posts">
<h3>Titre du module</h3>
<ul>
<li><a>Image</a></li>
<li><a>Image</a></li>
<li><a>Image</a></li>
</ul>
</div>
</div>


Enregistrez votre note ou page et réservez ce code modifié au chaud, via un copier (Command+C ou Ctrl+C).

Configuration du pied de blog

Rendez-vous ensuite dans la section "Habillage > Contenu" de votre blog. Cliquez sur le crayon figurant en face de la case à cocher libellée "Pied de page" (et profitez-en pour la cocher si ce n'est déjà fait).

Capture d’écran 2011-09-29 à 14.56.24


Par défaut ce pied de page est en mode basique, sélectionnez la case "Avancé", TypePad vous invite à saisir du contenu HTML. Supprimez tout contenu qui peut y figurer et collez (Command+V ou Ctrl+V) le code préalablement copié à la place.

Capture d’écran 2011-09-29 à 14.58.36



Cliquez sur OK puis enregistrez.
Vous pouvez déjà regarder ce que cela donne, vous devriez obtenir quelque chose de ce genre. Tous nos contenus sont là, mais il faut les mettre en forme.

Capture d’écran 2011-09-29 à 14.59.36

Mise en forme CSS


Pour cela, il vous suffit de copier/coller le code ci-dessous dans la section "CSS personnalisé" de la rubrique Habillage :
#footer div.footer-list-item{
float:left;
display:block;
width:23%;
margin:0 1%;
border: 0px solid transparent;
padding:0;
}

#footer h3 {
    padding-top: 5px;
}
#footer div.footer-list-item{color:#CCCCCC;}
#footer div.footer-about p{font-size:12px;}
#footer div.footer-about img{padding-right:10px;}
#footer div.footer-social ul li, #footer div.footer-posts ul li{float:left;}
#footer div.footer-social a{padding: 0 5px;}

#footer .footer-list .footer-list-item ul{
    width:100%;
    margin: 0;
    padding: 0;
    list-style: none outside none;
    }

#footer div.footer-links ul li{overflow:hidden;}
#footer div.footer-posts a{padding:5px;display:block;overflow:hidden;}
#footer div.footer-posts a:hover{background-color:#E29E56;}


Enregistrez l'ensemble et rechargez la page de votre blog dans votre navigateur, le résultat devrait être le même que celui présenté dans le début de l'article.
A noter que le code donné est optimisé pour l'habillage Urban Borough mais son principe peut être appliqué à tout habillage.
Au besoin, laissez donc un petit commentaire sur cette note si vous avez besoin d'une personnalisation quelconque pour un de vos blogs.





 

TrackBack

URL TrackBack de cette note:
http://www.typepad.com/services/trackback/6a00d83451c82369e2015391f370ba970b

Voici les sites qui parlent de Astuce : créer un pied de blog enrichi :

Commentaires

Les commentaires sont modérés, ils n'apparaîtront qu'après validation par l'auteur.

Créez votre blog !

Solution complète. Aucune installation. Simple et puissant.

Nos recommandations

    Statut TypePad