Nouveau Look pour LeBlogger

LeBlogger.com a changé de look, une fois de plus. C'est juré, je ne toucherais plus au code pendant quelques semaines. Lisez la suite pour découvrir ce que j'ai tenté de faire ...
Blogger

LeBlogger d'avant

De manière générale Je n'ai fait que optimiser l'ancienne Template que j'ai créé il y a quelques semaines et qui ressemblais à ça:
Blogspot

La structure

Je n'ai pas trop changé la structure du blog, la largeur totale du blog fait 970px et il y a toujours :
  1. Le header, divisé en deux partie
  2. Une barre des liens, transparente.
  3. La colonne des articles, qui fait maintenant 630px.
  4. La colonne des widgets est plus petite 260px
  5. Le footer est divisé en 5 colonnes pour afficher les articles récents de différentes catégories.
Blogger
Qu'est ce que vous pensez de cette présentation ?

Nouvelle barre de partage

Oui j'ai encore changé le look de la barre de partage qui se trouve à la fin de chaque message. Je ne sais toujours pas quel bouton y ajouter (en plus de Facebook et Twitter) et si c'est vraiment utile.
Blogger
Des suggestions ?

Les couleurs

J'ai changé toutes les couleurs du blog, j'ai essayé d'être le plus cohérent possible mais je ne suis pas encore satisfait du résultat, ça risque de changer dans les prochains jours ...

Les coins arrondis

Tous ou presque est arrondis , j'en ai même abusé quelques fois mais en général ça donne un look sympa, j'aime.
Pour arrondir un section, il suffit d'ajouter ces deux lignes dans le CSS d'une balise a/p/H/span/div :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Bien sûr votre section doit avoir une bordure (border).

Des nouvelles classes

J'ai créé quelques classes pour me faciliter la vie:
  • Une classe BB pour mettre en évidence un texte.
  • Une classe Opacity pour changer l'opacité d'une image en ajoutant class="opacity" dans le code de l'image.
  • Une classe Annonce pour afficher des messages en haut du blog ...
  • Des classes FL et FR pour décaler un contenu à gauche ou à droite.
  • Une classe Spacer pour ajouter un espace vide sans passer par ce CSS. style="display:blok; height:10px;"
  • J'ai aussi modifié toutes les classes habituelles comme H2, H3, H4, ul, ol, il , stong, Blokquote ....

Toujours rien pour les commentaires

