Tout sur TypePad

TypePad Beta : nouvel outil d'édition d'images (formidable)

2012-01-13T01:35:18-08:00

Après plusieurs mois de travail en collaboration avec un nouveau partenaire, Aviary, l'équipe TypePad est heureuse de vous présenter un nouvel outil d'édition d'image mis à disposition de tous les utilisateurs de la version Beta de TypePad.

Pour jouer avec ce nouvel outil (car oui, nous faisons le pari que vous allez vous amuser), il vous suffit d'insérer une image dans votre note comme vous le faisiez auparavant.
Sauf que désormais, une fois cette image insérée, lorsque vous cliquez 2 fois dessus, un nouvel écran tout neuf va s'ouvrir à vous, contenant moultes options pour personnaliser votre image comme vous le souhaitez.

L'écran d'édition dans TypePad

Nous en vous parlons pas d'options gadgets (même s'il y en a), mais d'un vrai travail d'édition possible : rognage, rotation, ajout de texte sur l'image, changement des contrastes...
Tous les classiques de l'édition d'image sont présents.

Vous pouvez de plus ajouter des légendes à vos images, ajustées sans interférence avec le reste de votre note.
Et pour vous détendre un peu, vous pouvez appliquer des effets de style (effet retro, stickers et bien plus encore).

Une image honteusement volée à la Grenouille Verte

Nous allons travailler à rédiger rapidement un article complet en base de connaissances sur le sujet, mais vous pouvez d'ores et déjà consulter celui fait par TypePad.com.

===================

Mise à jour du jour :

L'article en français est disponible sur la base de connaissances TypePad : Insertion et édition d'images dans TypePad

===================

A noter qu'avec l'introduction de ce nouvel éditeur, sur Internet Explorer 9, vous n'avez plus à activer le mode de compatibilité.

Si vous n'êtes pas encore utilisateur TypePad Beta, vous pouvez le devenir en vous rendant dans la rubrique "Compte > Sommaire", en cochant la case "Rejoignez l'équipe Bêta de TypePad !"
Toute image que vous aurez modifié via ce nouvel éditeur resteront en place même si vous décidez de ne plus être utilisateur TypePad Bêta par la suite.

A vous de jouer !

Nouvelle famille de thèmes : Clean

2012-01-09T05:37:59-08:00

Une nouvelle famille de thèmes pour bien commencer l'année (que nous vous souhaitons excellente !), c'est Clean !

Disponible en 6 couleurs (Blanc, Gris, Aubergine, Vert, Mauve et Orange) et présentant un design épuré, cet ajout vous permettra, tout comme la famille Mosaïc, d'envoyer votre propre bannière en fond (format 1000 x 140 pixels).

Accessoirement, reprenant les principes mis en place avec la famille Scenes, les thèmes Clean présentent les caractéristiques suivantes :

Adaptés à la publication d'images en grand format,
Optimisés pour lecture sur smartphones,
Epurés et spacieux.

Enfin, si vous utilisez un format sur 1 colonne, vos modules seront automatiquement agencés pour un meilleur effet.

A signaler également, une excellente initiative de nos collègues américains : un guide complet pour personnaliser vous-mêmes les thèmes Clean.
Ce guide, organisé par section vous permettra de changer tout ou partie de votre design en un rien de temps.
Pour l'instant, il n'est qu'en langue anglaise, mais la traduction via Google Translate reste très correcte.

Nouveaux thèmes : Jet Set & Rock City

2011-10-28T02:48:51-07:00

Voilà qui devrait faire plaisir à Romain, la série Scenes s'achève avec la mise à disposition de 2 nouvelles variations dénommées Jet Set et Rock City.

Ils présentent les mêmes propriétés que celles évoquées lors de la mise à disposition du premier design de cette famille, à savoir :

des colonnes larges (images panoramiques et widgets)
globalement épuré (meilleure tenue sur la longueur)
des contenus aérés

Nouveaux designs : Echo Park intègre la série Scene

2011-10-13T05:59:31-07:00

Pour que vous aussi vous puissiez faire comme certains de nos blogueurs, et doter votre blog d'un nouveau look, les équipes de développement de TypePad ont intégré deux nouveaux designs à votre outil de blog préféré.

Ces deux habillages font partie d'une série nommée Scene et présentent une mise en forme plus travaillée qu'à l'ordinaire, notamment sur les éléments de type citation. Pour le moment au nombre de deux (il devrait y en avoir quatre au total), ces designs doivent répondre aux besoin de blogueurs différents. Si Urban Borough que nous vous avons déjà présenté, propose un look un peu rétro, Echo Park, celui avec les fleurs dans la bannière, s'adresse plutôt à un public féminin.

Ces designs sont par ailleurs un peu plus larges que les précédents designs de TypePad, aérant ainsi un peu plus le contenu.

Il vous est également possible avec ces thèmes de personnaliser le pied de page, à l'image de ce que vous voyez sur la capture d'écran de cet article. Cette personnalisation peut cependant s'appliquer à n'importe quel design, bien qu'elle ait été conçue initialement pour ces nouveaux habillages.

Astuce : créer un pied de blog enrichi

2011-09-29T07:12:45-07:00

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 :

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 :

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).

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.

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.

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.