Je voulais refaire complètement l'affichage des commentaires mais c'est raté, peut être pour la prochaine fois : nouveaux smilies, déplacer le formulaire, déplacer l'avatar ....
Blogger
(J'ai galéré pour afficher proprement les liens Nouveaux/Anciens commentaires.)

LinkWithin c'est nul

Comme vous l'avez sûrement remarqué ce widget n'affiche pas toujours des articles qu'on peut qualifier de "Similaires" et en plus il ajoute beaucoup d'espace inutile en haut, en bas et sur les cotés. Il est même impossible de le centrer (il faut envoyer un email à linkwithin !).
Je le garde encore quelque temps parce qu'il me faut repenser le système des libellés avant d'utiliser un autre widget pour afficher les Articles similaires.

Toujours pas de LOGO

BloggerToujours pas de Logo digne de ce nom pour Lelogger.com et le concours que j'ai fait il y a quelques semaines ne m'a pas servi à grande chose (Gaëtan ne m'a jamais envoyé le fichier source du logo).
S'il y a des âmes charitables qui peuvent et veulent m'aider, pleaaaase Contactez moi.
Par contre j'ai créé une image 125x125px que j'aime bien  ------------------>
Qu'est ce que vous en pensez ?

Plus Rapide ?

J'ai supprimé beaucoup de trucs qui ne servaient à rien ce qui fait que le XML est beaucoup moins lourd, il fait à peine ~40 Ko (c'est la même taille qu'une Template Minima !). J'ai optimisé, manuellement, le CSS mais il reste encore beaucoup de choses à faire.

Je trouve que le blog est encore un tout petit peu lourd, la page d'accueil se charge en environ 4 secondes et l'article Google Wave (qui contient plusieurs images, un vidéo et 513 commentaires ) se charge en 4,5 secondes (d'après tools.pingdom.com).
Blogspot
Ce qui ralentie le chargement c'est les images (j'utilise environ 2-3 grosse image par article) ensuite c'est les scripts de BlogBang et LinkWithin.
J'ai abandonné le widget Articles aléatoires (pourtant très très utile) parce qu'il faisait 1Mo !!!
D'un autre coté j'utilise actuellement 4 widgets FLUX de Blogger qui sont très légers !

Firefox, Internet Explorer, Chrome, Safari c'est KifKif

Le blog a presque le même look dans tous les navigateurs sauf bien sûr pour les coins arrondies.
Comme vous le savez Internet Explorer, contrairement à Firefox, Safari et Chrome, ne supporte pas les coins arrondies mais ça ne fait pas grande différence, Regardez :
Blogspot
J'ai testé sur PC/Windows en ignorant IE6.

J'aime pas

Pour finir cet article, voici ce que je n'aime plus dans ce nouveau look.
  • Le logo (Bien sûr).
  • Les smiley : les images sont plus grandes que le texte et elles sont trop lourdes.
  • Les couleurs : il faudrait plus de cohérence.
  • La rapidité : Je vais enlever les widget Linkwithin et Facebook et optimiser le HTML et le CSS.
Voilà, si vous avez des suggestions, des questions ou si vous remarquez des anomalies dans la nouvelle Template n'hésitez pas à laisser un commentaire en bas de cette page.
15 Commentaires
  1. Alors moi j'aime bien les binettes :))

    RépondreSupprimer
  2. Bah moi j'aime bien ton logo.
    Je sais pas si tu as concu ta template depuis le départ, ou si tu as modifié une de Blogger, mais j'aimerai savoir si tu connais les nouveaux nom(header/body...) des nvelles templates pour pouvoir adapter l'astuce qui permet de virer les widget sur les pages autre que "accueil"?
    Suis je clair? pas sur...

    RépondreSupprimer
  3. J'ai commencé le blog avec la Template par défaut Minima puis je la modifie au fur et à mesure.

    Si ce n'est que pour les widget j'ai déjà fait un tuto : http://www.leblogger.com/2009/06/afficher-widget-page-specifique.html

    Pour le logo, je compte faire un truc simple en utilisant un police un peu spéciale et un arrière plan Orange ....

    RépondreSupprimer
  4. Merci Soufiane, je vais essayer mais il me semble que ce code fonctionne plus avec les nvelles templates...
    Je te tiens au courant.
    J'attends avec impatience le nouveau logo alors ;)

    RépondreSupprimer
  5. Beau travail, ça en fait du boulot! Je vais faire comme toi :
    J'aime:
    La clarté du footer
    Les coins arrondis
    La rapidité améliorée
    Le contenu des articles en général
    Je n'aime pas :
    Les pub qui bougent
    La cohérence dans l'ensemble : je voudrais plus de cohérence dans les couleurs par exemple, mais tu dis travailler dessus, donc, bon courage car je sais que c'est du boulot !
    Bonne continuation LE blogger ;o)

    RépondreSupprimer
  6. Perso je préfère celui de leblogweb que je trouve plus aéré, mais bon c'est une question de goût...

    RépondreSupprimer
  7. @Attention à la Terre
    Pour couleur je pense que je vais virer le bleu et garder l'orange et le Gris-Blanc ...

    RépondreSupprimer
  8. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  9. @SimEFP
    Oui tu as raison, j'ai une obsession pour mettre les marges à 0px je vais essayer d'améliorer cela, surtout dans la page d'accueil :))

    RépondreSupprimer
  10. Salut et bravo pour ce blog très utile !
    Je trouve la nouvelle version plus claire et moins "fouilli" qu'avant, continue comme çà !

    RépondreSupprimer
  11. Cote rapide, c'est clairement un plus ;)
    Nice job!
    Mon conseil: ne pas utiliser le concepteur de modèle draft si tu ne veux pas un blog qui rame!

    RépondreSupprimer

Copyright 2015 Soufiane.fr